mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 12:45:11 +08:00
Merge branch 'develop' into sort-imports
Signed-off-by: Aaron Raimist <aaron@raim.ist>
This commit is contained in:
Aaron Raimist
commit
7b94e13a84
@ -2,3 +2,4 @@ src/component-index.js
|
||||
test/end-to-end-tests/node_modules/
|
||||
test/end-to-end-tests/element/
|
||||
test/end-to-end-tests/synapse/
|
||||
test/end-to-end-tests/lib/
|
||||
|
||||
2
.github/workflows/develop.yml
vendored
2
.github/workflows/develop.yml
vendored
@ -10,7 +10,7 @@ on:
|
||||
jobs:
|
||||
end-to-end:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
env:
|
||||
PR_NUMBER: ${{github.event.number}}
|
||||
container: vectorim/element-web-ci-e2etests-env:latest
|
||||
steps:
|
||||
|
||||
1
.github/workflows/layered-build.yaml
vendored
1
.github/workflows/layered-build.yaml
vendored
@ -1,7 +1,6 @@
|
||||
name: Layered Preview Build
|
||||
on:
|
||||
pull_request:
|
||||
branches: [develop]
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
15
.github/workflows/notify-element-web.yml
vendored
Normal file
15
.github/workflows/notify-element-web.yml
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
name: Notify element-web
|
||||
on:
|
||||
push:
|
||||
branches: [develop]
|
||||
jobs:
|
||||
notify-element-web:
|
||||
runs-on: ubuntu-latest
|
||||
environment: develop
|
||||
steps:
|
||||
- name: Notify element-web repo that a new SDK build is on develop
|
||||
uses: peter-evans/repository-dispatch@v1
|
||||
with:
|
||||
token: ${{ secrets.ELEMENT_WEB_NOTIFY_TOKEN }}
|
||||
repository: vector-im/element-web
|
||||
event-type: element-web-notify
|
||||
221
CHANGELOG.md
221
CHANGELOG.md
@ -1,3 +1,224 @@
|
||||
Changes in [3.36.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.36.0) (2021-12-06)
|
||||
=====================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Add unread indicator to the timelineCard header icon ([\#7156](https://github.com/matrix-org/matrix-react-sdk/pull/7156)). Fixes vector-im/element-web#19635.
|
||||
* Only show core navigation elements (call/chat/notification/info) when a widget is maximised ([\#7114](https://github.com/matrix-org/matrix-react-sdk/pull/7114)). Fixes vector-im/element-web#19632.
|
||||
* Improve ThreadPanel ctx menu accessibility ([\#7217](https://github.com/matrix-org/matrix-react-sdk/pull/7217)). Fixes vector-im/element-web#19885.
|
||||
* Allow filtering room list during treeview navigation ([\#7219](https://github.com/matrix-org/matrix-react-sdk/pull/7219)). Fixes vector-im/element-web#14702.
|
||||
* Add right panel chat timeline ([\#7112](https://github.com/matrix-org/matrix-react-sdk/pull/7112)). Fixes vector-im/element-web#19633.
|
||||
* Hide server options hint when disable_custom_urls is true ([\#7215](https://github.com/matrix-org/matrix-react-sdk/pull/7215)). Fixes vector-im/element-web#19919.
|
||||
* Improve right panel resize handle usability ([\#7204](https://github.com/matrix-org/matrix-react-sdk/pull/7204)). Fixes vector-im/element-web#15145. Contributed by @weeman1337.
|
||||
* Spaces quick settings ([\#7196](https://github.com/matrix-org/matrix-react-sdk/pull/7196)).
|
||||
* Maximised widgets always force a call to be shown in PIP mode ([\#7163](https://github.com/matrix-org/matrix-react-sdk/pull/7163)). Fixes vector-im/element-web#19637.
|
||||
* Group Labs flags ([\#7190](https://github.com/matrix-org/matrix-react-sdk/pull/7190)).
|
||||
* Show room context details in forward dialog ([\#7162](https://github.com/matrix-org/matrix-react-sdk/pull/7162)). Fixes vector-im/element-web#19793.
|
||||
* Remove chevrons from RoomSummaryCard_Button ([\#7137](https://github.com/matrix-org/matrix-react-sdk/pull/7137)). Fixes vector-im/element-web#19644.
|
||||
* Disable op/deop commands where user has no permissions ([\#7161](https://github.com/matrix-org/matrix-react-sdk/pull/7161)). Fixes vector-im/element-web#15390.
|
||||
* Add option to change the size of images/videos in the timeline ([\#7017](https://github.com/matrix-org/matrix-react-sdk/pull/7017)). Fixes vector-im/element-meta#49 vector-im/element-web#1520 and vector-im/element-web#19498.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Fix left panel glow in Safari ([\#7236](https://github.com/matrix-org/matrix-react-sdk/pull/7236)). Fixes vector-im/element-web#19863.
|
||||
* Fix newline on edit messages with quotes ([\#7227](https://github.com/matrix-org/matrix-react-sdk/pull/7227)). Fixes vector-im/element-web#12535. Contributed by @renancleyson-dev.
|
||||
* Guard against null refs in findSiblingElement ([\#7228](https://github.com/matrix-org/matrix-react-sdk/pull/7228)).
|
||||
* Tweak bottom of space panel buttons in expanded state ([\#7213](https://github.com/matrix-org/matrix-react-sdk/pull/7213)). Fixes vector-im/element-web#19921.
|
||||
* Fix multiline paragraph rendering as single line ([\#7210](https://github.com/matrix-org/matrix-react-sdk/pull/7210)). Fixes vector-im/element-web#8786. Contributed by @renancleyson-dev.
|
||||
* Improve room list message previews ([\#7224](https://github.com/matrix-org/matrix-react-sdk/pull/7224)). Fixes vector-im/element-web#17101 and vector-im/element-web#16169.
|
||||
* Fix EmojiPicker lazy loaded rendering bug ([\#7225](https://github.com/matrix-org/matrix-react-sdk/pull/7225)). Fixes vector-im/element-web#15341.
|
||||
* Prevent default avatar in UserInfo having pointer cursor ([\#7218](https://github.com/matrix-org/matrix-react-sdk/pull/7218)). Fixes vector-im/element-web#13872.
|
||||
* Prevent duplicate avatars in Event List Summaries ([\#7222](https://github.com/matrix-org/matrix-react-sdk/pull/7222)). Fixes vector-im/element-web#17706.
|
||||
* Respect the home page as a context for the Home space ([\#7216](https://github.com/matrix-org/matrix-react-sdk/pull/7216)). Fixes vector-im/element-web#19554.
|
||||
* Fix RoomUpgradeWarningBar exploding ([\#7214](https://github.com/matrix-org/matrix-react-sdk/pull/7214)). Fixes vector-im/element-web#19920.
|
||||
* Polish threads misalignments and UI diversion ([\#7209](https://github.com/matrix-org/matrix-react-sdk/pull/7209)). Fixes vector-im/element-web#19772, vector-im/element-web#19710 vector-im/element-web#19629 and vector-im/element-web#19711.
|
||||
* Fix Manage Restricted Join Rule Dialog for Spaces ([\#7208](https://github.com/matrix-org/matrix-react-sdk/pull/7208)). Fixes vector-im/element-web#19610.
|
||||
* Fix wrongly showing unpin in pinned messages tile with no perms ([\#7197](https://github.com/matrix-org/matrix-react-sdk/pull/7197)). Fixes vector-im/element-web#19886.
|
||||
* Make image size constrained by height when using the ImageSize.Large option ([\#7171](https://github.com/matrix-org/matrix-react-sdk/pull/7171)). Fixes vector-im/element-web#19788.
|
||||
* Prevent programmatic scrolling within truncated room sublists ([\#7191](https://github.com/matrix-org/matrix-react-sdk/pull/7191)).
|
||||
* Remove leading slash from /addwidget Jitsi confs ([\#7175](https://github.com/matrix-org/matrix-react-sdk/pull/7175)). Fixes vector-im/element-web#19839. Contributed by @AndrewFerr.
|
||||
* Fix automatic composer focus, regressed by threads work ([\#7167](https://github.com/matrix-org/matrix-react-sdk/pull/7167)). Fixes vector-im/element-web#19479.
|
||||
* Show space members when not invited even if summary didn't fail ([\#7153](https://github.com/matrix-org/matrix-react-sdk/pull/7153)). Fixes vector-im/element-web#19781.
|
||||
* Prevent custom power levels from breaking roles & permissions tab ([\#7160](https://github.com/matrix-org/matrix-react-sdk/pull/7160)). Fixes vector-im/element-web#19812.
|
||||
* Room Context Menu should respond to tag changes ([\#7154](https://github.com/matrix-org/matrix-react-sdk/pull/7154)). Fixes vector-im/element-web#19776.
|
||||
* Fix an edge case when trying to join an upgraded room ([\#7159](https://github.com/matrix-org/matrix-react-sdk/pull/7159)).
|
||||
|
||||
Changes in [3.36.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.36.0-rc.1) (2021-11-30)
|
||||
===============================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Add unread indicator to the timelineCard header icon ([\#7156](https://github.com/matrix-org/matrix-react-sdk/pull/7156)). Fixes vector-im/element-web#19635.
|
||||
* Only show core navigation elements (call/chat/notification/info) when a widget is maximised ([\#7114](https://github.com/matrix-org/matrix-react-sdk/pull/7114)). Fixes vector-im/element-web#19632.
|
||||
* Improve ThreadPanel ctx menu accessibility ([\#7217](https://github.com/matrix-org/matrix-react-sdk/pull/7217)). Fixes vector-im/element-web#19885.
|
||||
* Allow filtering room list during treeview navigation ([\#7219](https://github.com/matrix-org/matrix-react-sdk/pull/7219)). Fixes vector-im/element-web#14702.
|
||||
* Add right panel chat timeline ([\#7112](https://github.com/matrix-org/matrix-react-sdk/pull/7112)). Fixes vector-im/element-web#19633.
|
||||
* Hide server options hint when disable_custom_urls is true ([\#7215](https://github.com/matrix-org/matrix-react-sdk/pull/7215)). Fixes vector-im/element-web#19919.
|
||||
* Improve right panel resize handle usability ([\#7204](https://github.com/matrix-org/matrix-react-sdk/pull/7204)). Fixes vector-im/element-web#15145. Contributed by @weeman1337.
|
||||
* Spaces quick settings ([\#7196](https://github.com/matrix-org/matrix-react-sdk/pull/7196)).
|
||||
* Maximised widgets always force a call to be shown in PIP mode ([\#7163](https://github.com/matrix-org/matrix-react-sdk/pull/7163)). Fixes vector-im/element-web#19637.
|
||||
* Group Labs flags ([\#7190](https://github.com/matrix-org/matrix-react-sdk/pull/7190)).
|
||||
* Show room context details in forward dialog ([\#7162](https://github.com/matrix-org/matrix-react-sdk/pull/7162)). Fixes vector-im/element-web#19793.
|
||||
* Remove chevrons from RoomSummaryCard_Button ([\#7137](https://github.com/matrix-org/matrix-react-sdk/pull/7137)). Fixes vector-im/element-web#19644.
|
||||
* Disable op/deop commands where user has no permissions ([\#7161](https://github.com/matrix-org/matrix-react-sdk/pull/7161)). Fixes vector-im/element-web#15390.
|
||||
* Add option to change the size of images/videos in the timeline ([\#7017](https://github.com/matrix-org/matrix-react-sdk/pull/7017)). Fixes vector-im/element-meta#49 vector-im/element-web#1520 and vector-im/element-web#19498.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Fix left panel glow in Safari ([\#7236](https://github.com/matrix-org/matrix-react-sdk/pull/7236)). Fixes vector-im/element-web#19863.
|
||||
* Fix newline on edit messages with quotes ([\#7227](https://github.com/matrix-org/matrix-react-sdk/pull/7227)). Fixes vector-im/element-web#12535. Contributed by @renancleyson-dev.
|
||||
* Guard against null refs in findSiblingElement ([\#7228](https://github.com/matrix-org/matrix-react-sdk/pull/7228)).
|
||||
* Tweak bottom of space panel buttons in expanded state ([\#7213](https://github.com/matrix-org/matrix-react-sdk/pull/7213)). Fixes vector-im/element-web#19921.
|
||||
* Fix multiline paragraph rendering as single line ([\#7210](https://github.com/matrix-org/matrix-react-sdk/pull/7210)). Fixes vector-im/element-web#8786. Contributed by @renancleyson-dev.
|
||||
* Improve room list message previews ([\#7224](https://github.com/matrix-org/matrix-react-sdk/pull/7224)). Fixes vector-im/element-web#17101 and vector-im/element-web#16169.
|
||||
* Fix EmojiPicker lazy loaded rendering bug ([\#7225](https://github.com/matrix-org/matrix-react-sdk/pull/7225)). Fixes vector-im/element-web#15341.
|
||||
* Prevent default avatar in UserInfo having pointer cursor ([\#7218](https://github.com/matrix-org/matrix-react-sdk/pull/7218)). Fixes vector-im/element-web#13872.
|
||||
* Prevent duplicate avatars in Event List Summaries ([\#7222](https://github.com/matrix-org/matrix-react-sdk/pull/7222)). Fixes vector-im/element-web#17706.
|
||||
* Respect the home page as a context for the Home space ([\#7216](https://github.com/matrix-org/matrix-react-sdk/pull/7216)). Fixes vector-im/element-web#19554.
|
||||
* Fix RoomUpgradeWarningBar exploding ([\#7214](https://github.com/matrix-org/matrix-react-sdk/pull/7214)). Fixes vector-im/element-web#19920.
|
||||
* Polish threads misalignments and UI diversion ([\#7209](https://github.com/matrix-org/matrix-react-sdk/pull/7209)). Fixes vector-im/element-web#19772, vector-im/element-web#19710 vector-im/element-web#19629 and vector-im/element-web#19711.
|
||||
* Fix Manage Restricted Join Rule Dialog for Spaces ([\#7208](https://github.com/matrix-org/matrix-react-sdk/pull/7208)). Fixes vector-im/element-web#19610.
|
||||
* Fix wrongly showing unpin in pinned messages tile with no perms ([\#7197](https://github.com/matrix-org/matrix-react-sdk/pull/7197)). Fixes vector-im/element-web#19886.
|
||||
* Make image size constrained by height when using the ImageSize.Large option ([\#7171](https://github.com/matrix-org/matrix-react-sdk/pull/7171)). Fixes vector-im/element-web#19788.
|
||||
* Prevent programmatic scrolling within truncated room sublists ([\#7191](https://github.com/matrix-org/matrix-react-sdk/pull/7191)).
|
||||
* Remove leading slash from /addwidget Jitsi confs ([\#7175](https://github.com/matrix-org/matrix-react-sdk/pull/7175)). Fixes vector-im/element-web#19839. Contributed by @AndrewFerr.
|
||||
* Fix automatic composer focus, regressed by threads work ([\#7167](https://github.com/matrix-org/matrix-react-sdk/pull/7167)). Fixes vector-im/element-web#19479.
|
||||
* Show space members when not invited even if summary didn't fail ([\#7153](https://github.com/matrix-org/matrix-react-sdk/pull/7153)). Fixes vector-im/element-web#19781.
|
||||
* Prevent custom power levels from breaking roles & permissions tab ([\#7160](https://github.com/matrix-org/matrix-react-sdk/pull/7160)). Fixes vector-im/element-web#19812.
|
||||
* Room Context Menu should respond to tag changes ([\#7154](https://github.com/matrix-org/matrix-react-sdk/pull/7154)). Fixes vector-im/element-web#19776.
|
||||
* Fix an edge case when trying to join an upgraded room ([\#7159](https://github.com/matrix-org/matrix-react-sdk/pull/7159)).
|
||||
|
||||
Changes in [3.35.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.1) (2021-11-22)
|
||||
=====================================================================================================
|
||||
|
||||
* Fixes the v3.35.0 release which failed to build correctly due to
|
||||
a missing change updating types following a types update in js-sdk.
|
||||
|
||||
Changes in [3.35.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.0) (2021-11-22)
|
||||
=====================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Make double-clicking the PiP take you to the call room ([\#7142](https://github.com/matrix-org/matrix-react-sdk/pull/7142)). Fixes vector-im/element-web#18421 vector-im/element-web#15920 and vector-im/element-web#18421. Contributed by @SimonBrandner.
|
||||
* Add maximise widget functionality ([\#7098](https://github.com/matrix-org/matrix-react-sdk/pull/7098)). Fixes vector-im/element-web#19619, vector-im/element-web#19621 vector-im/element-web#19760 and vector-im/element-web#19619.
|
||||
* Add rainfall effect ([\#7086](https://github.com/matrix-org/matrix-react-sdk/pull/7086)). Contributed by @justjosias.
|
||||
* Add root folder to zip file created by export chat feature ([\#7097](https://github.com/matrix-org/matrix-react-sdk/pull/7097)). Fixes vector-im/element-web#19653 and vector-im/element-web#19653. Contributed by @aaronraimist.
|
||||
* Improve VoIP UI/UX ([\#7048](https://github.com/matrix-org/matrix-react-sdk/pull/7048)). Fixes vector-im/element-web#19513 and vector-im/element-web#19513. Contributed by @SimonBrandner.
|
||||
* Unified room context menus ([\#7072](https://github.com/matrix-org/matrix-react-sdk/pull/7072)). Fixes vector-im/element-web#19527 and vector-im/element-web#19527.
|
||||
* In forgot password screen, show validation errors inline in the form, instead of in modals ([\#7113](https://github.com/matrix-org/matrix-react-sdk/pull/7113)). Contributed by @psrpinto.
|
||||
* Implement more meta-spaces ([\#7077](https://github.com/matrix-org/matrix-react-sdk/pull/7077)). Fixes vector-im/element-web#18634 vector-im/element-web#17295 and vector-im/element-web#18634.
|
||||
* Expose power level control for m.space.child ([\#7120](https://github.com/matrix-org/matrix-react-sdk/pull/7120)).
|
||||
* Forget member-list query when switching out of a room ([\#7093](https://github.com/matrix-org/matrix-react-sdk/pull/7093)). Fixes vector-im/element-web#19432 and vector-im/element-web#19432. Contributed by @SimonBrandner.
|
||||
* Do pre-submit availability check on username during registration ([\#6978](https://github.com/matrix-org/matrix-react-sdk/pull/6978)). Fixes vector-im/element-web#9545 and vector-im/element-web#9545.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Adjust recovery key button sizes depending on text width ([\#7134](https://github.com/matrix-org/matrix-react-sdk/pull/7134)). Fixes vector-im/element-web#19511 and vector-im/element-web#19511. Contributed by @weeman1337.
|
||||
* Fix bulk invite button getting a negative count ([\#7122](https://github.com/matrix-org/matrix-react-sdk/pull/7122)). Fixes vector-im/element-web#19466 and vector-im/element-web#19466. Contributed by @renancleyson-dev.
|
||||
* Fix maximised / pinned widget state being loaded correctly ([\#7146](https://github.com/matrix-org/matrix-react-sdk/pull/7146)). Fixes vector-im/element-web#19768 and vector-im/element-web#19768.
|
||||
* Don't reload the page when user hits enter when entering ban reason ([\#7145](https://github.com/matrix-org/matrix-react-sdk/pull/7145)). Fixes vector-im/element-web#19763 and vector-im/element-web#19763.
|
||||
* Fix timeline text when sharing room layout ([\#7140](https://github.com/matrix-org/matrix-react-sdk/pull/7140)). Fixes vector-im/element-web#19622 and vector-im/element-web#19622.
|
||||
* Fix look of emoji verification ([\#7133](https://github.com/matrix-org/matrix-react-sdk/pull/7133)). Fixes vector-im/element-web#19740 and vector-im/element-web#19740. Contributed by @SimonBrandner.
|
||||
* Fixes element not remembering widget hidden state per room ([\#7136](https://github.com/matrix-org/matrix-react-sdk/pull/7136)). Fixes vector-im/element-web#16672, matrix-org/element-web-rageshakes#4407, vector-im/element-web#15718 vector-im/element-web#15768 and vector-im/element-web#16672.
|
||||
* Don't keep spinning if joining space child failed ([\#7129](https://github.com/matrix-org/matrix-react-sdk/pull/7129)). Fixes matrix-org/element-web-rageshakes#6813 and matrix-org/element-web-rageshakes#6813.
|
||||
* Guard around SpaceStore onAccountData handler prevEvent ([\#7123](https://github.com/matrix-org/matrix-react-sdk/pull/7123)). Fixes vector-im/element-web#19705 and vector-im/element-web#19705.
|
||||
* Fix missing spaces in threads copy ([\#7119](https://github.com/matrix-org/matrix-react-sdk/pull/7119)). Fixes vector-im/element-web#19702 and vector-im/element-web#19702.
|
||||
* Fix hover tile border ([\#7117](https://github.com/matrix-org/matrix-react-sdk/pull/7117)). Fixes vector-im/element-web#19698 and vector-im/element-web#19698. Contributed by @SimonBrandner.
|
||||
* Fix quote button ([\#7096](https://github.com/matrix-org/matrix-react-sdk/pull/7096)). Fixes vector-im/element-web#19659 and vector-im/element-web#19659. Contributed by @SimonBrandner.
|
||||
* Fix space panel layout edge cases ([\#7101](https://github.com/matrix-org/matrix-react-sdk/pull/7101)). Fixes vector-im/element-web#19668 and vector-im/element-web#19668.
|
||||
* Update powerlevel/role when the user changes in the user info panel ([\#7099](https://github.com/matrix-org/matrix-react-sdk/pull/7099)). Fixes vector-im/element-web#19666 and vector-im/element-web#19666. Contributed by @SimonBrandner.
|
||||
* Fix avatar disappearing when setting a room topic ([\#7092](https://github.com/matrix-org/matrix-react-sdk/pull/7092)). Fixes vector-im/element-web#19226 and vector-im/element-web#19226. Contributed by @SimonBrandner.
|
||||
* Fix possible infinite loop on widget start ([\#7071](https://github.com/matrix-org/matrix-react-sdk/pull/7071)). Fixes vector-im/element-web#15494 and vector-im/element-web#15494.
|
||||
* Use device IDs for nameless devices in device list ([\#7081](https://github.com/matrix-org/matrix-react-sdk/pull/7081)). Fixes vector-im/element-web#19608 and vector-im/element-web#19608.
|
||||
* Don't re-sort rooms on no-op RoomUpdateCause.PossibleTagChange ([\#7053](https://github.com/matrix-org/matrix-react-sdk/pull/7053)). Contributed by @bradtgmurray.
|
||||
|
||||
Changes in [3.35.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.0-rc.1) (2021-11-17)
|
||||
===============================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Make double-clicking the PiP take you to the call room ([\#7142](https://github.com/matrix-org/matrix-react-sdk/pull/7142)). Fixes vector-im/element-web#18421 vector-im/element-web#15920 and vector-im/element-web#18421. Contributed by @SimonBrandner.
|
||||
* Add maximise widget functionality ([\#7098](https://github.com/matrix-org/matrix-react-sdk/pull/7098)). Fixes vector-im/element-web#19619, vector-im/element-web#19621 vector-im/element-web#19760 and vector-im/element-web#19619.
|
||||
* Add rainfall effect ([\#7086](https://github.com/matrix-org/matrix-react-sdk/pull/7086)). Contributed by @justjosias.
|
||||
* Add root folder to zip file created by export chat feature ([\#7097](https://github.com/matrix-org/matrix-react-sdk/pull/7097)). Fixes vector-im/element-web#19653 and vector-im/element-web#19653. Contributed by @aaronraimist.
|
||||
* Improve VoIP UI/UX ([\#7048](https://github.com/matrix-org/matrix-react-sdk/pull/7048)). Fixes vector-im/element-web#19513 and vector-im/element-web#19513. Contributed by @SimonBrandner.
|
||||
* Unified room context menus ([\#7072](https://github.com/matrix-org/matrix-react-sdk/pull/7072)). Fixes vector-im/element-web#19527 and vector-im/element-web#19527.
|
||||
* In forgot password screen, show validation errors inline in the form, instead of in modals ([\#7113](https://github.com/matrix-org/matrix-react-sdk/pull/7113)). Contributed by @psrpinto.
|
||||
* Implement more meta-spaces ([\#7077](https://github.com/matrix-org/matrix-react-sdk/pull/7077)). Fixes vector-im/element-web#18634 vector-im/element-web#17295 and vector-im/element-web#18634.
|
||||
* Expose power level control for m.space.child ([\#7120](https://github.com/matrix-org/matrix-react-sdk/pull/7120)).
|
||||
* Forget member-list query when switching out of a room ([\#7093](https://github.com/matrix-org/matrix-react-sdk/pull/7093)). Fixes vector-im/element-web#19432 and vector-im/element-web#19432. Contributed by @SimonBrandner.
|
||||
* Do pre-submit availability check on username during registration ([\#6978](https://github.com/matrix-org/matrix-react-sdk/pull/6978)). Fixes vector-im/element-web#9545 and vector-im/element-web#9545.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Adjust recovery key button sizes depending on text width ([\#7134](https://github.com/matrix-org/matrix-react-sdk/pull/7134)). Fixes vector-im/element-web#19511 and vector-im/element-web#19511. Contributed by @weeman1337.
|
||||
* Fix bulk invite button getting a negative count ([\#7122](https://github.com/matrix-org/matrix-react-sdk/pull/7122)). Fixes vector-im/element-web#19466 and vector-im/element-web#19466. Contributed by @renancleyson-dev.
|
||||
* Fix maximised / pinned widget state being loaded correctly ([\#7146](https://github.com/matrix-org/matrix-react-sdk/pull/7146)). Fixes vector-im/element-web#19768 and vector-im/element-web#19768.
|
||||
* Don't reload the page when user hits enter when entering ban reason ([\#7145](https://github.com/matrix-org/matrix-react-sdk/pull/7145)). Fixes vector-im/element-web#19763 and vector-im/element-web#19763.
|
||||
* Fix timeline text when sharing room layout ([\#7140](https://github.com/matrix-org/matrix-react-sdk/pull/7140)). Fixes vector-im/element-web#19622 and vector-im/element-web#19622.
|
||||
* Fix look of emoji verification ([\#7133](https://github.com/matrix-org/matrix-react-sdk/pull/7133)). Fixes vector-im/element-web#19740 and vector-im/element-web#19740. Contributed by @SimonBrandner.
|
||||
* Fixes element not remembering widget hidden state per room ([\#7136](https://github.com/matrix-org/matrix-react-sdk/pull/7136)). Fixes vector-im/element-web#16672, matrix-org/element-web-rageshakes#4407, vector-im/element-web#15718 vector-im/element-web#15768 and vector-im/element-web#16672.
|
||||
* Don't keep spinning if joining space child failed ([\#7129](https://github.com/matrix-org/matrix-react-sdk/pull/7129)). Fixes matrix-org/element-web-rageshakes#6813 and matrix-org/element-web-rageshakes#6813.
|
||||
* Guard around SpaceStore onAccountData handler prevEvent ([\#7123](https://github.com/matrix-org/matrix-react-sdk/pull/7123)). Fixes vector-im/element-web#19705 and vector-im/element-web#19705.
|
||||
* Fix missing spaces in threads copy ([\#7119](https://github.com/matrix-org/matrix-react-sdk/pull/7119)). Fixes vector-im/element-web#19702 and vector-im/element-web#19702.
|
||||
* Fix hover tile border ([\#7117](https://github.com/matrix-org/matrix-react-sdk/pull/7117)). Fixes vector-im/element-web#19698 and vector-im/element-web#19698. Contributed by @SimonBrandner.
|
||||
* Fix quote button ([\#7096](https://github.com/matrix-org/matrix-react-sdk/pull/7096)). Fixes vector-im/element-web#19659 and vector-im/element-web#19659. Contributed by @SimonBrandner.
|
||||
* Fix space panel layout edge cases ([\#7101](https://github.com/matrix-org/matrix-react-sdk/pull/7101)). Fixes vector-im/element-web#19668 and vector-im/element-web#19668.
|
||||
* Update powerlevel/role when the user changes in the user info panel ([\#7099](https://github.com/matrix-org/matrix-react-sdk/pull/7099)). Fixes vector-im/element-web#19666 and vector-im/element-web#19666. Contributed by @SimonBrandner.
|
||||
* Fix avatar disappearing when setting a room topic ([\#7092](https://github.com/matrix-org/matrix-react-sdk/pull/7092)). Fixes vector-im/element-web#19226 and vector-im/element-web#19226. Contributed by @SimonBrandner.
|
||||
* Fix possible infinite loop on widget start ([\#7071](https://github.com/matrix-org/matrix-react-sdk/pull/7071)). Fixes vector-im/element-web#15494 and vector-im/element-web#15494.
|
||||
* Use device IDs for nameless devices in device list ([\#7081](https://github.com/matrix-org/matrix-react-sdk/pull/7081)). Fixes vector-im/element-web#19608 and vector-im/element-web#19608.
|
||||
* Don't re-sort rooms on no-op RoomUpdateCause.PossibleTagChange ([\#7053](https://github.com/matrix-org/matrix-react-sdk/pull/7053)). Contributed by @bradtgmurray.
|
||||
|
||||
Changes in [3.34.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.34.0) (2021-11-08)
|
||||
=====================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Improve the look of tooltips ([\#7049](https://github.com/matrix-org/matrix-react-sdk/pull/7049)). Contributed by @SimonBrandner.
|
||||
* Improve the look of the spinner ([\#6083](https://github.com/matrix-org/matrix-react-sdk/pull/6083)). Contributed by @SimonBrandner.
|
||||
* Polls: Creation form & start event ([\#7001](https://github.com/matrix-org/matrix-react-sdk/pull/7001)).
|
||||
* Show a gray shield when encrypted by deleted session ([\#6119](https://github.com/matrix-org/matrix-react-sdk/pull/6119)). Contributed by @SimonBrandner.
|
||||
* Silence some widgets for better screen reader presentation. ([\#7057](https://github.com/matrix-org/matrix-react-sdk/pull/7057)). Contributed by @ndarilek.
|
||||
* Make message separator more accessible. ([\#7056](https://github.com/matrix-org/matrix-react-sdk/pull/7056)). Contributed by @ndarilek.
|
||||
* Give each room directory entry the `listitem` role to correspond with the containing `list`. ([\#7035](https://github.com/matrix-org/matrix-react-sdk/pull/7035)). Contributed by @ndarilek.
|
||||
* Implement RequiresClient capability for widgets ([\#7005](https://github.com/matrix-org/matrix-react-sdk/pull/7005)). Fixes vector-im/element-web#15744 and vector-im/element-web#15744.
|
||||
* Respect the system high contrast setting when using system theme ([\#7043](https://github.com/matrix-org/matrix-react-sdk/pull/7043)).
|
||||
* Remove redundant duplicate mimetype field which doesn't conform to spec ([\#7045](https://github.com/matrix-org/matrix-react-sdk/pull/7045)). Fixes vector-im/element-web#17145 and vector-im/element-web#17145.
|
||||
* Make join button on space hierarchy action in the background ([\#7041](https://github.com/matrix-org/matrix-react-sdk/pull/7041)). Fixes vector-im/element-web#17388 and vector-im/element-web#17388.
|
||||
* Add a high contrast theme (a variant of the light theme) ([\#7036](https://github.com/matrix-org/matrix-react-sdk/pull/7036)).
|
||||
* Improve timeline message for restricted join rule changes ([\#6984](https://github.com/matrix-org/matrix-react-sdk/pull/6984)). Fixes vector-im/element-web#18980 and vector-im/element-web#18980.
|
||||
* Improve the appearance of the font size slider ([\#7038](https://github.com/matrix-org/matrix-react-sdk/pull/7038)).
|
||||
* Improve RovingTabIndex & Room List filtering performance ([\#6987](https://github.com/matrix-org/matrix-react-sdk/pull/6987)). Fixes vector-im/element-web#17864 and vector-im/element-web#17864.
|
||||
* Remove outdated Spaces restricted rooms warning ([\#6927](https://github.com/matrix-org/matrix-react-sdk/pull/6927)).
|
||||
* Make /msg <message> param optional for more flexibility ([\#7028](https://github.com/matrix-org/matrix-react-sdk/pull/7028)). Fixes vector-im/element-web#19481 and vector-im/element-web#19481.
|
||||
* Add decoration to space hierarchy for tiles which have already been j… ([\#6969](https://github.com/matrix-org/matrix-react-sdk/pull/6969)). Fixes vector-im/element-web#18755 and vector-im/element-web#18755.
|
||||
* Add insert link button to the format bar ([\#5879](https://github.com/matrix-org/matrix-react-sdk/pull/5879)). Contributed by @SimonBrandner.
|
||||
* Improve visibility of font size chooser ([\#6988](https://github.com/matrix-org/matrix-react-sdk/pull/6988)).
|
||||
* Soften border-radius on selected/hovered messages ([\#6525](https://github.com/matrix-org/matrix-react-sdk/pull/6525)). Fixes vector-im/element-web#18108. Contributed by @SimonBrandner.
|
||||
* Add a developer mode flag and use it for accessing space timelines ([\#6994](https://github.com/matrix-org/matrix-react-sdk/pull/6994)). Fixes vector-im/element-web#19416 and vector-im/element-web#19416.
|
||||
* Position toggle switch more clearly ([\#6914](https://github.com/matrix-org/matrix-react-sdk/pull/6914)). Contributed by @CicadaCinema.
|
||||
* Validate email address in forgot password dialog ([\#6983](https://github.com/matrix-org/matrix-react-sdk/pull/6983)). Fixes vector-im/element-web#9978 and vector-im/element-web#9978. Contributed by @psrpinto.
|
||||
* Handle and i18n M_THREEPID_IN_USE during registration ([\#6986](https://github.com/matrix-org/matrix-react-sdk/pull/6986)). Fixes vector-im/element-web#13767 and vector-im/element-web#13767.
|
||||
* For space invite previews, use room summary API to get the right member count ([\#6982](https://github.com/matrix-org/matrix-react-sdk/pull/6982)). Fixes vector-im/element-web#19123 and vector-im/element-web#19123.
|
||||
* Simplify Space Panel notification badge layout ([\#6977](https://github.com/matrix-org/matrix-react-sdk/pull/6977)). Fixes vector-im/element-web#18527 and vector-im/element-web#18527.
|
||||
* Use prettier hsName during 3pid registration where possible ([\#6980](https://github.com/matrix-org/matrix-react-sdk/pull/6980)). Fixes vector-im/element-web#19162 and vector-im/element-web#19162.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Add a condition to only activate the resizer which belongs to the clicked handle ([\#7055](https://github.com/matrix-org/matrix-react-sdk/pull/7055)). Fixes vector-im/element-web#19521 and vector-im/element-web#19521.
|
||||
* Restore composer focus after event edit ([\#7065](https://github.com/matrix-org/matrix-react-sdk/pull/7065)). Fixes vector-im/element-web#19469 and vector-im/element-web#19469.
|
||||
* Don't apply message bubble visual style to media messages ([\#7040](https://github.com/matrix-org/matrix-react-sdk/pull/7040)).
|
||||
* Handle no selected screen when screen-sharing ([\#7018](https://github.com/matrix-org/matrix-react-sdk/pull/7018)). Fixes vector-im/element-web#19460 and vector-im/element-web#19460. Contributed by @SimonBrandner.
|
||||
* Add history entry before completing emoji ([\#7007](https://github.com/matrix-org/matrix-react-sdk/pull/7007)). Fixes vector-im/element-web#19177 and vector-im/element-web#19177. Contributed by @RafaelGoncalves8.
|
||||
* Add padding between controls on edit form in message bubbles ([\#7039](https://github.com/matrix-org/matrix-react-sdk/pull/7039)).
|
||||
* Respect the roomState right container request for the Jitsi widget ([\#7033](https://github.com/matrix-org/matrix-react-sdk/pull/7033)). Fixes vector-im/element-web#16552 and vector-im/element-web#16552.
|
||||
* Fix cannot read length of undefined for room upgrades ([\#7037](https://github.com/matrix-org/matrix-react-sdk/pull/7037)). Fixes vector-im/element-web#19509 and vector-im/element-web#19509.
|
||||
* Cleanup re-dispatching around timelines and composers ([\#7023](https://github.com/matrix-org/matrix-react-sdk/pull/7023)). Fixes vector-im/element-web#19491 and vector-im/element-web#19491. Contributed by @SimonBrandner.
|
||||
* Fix removing a room from a Space and interaction with `m.space.parent` ([\#6944](https://github.com/matrix-org/matrix-react-sdk/pull/6944)). Fixes vector-im/element-web#19363 and vector-im/element-web#19363.
|
||||
* Fix recent css regression ([\#7022](https://github.com/matrix-org/matrix-react-sdk/pull/7022)). Fixes vector-im/element-web#19470 and vector-im/element-web#19470. Contributed by @CicadaCinema.
|
||||
* Fix ModalManager reRender racing with itself ([\#7027](https://github.com/matrix-org/matrix-react-sdk/pull/7027)). Fixes vector-im/element-web#19489 and vector-im/element-web#19489.
|
||||
* Fix fullscreening a call while connecting ([\#7019](https://github.com/matrix-org/matrix-react-sdk/pull/7019)). Fixes vector-im/element-web#19309 and vector-im/element-web#19309. Contributed by @SimonBrandner.
|
||||
* Allow scrolling right in reply-quoted code block ([\#7024](https://github.com/matrix-org/matrix-react-sdk/pull/7024)). Fixes vector-im/element-web#19487 and vector-im/element-web#19487. Contributed by @SimonBrandner.
|
||||
* Fix dark theme codeblock colors ([\#6384](https://github.com/matrix-org/matrix-react-sdk/pull/6384)). Fixes vector-im/element-web#17998. Contributed by @SimonBrandner.
|
||||
* Show passphrase input label ([\#6992](https://github.com/matrix-org/matrix-react-sdk/pull/6992)). Fixes vector-im/element-web#19428 and vector-im/element-web#19428. Contributed by @RafaelGoncalves8.
|
||||
* Always render disabled settings as disabled ([\#7014](https://github.com/matrix-org/matrix-react-sdk/pull/7014)).
|
||||
* Make "Security Phrase" placeholder look consistent cross-browser ([\#6870](https://github.com/matrix-org/matrix-react-sdk/pull/6870)). Fixes vector-im/element-web#19006 and vector-im/element-web#19006. Contributed by @neer17.
|
||||
* Fix direction override characters breaking member event text direction ([\#6999](https://github.com/matrix-org/matrix-react-sdk/pull/6999)).
|
||||
* Remove redundant text in verification dialogs ([\#6993](https://github.com/matrix-org/matrix-react-sdk/pull/6993)). Fixes vector-im/element-web#19290 and vector-im/element-web#19290. Contributed by @RafaelGoncalves8.
|
||||
* Fix space panel name overflowing ([\#6995](https://github.com/matrix-org/matrix-react-sdk/pull/6995)). Fixes vector-im/element-web#19455 and vector-im/element-web#19455.
|
||||
* Fix conflicting CSS on syntax highlighted blocks ([\#6991](https://github.com/matrix-org/matrix-react-sdk/pull/6991)). Fixes vector-im/element-web#19445 and vector-im/element-web#19445.
|
||||
|
||||
Changes in [3.33.0](https://github.com/vector-im/element-desktop/releases/tag/v3.33.0) (2021-10-25)
|
||||
===================================================================================================
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ a 'skin'. A skin provides:
|
||||
* The containing application
|
||||
* Zero or more 'modules' containing non-UI functionality
|
||||
|
||||
As of Aug 2018, the only skin that exists is `vector-im/element-web`; it and
|
||||
As of Aug 2018, the only skin that exists is [`vector-im/element-web`](https://github.com/vector-im/element-web/); it and
|
||||
`matrix-org/matrix-react-sdk` should effectively
|
||||
be considered as a single project (for instance, matrix-react-sdk bugs
|
||||
are currently filed against vector-im/element-web rather than this project).
|
||||
@ -138,7 +138,7 @@ guide](https://classic.yarnpkg.com/docs/install) if you do not have it
|
||||
already. This project has not yet been migrated to Yarn 2, so please ensure
|
||||
`yarn --version` shows a version from the 1.x series.
|
||||
|
||||
`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
|
||||
`matrix-react-sdk` depends on [`matrix-js-sdk`](https://github.com/matrix-org/matrix-js-sdk). To make use of changes in the
|
||||
latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
|
||||
you should set up `matrix-js-sdk`:
|
||||
|
||||
@ -158,6 +158,9 @@ cd matrix-react-sdk
|
||||
git checkout develop
|
||||
yarn link matrix-js-sdk
|
||||
yarn install
|
||||
|
||||
# Generate the `component-index.js` file.
|
||||
yarn reskindex
|
||||
```
|
||||
|
||||
See the [help for `yarn link`](https://classic.yarnpkg.com/docs/cli/link) for
|
||||
@ -175,4 +178,4 @@ yarn test
|
||||
## End-to-End tests
|
||||
|
||||
Make sure you've got your Element development server running (by doing `yarn start` in element-web), and then in this project, run `yarn run e2etests`.
|
||||
See `test/end-to-end-tests/README.md` for more information.
|
||||
See [`test/end-to-end-tests/README.md`](https://github.com/matrix-org/matrix-react-sdk/blob/develop/test/end-to-end-tests/README.md) for more information.
|
||||
|
||||
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "3.33.0",
|
||||
"version": "3.36.0",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
@ -57,6 +57,7 @@
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@sentry/browser": "^6.11.0",
|
||||
"@sentry/tracing": "^6.11.0",
|
||||
"@types/geojson": "^7946.0.8",
|
||||
"await-lock": "^2.1.0",
|
||||
"blurhash": "^1.1.3",
|
||||
"browser-encrypt-attachment": "^0.3.0",
|
||||
@ -84,8 +85,10 @@
|
||||
"katex": "^0.12.0",
|
||||
"linkifyjs": "^2.1.9",
|
||||
"lodash": "^4.17.20",
|
||||
"maplibre-gl": "^1.15.2",
|
||||
"matrix-analytics-events": "https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"matrix-widget-api": "^0.1.0-beta.17",
|
||||
"matrix-widget-api": "^0.1.0-beta.18",
|
||||
"minimist": "^1.2.5",
|
||||
"opus-recorder": "^8.0.3",
|
||||
"pako": "^2.0.3",
|
||||
@ -155,7 +158,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^4.17.0",
|
||||
"@typescript-eslint/parser": "^4.17.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
|
||||
"allchange": "^1.0.4",
|
||||
"allchange": "^1.0.6",
|
||||
"babel-jest": "^26.6.3",
|
||||
"chokidar": "^3.5.1",
|
||||
"concurrently": "^5.3.0",
|
||||
@ -196,6 +199,7 @@
|
||||
"testMatch": [
|
||||
"<rootDir>/test/**/*-test.[jt]s?(x)"
|
||||
],
|
||||
"globalSetup": "<rootDir>/test/globalSetup.js",
|
||||
"setupFiles": [
|
||||
"jest-canvas-mock"
|
||||
],
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
Copyright 2017 New Vector Ltd
|
||||
Copyright 2017 - 2019 New Vector Ltd
|
||||
Copyright 2019 - 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.
|
||||
@ -19,6 +20,7 @@ limitations under the License.
|
||||
@import "./_font-sizes.scss";
|
||||
@import "./_font-weights.scss";
|
||||
@import "./_animations.scss";
|
||||
@import url("maplibre-gl/dist/maplibre-gl.css");
|
||||
|
||||
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
|
||||
|
||||
@ -30,6 +32,10 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess
|
||||
$slider-dot-size: 1em;
|
||||
$slider-selection-dot-size: 2.4em;
|
||||
|
||||
$container-border-width: 8px;
|
||||
$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values.
|
||||
|
||||
$timeline-image-border-radius: 8px;
|
||||
:root {
|
||||
font-size: 10px;
|
||||
|
||||
@ -74,11 +80,11 @@ pre, code {
|
||||
|
||||
.error, .warning,
|
||||
.text-error, .text-warning {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@ -102,7 +108,7 @@ h2 {
|
||||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $accent-color-alt;
|
||||
color: $accent-alt;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
@ -221,7 +227,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-lighter-fg-color;
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $input-lighter-bg-color;
|
||||
border: none;
|
||||
}
|
||||
@ -238,17 +244,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
//
|
||||
// They are not used for layout!!
|
||||
#mx_theme_accentColor {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
#mx_theme_secondaryAccentColor {
|
||||
color: $secondary-accent-color;
|
||||
}
|
||||
|
||||
#mx_theme_tertiaryAccentColor {
|
||||
color: $tertiary-accent-color;
|
||||
}
|
||||
|
||||
/* Expected z-indexes for dialogs:
|
||||
4000 - Default wrapper index
|
||||
4009 - Static dialog background
|
||||
@ -364,7 +366,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_Dialog_cancelButton {
|
||||
@ -404,49 +406,68 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
* We should go through and have one consistent set of styles for buttons throughout the app.
|
||||
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
|
||||
*/
|
||||
.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] {
|
||||
.mx_Dialog button:not(.mx_Dialog_nonDialogButton),
|
||||
.mx_Dialog input[type="submit"],
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton),
|
||||
.mx_Dialog_buttons input[type="submit"] {
|
||||
@mixin mx_DialogButton;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.mx_Dialog button:last-child {
|
||||
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover {
|
||||
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover,
|
||||
.mx_Dialog input[type="submit"]:hover,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover,
|
||||
.mx_Dialog_buttons input[type="submit"]:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus {
|
||||
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus,
|
||||
.mx_Dialog input[type="submit"]:focus,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus,
|
||||
.mx_Dialog_buttons input[type="submit"]:focus {
|
||||
filter: brightness($focus-brightness);
|
||||
}
|
||||
|
||||
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
|
||||
.mx_Dialog button.mx_Dialog_primary,
|
||||
.mx_Dialog input[type="submit"].mx_Dialog_primary,
|
||||
.mx_Dialog_buttons button.mx_Dialog_primary,
|
||||
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
min-width: 156px;
|
||||
}
|
||||
|
||||
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger {
|
||||
background-color: $warning-color;
|
||||
border: solid 1px $warning-color;
|
||||
.mx_Dialog button.danger,
|
||||
.mx_Dialog input[type="submit"].danger,
|
||||
.mx_Dialog_buttons button.danger,
|
||||
.mx_Dialog_buttons input[type="submit"].danger {
|
||||
background-color: $alert;
|
||||
border: solid 1px $alert;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning {
|
||||
border: solid 1px $warning-color;
|
||||
color: $warning-color;
|
||||
.mx_Dialog button.warning,
|
||||
.mx_Dialog input[type="submit"].warning {
|
||||
border: solid 1px $alert;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:disabled, .mx_Dialog_buttons input[type="submit"]:disabled {
|
||||
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled,
|
||||
.mx_Dialog input[type="submit"]:disabled,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled,
|
||||
.mx_Dialog_buttons input[type="submit"]:disabled {
|
||||
background-color: $light-fg-color;
|
||||
border: solid 1px $light-fg-color;
|
||||
opacity: 0.7;
|
||||
@ -464,6 +485,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
|
||||
max-width: 636px; // match splash image width
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Review mx_GeneralButton usage to see if it can use a different class
|
||||
// These classes were brought in from the old UserSettings and are included here to avoid
|
||||
// breaking the app.
|
||||
@ -480,7 +510,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
|
||||
.mx_linkButton {
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_TextInputDialog_label {
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
@import "./structures/_MyGroups.scss";
|
||||
@import "./structures/_NonUrgentToastContainer.scss";
|
||||
@import "./structures/_NotificationPanel.scss";
|
||||
@import "./structures/_QuickSettingsButton.scss";
|
||||
@import "./structures/_RightPanel.scss";
|
||||
@import "./structures/_RoomDirectory.scss";
|
||||
@import "./structures/_RoomSearch.scss";
|
||||
@ -59,21 +60,21 @@
|
||||
@import "./views/auth/_Welcome.scss";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/avatars/_WidgetAvatar.scss";
|
||||
@import "./views/beta/_BetaCard.scss";
|
||||
@import "./views/context_menus/_CallContextMenu.scss";
|
||||
@import "./views/context_menus/_IconizedContextMenu.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./views/context_menus/_StatusMessageContextMenu.scss";
|
||||
@import "./views/context_menus/_TagTileContextMenu.scss";
|
||||
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
|
||||
@import "./views/dialogs/_AddressPickerDialog.scss";
|
||||
@import "./views/dialogs/_Analytics.scss";
|
||||
@import "./views/dialogs/_AnalyticsLearnMoreDialog.scss";
|
||||
@import "./views/dialogs/_BugReportDialog.scss";
|
||||
@import "./views/dialogs/_ChangelogDialog.scss";
|
||||
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
|
||||
@import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
|
||||
@import "./views/dialogs/_CompoundDialog.scss";
|
||||
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
|
||||
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
|
||||
@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
|
||||
@ -99,6 +100,7 @@
|
||||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_ModalWidgetDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
@import "./views/dialogs/_PollCreateDialog.scss";
|
||||
@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
|
||||
@ -142,6 +144,7 @@
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
@import "./views/elements/_InfoTooltip.scss";
|
||||
@import "./views/elements/_InlineSpinner.scss";
|
||||
@import "./views/elements/_InteractiveTooltip.scss";
|
||||
@import "./views/elements/_InviteReason.scss";
|
||||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_MiniAvatarUploader.scss";
|
||||
@ -170,6 +173,7 @@
|
||||
@import "./views/groups/_GroupPublicityToggle.scss";
|
||||
@import "./views/groups/_GroupRoomList.scss";
|
||||
@import "./views/groups/_GroupUserSettings.scss";
|
||||
@import "./views/location/_LocationPicker.scss";
|
||||
@import "./views/messages/_CallEvent.scss";
|
||||
@import "./views/messages/_CreateEvent.scss";
|
||||
@import "./views/messages/_DateSeparator.scss";
|
||||
@ -179,7 +183,9 @@
|
||||
@import "./views/messages/_MImageBody.scss";
|
||||
@import "./views/messages/_MImageReplyBody.scss";
|
||||
@import "./views/messages/_MJitsiWidgetEvent.scss";
|
||||
@import "./views/messages/_MLocationBody.scss";
|
||||
@import "./views/messages/_MNoticeBody.scss";
|
||||
@import "./views/messages/_MPollBody.scss";
|
||||
@import "./views/messages/_MStickerBody.scss";
|
||||
@import "./views/messages/_MTextBody.scss";
|
||||
@import "./views/messages/_MVideoBody.scss";
|
||||
@ -201,6 +207,7 @@
|
||||
@import "./views/right_panel/_PinnedMessagesCard.scss";
|
||||
@import "./views/right_panel/_RoomSummaryCard.scss";
|
||||
@import "./views/right_panel/_ThreadPanel.scss";
|
||||
@import "./views/right_panel/_TimelineCard.scss";
|
||||
@import "./views/right_panel/_UserInfo.scss";
|
||||
@import "./views/right_panel/_VerificationPanel.scss";
|
||||
@import "./views/right_panel/_WidgetCard.scss";
|
||||
@ -227,11 +234,13 @@
|
||||
@import "./views/rooms/_NotificationBadge.scss";
|
||||
@import "./views/rooms/_PinnedEventTile.scss";
|
||||
@import "./views/rooms/_PresenceLabel.scss";
|
||||
@import "./views/rooms/_RecentlyViewedButton.scss";
|
||||
@import "./views/rooms/_ReplyPreview.scss";
|
||||
@import "./views/rooms/_ReplyTile.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs.scss";
|
||||
@import "./views/rooms/_RoomHeader.scss";
|
||||
@import "./views/rooms/_RoomList.scss";
|
||||
@import "./views/rooms/_RoomListHeader.scss";
|
||||
@import "./views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./views/rooms/_RoomSublist.scss";
|
||||
@import "./views/rooms/_RoomTile.scss";
|
||||
@ -249,6 +258,7 @@
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_FontScalingPanel.scss";
|
||||
@import "./views/settings/_ImageSizePanel.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_JoinRuleSettings.scss";
|
||||
@import "./views/settings/_LayoutSwitcher.scss";
|
||||
@ -263,6 +273,7 @@
|
||||
@import "./views/settings/_UpdateCheckButton.scss";
|
||||
@import "./views/settings/tabs/_SettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_NotificationSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
|
||||
@ -273,6 +284,7 @@
|
||||
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
|
||||
@import "./views/spaces/_SpaceBasicSettings.scss";
|
||||
@import "./views/spaces/_SpaceChildrenPicker.scss";
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
// make any scrollbar grey and thin
|
||||
html {
|
||||
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
||||
scrollbar-color: $scrollbar-thumb-color transparent;
|
||||
}
|
||||
// scrollbar-width is not inherited (but -color is, why?!),
|
||||
// so declare it on every element
|
||||
@ -27,7 +27,6 @@ html {
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $scrollbar-track-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@ -37,11 +36,7 @@ html {
|
||||
|
||||
// make auto-hide scrollbars not transparent again on hover
|
||||
.mx_AutoHideScrollbar:hover {
|
||||
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: $scrollbar-track-color;
|
||||
}
|
||||
scrollbar-color: $scrollbar-thumb-color transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $scrollbar-thumb-color;
|
||||
|
||||
@ -27,7 +27,6 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1.0;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
@ -38,7 +37,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
font-size: $font-14px;
|
||||
z-index: 5001;
|
||||
contain: content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_right {
|
||||
@ -116,3 +115,11 @@ limitations under the License.
|
||||
border-top: 8px solid $menu-bg-color;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_rightAligned {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_bottomAligned {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ limitations under the License.
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
|
||||
content: '';
|
||||
height: 56px;
|
||||
background-color: $accent-color-alt;
|
||||
background-color: $accent-alt;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
|
||||
@ -152,7 +152,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
@ -203,5 +203,5 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
|
||||
}
|
||||
|
||||
.mx_TagTile_badgeHighlight {
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $groupheader-button-color;
|
||||
background-color: $header-panel-text-primary-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
@ -81,13 +81,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_GroupView_editable:focus {
|
||||
border-bottom: 1px solid $accent-color !important;
|
||||
border-bottom: 1px solid $accent !important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -229,7 +229,7 @@ limitations under the License.
|
||||
vertical-align: top;
|
||||
line-height: $font-24px;
|
||||
padding-left: 28px;
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms .mx_RoomDetailList {
|
||||
@ -244,7 +244,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSection {
|
||||
color: $greyed-fg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ limitations under the License.
|
||||
|
||||
.mx_HeaderButtons::before {
|
||||
content: "";
|
||||
background-color: $header-divider-color;
|
||||
background-color: $header-panel-text-primary-color;
|
||||
opacity: 0.5;
|
||||
margin: 6px 8px;
|
||||
border-radius: 1px;
|
||||
|
||||
@ -77,7 +77,7 @@ limitations under the License.
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
color: #fff; // on all themes
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
top: 20px;
|
||||
|
||||
@ -101,8 +101,9 @@ $roomListCollapsedWidth: 68px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin: 0 12px;
|
||||
padding: 12px 0 8px;
|
||||
border-bottom: 1px solid $quinary-content;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
@ -110,8 +111,34 @@ $roomListCollapsedWidth: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu {
|
||||
// mini-mode for when Space Panel is disabled
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
& + .mx_RoomListHeader {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_shortcutPrompt {
|
||||
border-radius: 6px;
|
||||
background-color: $panel-actions;
|
||||
padding: 2px 4px;
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $light-fg-color;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
|
||||
& + .mx_LeftPanel_exploreButton {
|
||||
.mx_RoomSearch_shortcutPrompt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& + .mx_LeftPanel_exploreButton,
|
||||
& + .mx_LeftPanel_recentsButton {
|
||||
// Cheaty way to return the occupied space to the filter input
|
||||
flex-basis: 0;
|
||||
margin: 0;
|
||||
@ -129,7 +156,7 @@ $roomListCollapsedWidth: 68px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
background-color: $panel-actions;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
@ -144,15 +171,16 @@ $roomListCollapsedWidth: 68px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-content;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
.mx_LeftPanel_exploreButton,
|
||||
.mx_LeftPanel_recentsButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
background-color: $panel-actions;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
@ -163,17 +191,28 @@ $roomListCollapsedWidth: 68px;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-content;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel_exploreButton_space::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
|
||||
.mx_LeftPanel_recentsButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/clock.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListFilterCount {
|
||||
@ -231,10 +270,10 @@ $roomListCollapsedWidth: 68px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
.mx_LeftPanel_exploreButton,
|
||||
.mx_LeftPanel_recentsButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,7 +134,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/feather-customised/maximise.svg');
|
||||
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,20 +23,21 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
|
||||
padding: 5px;
|
||||
// margin left to not allow the handle to not encroach on the space for the scrollbar
|
||||
margin-left: 8px;
|
||||
padding: $container-gap-width;
|
||||
padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
|
||||
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
|
||||
|
||||
&:hover .mx_RightPanel_ResizeHandle {
|
||||
// Need to use important to override element style attributes
|
||||
// set by re-resizable
|
||||
top: 50% !important;
|
||||
transform: translate(0, -50%);
|
||||
&:hover .mx_ResizeHandle_horizontal::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
height: 64px !important; // to match width of the ones on roomlist
|
||||
width: 4px !important;
|
||||
border-radius: 4px !important;
|
||||
height: 64px; // to match width of the ones on roomlist
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
content: '';
|
||||
|
||||
background-color: $primary-content;
|
||||
opacity: 0.8;
|
||||
|
||||
@ -52,7 +52,7 @@ limitations under the License.
|
||||
|
||||
.mx_MatrixChat_syncError {
|
||||
color: $accent-fg-color;
|
||||
background-color: $warning-bg-color;
|
||||
background-color: #DF2A8B; // Only used here
|
||||
border-radius: 5px;
|
||||
display: table;
|
||||
padding: 30px;
|
||||
@ -76,14 +76,28 @@ limitations under the License.
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// We'd like to remove this, but this makes matrixchat's resizehandle's
|
||||
// negative margin greater than its positive padding. If it's the same
|
||||
// or less, Safari and other WebKit based browsers get confused about overflows somehow and
|
||||
// https://github.com/vector-im/element-web/issues/19863 happens.
|
||||
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
|
||||
margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
|
||||
// The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
|
||||
// The resizeHandle does not change the gap between the left panel and the room view:
|
||||
// the resizeHandle width is: 11px = 10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
|
||||
// right: -6px left: -6px positions the element exactly on the edge of leftPanel.
|
||||
// left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
|
||||
// We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
|
||||
}
|
||||
|
||||
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
height: 64px; // to match width of the ones on roomlist
|
||||
width: 4px;
|
||||
|
||||
185
res/css/structures/_QuickSettingsButton.scss
Normal file
185
res/css/structures/_QuickSettingsButton.scss
Normal file
@ -0,0 +1,185 @@
|
||||
/*
|
||||
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_QuickSettingsButton {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
margin: 12px auto;
|
||||
color: $secondary-content;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
&.expanded {
|
||||
margin-left: 20px;
|
||||
padding-left: 44px; // align with toggle collapse button text
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
left: 0;
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
background: $secondary-content;
|
||||
}
|
||||
|
||||
&:not(.expanded):hover {
|
||||
background-color: $quaternary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
|
||||
padding: 16px;
|
||||
width: max-content;
|
||||
min-width: 200px;
|
||||
contain: unset; // let the dropdown paint beyond the context menu
|
||||
|
||||
> div > h2 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-content;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> div > h4 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
text-transform: uppercase;
|
||||
color: $tertiary-content;
|
||||
margin: 20px 0 12px;
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_pinToSidebarHeading {
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_favouritesCheckbox,
|
||||
.mx_QuickSettingsButton_peopleCheckbox {
|
||||
.mx_Checkbox_background + div {
|
||||
padding-left: 22px;
|
||||
position: relative;
|
||||
margin-left: 6px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_moreOptionsButton {
|
||||
padding-left: 22px;
|
||||
margin-left: 22px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-content;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_themePicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> h4 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_Dropdown {
|
||||
min-width: 100px;
|
||||
margin-left: auto;
|
||||
height: min-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
padding: $container-border-width 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
contain: strict;
|
||||
@ -71,10 +71,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
background: rgba($accent, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -103,44 +103,68 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
$dot-size: 8px;
|
||||
$pulse-color: $pinned-unread-color;
|
||||
$dot-size: 7px;
|
||||
$pulse-color: $alert;
|
||||
|
||||
.mx_RightPanel_pinnedMessagesButton {
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/pin.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
.mx_RightPanel_headerButton_unreadIndicator_bg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
border-radius: 50%;
|
||||
transform: scale(1.6);
|
||||
transform-origin: center center;
|
||||
background: rgba($background, 1);
|
||||
}
|
||||
|
||||
.mx_RightPanel_pinnedMessagesButton_unreadIndicator {
|
||||
.mx_RightPanel_headerButton_unreadIndicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
border-radius: 50%;
|
||||
transform: scale(1);
|
||||
background: rgba($pulse-color, 1);
|
||||
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
|
||||
animation: mx_RightPanel_indicator_pulse 2s infinite;
|
||||
animation-iteration-count: 1;
|
||||
|
||||
&.mx_Indicator_gray {
|
||||
background: rgba($input-darker-fg-color, 1);
|
||||
box-shadow: rgba($input-darker-fg-color, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
transform: scale(1);
|
||||
background: rgba($pulse-color, 1);
|
||||
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
|
||||
animation: mx_RightPanel_indicator_pulse 2s infinite;
|
||||
animation-iteration-count: 1;
|
||||
transform-origin: center center;
|
||||
animation-name: mx_RightPanel_indicator_pulse_shadow;
|
||||
animation-duration: inherit;
|
||||
animation-iteration-count: inherit;
|
||||
border-radius: 50%;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(1);
|
||||
transform-origin: center center;
|
||||
animation-name: mx_RightPanel_indicator_pulse_shadow;
|
||||
animation-duration: inherit;
|
||||
animation-iteration-count: inherit;
|
||||
border-radius: 50%;
|
||||
background: rgba($pulse-color, 1);
|
||||
}
|
||||
.mx_RightPanel_timelineCardButton {
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/feedback.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -175,7 +199,7 @@ $pulse-color: $pinned-unread-color;
|
||||
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
&::before {
|
||||
background-color: $accent-color !important;
|
||||
background-color: $accent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,7 +207,7 @@ $pulse-color: $pinned-unread-color;
|
||||
font-size: $font-8px;
|
||||
border-radius: 8px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
@ -229,7 +253,7 @@ $pulse-color: $pinned-unread-color;
|
||||
margin: 11px auto 29px auto;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
background-color: $rightpanel-button-color;
|
||||
background-color: $header-panel-text-primary-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
|
||||
@ -121,7 +121,7 @@ limitations under the License.
|
||||
vertical-align: text-top;
|
||||
margin-right: 2px;
|
||||
content: "";
|
||||
mask: url('$(res)/img/feather-customised/user.svg');
|
||||
mask: url("$(res)/img/feather-customised/user.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
// scale it down and make the size slightly bigger (16 instead of 14px)
|
||||
@ -132,7 +132,8 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
|
||||
.mx_RoomDirectory_join,
|
||||
.mx_RoomDirectory_preview {
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -220,3 +221,7 @@ limitations under the License.
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_listItem {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
.mx_RoomSearch {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
background-color: $panel-actions;
|
||||
// keep border thickness consistent to prevent movement
|
||||
border: 1px solid transparent;
|
||||
height: 28px;
|
||||
@ -67,12 +67,22 @@ limitations under the License.
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
margin-right: 8px;
|
||||
background-color: $quinary-content;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
mask-position: center;
|
||||
mask-size: 12px;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,13 +92,20 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_minimized {
|
||||
border-radius: 32px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 8px;
|
||||
padding: 5px;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomStatusBar_unreadMessagesBar {
|
||||
padding-top: 10px;
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_unsentTitle {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_title {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_desc {
|
||||
|
||||
@ -103,7 +103,7 @@ limitations under the License.
|
||||
.mx_RoomView_auxPanel_hiddenHighlights {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
padding: 10px 26px;
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -120,6 +120,10 @@ limitations under the License.
|
||||
overflow-y: auto;
|
||||
flex: 1 1 0;
|
||||
overflow-anchor: none;
|
||||
|
||||
&[data-scrollbar=false] {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_messagePanelSearchSpinner {
|
||||
@ -132,7 +136,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomView_messagePanelSearchSpinner::before {
|
||||
background-color: $greyed-fg-color;
|
||||
background-color: $info-plinth-fg-color;
|
||||
mask: url('$(res)/img/feather-customised/search-input.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
@ -162,6 +166,7 @@ limitations under the License.
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: calc($container-gap-width / 2);
|
||||
}
|
||||
|
||||
.mx_RoomView_statusArea {
|
||||
@ -241,8 +246,8 @@ li.mx_RoomView_myReadMarker_container {
|
||||
}
|
||||
|
||||
hr.mx_RoomView_myReadMarker {
|
||||
border-top: solid 1px $accent-color;
|
||||
border-bottom: solid 1px $accent-color;
|
||||
border-top: solid 1px $accent;
|
||||
border-bottom: solid 1px $accent;
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
@ -299,7 +304,7 @@ hr.mx_RoomView_myReadMarker {
|
||||
.mx_RoomView_ongoingConfCallNotification {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
color: $accent-fg-color;
|
||||
font-weight: bold;
|
||||
padding: 6px 0;
|
||||
|
||||
@ -99,7 +99,7 @@ limitations under the License.
|
||||
.mx_SpaceHierarchy_error {
|
||||
position: relative;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
margin: 20px auto 12px;
|
||||
@ -238,7 +238,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ $gutterSize: 16px;
|
||||
$activeBorderTransparentGap: 1px;
|
||||
|
||||
$activeBackgroundColor: $panel-actions;
|
||||
$activeBorderColor: $secondary-content;
|
||||
$activeBorderColor: $primary-content;
|
||||
|
||||
.mx_SpacePanel {
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
@ -35,28 +35,57 @@ $activeBorderColor: $secondary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_SpacePanel_spaceTreeWrapper {
|
||||
flex: 1;
|
||||
padding: 8px 8px 16px 0;
|
||||
}
|
||||
|
||||
.mx_SpacePanel_toggleCollapse {
|
||||
flex: 0 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
mask-position: center;
|
||||
mask-size: 32px;
|
||||
mask-repeat: no-repeat;
|
||||
margin-left: $gutterSize;
|
||||
margin-bottom: 12px;
|
||||
background-color: $tertiary-content;
|
||||
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
left: 0;
|
||||
mask-position: center;
|
||||
mask-size: 24px;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
&:not(.expanded) {
|
||||
position: absolute;
|
||||
left: 68px;
|
||||
top: 12px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background-color: $primary-content;
|
||||
opacity: 0;
|
||||
|
||||
&::before {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: scaleX(-1);
|
||||
margin-left: auto;
|
||||
margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke
|
||||
border-radius: 8px;
|
||||
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $panel-actions;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mx_SpacePanel_toggleCollapse {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
@ -77,13 +106,6 @@ $activeBorderColor: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceTreeLevel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 250px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_SpaceItem {
|
||||
display: inline-flex;
|
||||
flex-flow: wrap;
|
||||
@ -144,7 +166,7 @@ $activeBorderColor: $secondary-content;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.mx_SpaceButton_name {
|
||||
@ -160,6 +182,7 @@ $activeBorderColor: $secondary-content;
|
||||
|
||||
.mx_SpaceButton_toggleCollapse {
|
||||
width: $gutterSize;
|
||||
min-width: $gutterSize;
|
||||
height: 20px;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
@ -188,18 +211,36 @@ $activeBorderColor: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_home .mx_SpaceButton_icon {
|
||||
background-color: #ffffff;
|
||||
&.mx_SpaceButton_home,
|
||||
&.mx_SpaceButton_favourites,
|
||||
&.mx_SpaceButton_people,
|
||||
&.mx_SpaceButton_orphans {
|
||||
.mx_SpaceButton_icon {
|
||||
background-color: $panel-actions;
|
||||
|
||||
&::before {
|
||||
background-color: #3f3d3d;
|
||||
mask-image: url('$(res)/img/element-icons/home.svg');
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_new .mx_SpaceButton_icon {
|
||||
background-color: $roomlist-button-bg-color;
|
||||
&.mx_SpaceButton_home .mx_SpaceButton_icon::before {
|
||||
mask-image: url('$(res)/img/element-icons/home.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_people .mx_SpaceButton_icon::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_new .mx_SpaceButton_icon {
|
||||
&::before {
|
||||
background-color: $primary-content;
|
||||
mask-image: url('$(res)/img/element-icons/plus.svg');
|
||||
@ -221,11 +262,11 @@ $activeBorderColor: $secondary-content;
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
@ -240,6 +281,26 @@ $activeBorderColor: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceTreeLevel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 250px;
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
|
||||
color: $secondary-content;
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
font-size: $font-15px !important; // override inline style
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
|
||||
& + .mx_BaseAvatar_image {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceButton_avatarWrapper {
|
||||
position: relative;
|
||||
}
|
||||
@ -270,20 +331,19 @@ $activeBorderColor: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceButton_narrow .mx_SpaceButton_menuButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_SpaceButton:hover,
|
||||
.mx_SpaceButton:focus-within,
|
||||
.mx_SpaceButton_hasMenuOpen {
|
||||
&:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
|
||||
visibility: visible;
|
||||
&:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* root space buttons are bigger and not indented */
|
||||
& > .mx_AutoHideScrollbar {
|
||||
flex: 1;
|
||||
padding: 0 8px 16px 0;
|
||||
|
||||
& > .mx_SpaceButton {
|
||||
height: $topLevelHeight;
|
||||
|
||||
@ -295,6 +355,24 @@ $activeBorderColor: $secondary-content;
|
||||
& > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow {
|
||||
mask-image: linear-gradient(180deg, transparent, black 5%);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_bottomOverflow {
|
||||
mask-image: linear-gradient(180deg, black, black 95%, transparent);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
|
||||
mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu {
|
||||
padding: 0 2px 8px;
|
||||
border-bottom: 1px solid $quinary-content;
|
||||
margin: 12px 14px 4px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -306,13 +384,8 @@ $activeBorderColor: $secondary-content;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
|
||||
color: $accent-color;
|
||||
|
||||
.mx_SpacePanel_iconInvite::before {
|
||||
background-color: $accent-color;
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
.mx_SpacePanel_iconInvite::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconSettings::before {
|
||||
@ -328,15 +401,11 @@ $activeBorderColor: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconPlus::before {
|
||||
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');
|
||||
mask-image: url('$(res)/img/element-icons/plus.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_noIcon {
|
||||
@ -346,6 +415,14 @@ $activeBorderColor: $secondary-content;
|
||||
padding-left: 5px !important; // override default iconized label style to align with header
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpacePanel_contextMenu_separatorLabel {
|
||||
color: $tertiary-content;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
//margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpacePanel_sharePublicSpace {
|
||||
|
||||
@ -49,10 +49,10 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
> span {
|
||||
@ -128,7 +128,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
@ -427,11 +427,11 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,12 +44,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active {
|
||||
background-color: $tab-label-active-bg-color;
|
||||
background-color: $accent;
|
||||
color: $tab-label-active-fg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
background-color: $tab-label-active-icon-bg-color;
|
||||
background-color: $tab-label-active-fg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
@ -89,14 +89,14 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
.mx_TabbedView_tabLabel_text {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
|
||||
@ -76,7 +76,7 @@ limitations under the License.
|
||||
|
||||
&::after {
|
||||
mask-image: url("$(res)/img/e2e/warning.svg");
|
||||
background-color: $notice-primary-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,6 +85,11 @@ limitations under the License.
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_labs::after {
|
||||
mask-image: url('$(res)/img/element-icons/flask.svg');
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
@ -23,6 +23,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadView {
|
||||
.mx_UploadBar {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UploadBar_filename {
|
||||
margin-top: 5px;
|
||||
color: $muted-fg-color;
|
||||
|
||||
@ -15,141 +15,51 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_UserMenu {
|
||||
// to make the menu button sort of aligned with the explore button below
|
||||
padding-right: 6px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.mx_UserMenu_prototype {
|
||||
// The margin & padding combination between here and the ::after is to
|
||||
// align the border line with the tag panel.
|
||||
margin-bottom: 6px;
|
||||
|
||||
padding-right: 0; // make the right edge line up with the explore button
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
// considering we've eliminated right padding on the menu itself, we need to
|
||||
// push the chevron in slightly (roughly lining up with the center of the
|
||||
// plus buttons)
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
// we cheat opacity on the theme colour with an after selector here
|
||||
&::after {
|
||||
content: '';
|
||||
border-bottom: 1px solid $primary-content;
|
||||
opacity: 0.2;
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.mx_AccessibleButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
.mx_UserMenu_userAvatar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_UserMenu_name {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mx_UserMenu_cutout .mx_BaseAvatar {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dnd-avatar-mask.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mx_UserMenu_dndBadge {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -7px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $tertiary-content;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_row {
|
||||
// Create a row-based flexbox to ensure items stay aligned correctly.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
position: relative; // to make default avatars work
|
||||
margin-right: 8px;
|
||||
height: 32px; // to remove the unknown 4px gap the browser puts below it
|
||||
padding: 3px 0; // to align with and without using doubleName
|
||||
|
||||
.mx_UserMenu_userAvatar {
|
||||
border-radius: 32px; // should match avatar size
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_doubleName {
|
||||
flex: 1;
|
||||
min-width: 0; // make flexbox aware that it can crush this to a tiny width
|
||||
|
||||
.mx_UserMenu_userName,
|
||||
.mx_UserMenu_subUserName {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_UserMenu_subUserName {
|
||||
color: $muted-fg-color;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_userName {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
// No special styles: the rest of the layout happens to make it work.
|
||||
}
|
||||
|
||||
.mx_UserMenu_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 {
|
||||
padding-right: 0px;
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
margin-right: 0px;
|
||||
background-color: $alert;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,44 +67,6 @@ limitations under the License.
|
||||
.mx_UserMenu_contextMenu {
|
||||
width: 258px;
|
||||
|
||||
// These override the styles already present on the user menu rather than try to
|
||||
// define a new menu. They are specifically for the stacked menu when a community
|
||||
// is being represented as a prototype.
|
||||
&.mx_UserMenu_contextMenu_prototype {
|
||||
padding-bottom: 16px;
|
||||
|
||||
.mx_UserMenu_contextMenu_header {
|
||||
padding-bottom: 0;
|
||||
padding-top: 16px;
|
||||
|
||||
&:nth-child(n + 2) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 85%;
|
||||
opacity: 0.2;
|
||||
border: none;
|
||||
border-bottom: 1px solid $primary-content;
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu {
|
||||
> .mx_IconizedContextMenu_optionList {
|
||||
margin-top: 4px;
|
||||
|
||||
&::before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
> .mx_AccessibleButton {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
|
||||
.mx_AccessibleButton {
|
||||
padding-top: 16px;
|
||||
@ -299,6 +171,15 @@ limitations under the License.
|
||||
.mx_UserMenu_iconHome::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconDnd::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconDndOff::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dnd-cross.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconHosting::before {
|
||||
mask-image: url('$(res)/img/element-icons/brands/element.svg');
|
||||
}
|
||||
@ -315,23 +196,37 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconArchive::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMessage::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
|
||||
mask-image: url('$(res)/img/element-icons/feedback.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMembers::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
.mx_UserMenu_CustomStatusSection {
|
||||
margin: 0 12px 8px;
|
||||
|
||||
.mx_UserMenu_CustomStatusSection_input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
> input {
|
||||
border: 1px solid $accent;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconInvite::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
> p {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
margin-inline-start: 18px;
|
||||
|
||||
&.warning {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
|
||||
color: $orange-warning-color;
|
||||
color: #ff8d13; // Only used here
|
||||
}
|
||||
|
||||
.mx_Login_type_container {
|
||||
@ -82,7 +82,7 @@ limitations under the License.
|
||||
|
||||
.mx_Login_underlinedServerName {
|
||||
width: max-content;
|
||||
border-bottom: 1px dashed $accent-color;
|
||||
border-bottom: 1px dashed $accent;
|
||||
}
|
||||
|
||||
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
|
||||
|
||||
@ -19,6 +19,6 @@ limitations under the License.
|
||||
margin-top: $font-14px;
|
||||
|
||||
a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ limitations under the License.
|
||||
width: 500px;
|
||||
font-size: $font-12px;
|
||||
color: $authpage-secondary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
background-color: $background;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 25px 60px;
|
||||
box-sizing: border-box;
|
||||
@ -55,7 +55,7 @@ limitations under the License.
|
||||
.mx_Field input,
|
||||
.mx_Field select {
|
||||
color: $authpage-primary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_Field_labelAlwaysTopLeft label,
|
||||
@ -64,11 +64,11 @@ limitations under the License.
|
||||
.mx_Field input:not(:placeholder-shown) + label,
|
||||
.mx_Field textarea:focus + label,
|
||||
.mx_Field textarea:not(:placeholder-shown) + label {
|
||||
background-color: $authpage-body-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
input.error {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_Field input {
|
||||
@ -88,7 +88,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
background-color: $authpage-body-bg-color;
|
||||
background-color: $background;
|
||||
|
||||
.mx_Dropdown_option_highlight {
|
||||
background-color: $authpage-focus-bg-color;
|
||||
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
margin-right: 4px;
|
||||
min-width: 80px;
|
||||
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
color: $background;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
.mx_CompleteSecurityBody {
|
||||
width: 600px;
|
||||
color: $authpage-primary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
background-color: $background;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
|
||||
@ -78,7 +78,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
|
||||
background-color: $accent-color-darker;
|
||||
background-color: #92caad; // Only used here
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$PassphraseStrengthHigh: $accent-color;
|
||||
$PassphraseStrengthHigh: $accent;
|
||||
$PassphraseStrengthMedium: $username-variant5-color;
|
||||
$PassphraseStrengthLow: $notice-primary-color;
|
||||
$PassphraseStrengthLow: $alert;
|
||||
|
||||
progress.mx_PassphraseField_progress {
|
||||
appearance: none;
|
||||
|
||||
@ -27,11 +27,17 @@ limitations under the License.
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
|
||||
&.mx_RoomAvatar_isSpaceRoom {
|
||||
&.mx_BaseAvatar_image, .mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
color: $avatar-initial-color;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
@ -43,5 +49,5 @@ limitations under the License.
|
||||
object-fit: cover;
|
||||
border-radius: 125px;
|
||||
vertical-align: top;
|
||||
background-color: $avatar-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar_icon_online::before {
|
||||
background-color: $presence-online;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar_icon_away::before {
|
||||
|
||||
@ -85,7 +85,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
background-color: $accent-color-alt;
|
||||
background-color: $accent-alt;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
@ -100,7 +100,7 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
$pulse-color: $accent-color-alt;
|
||||
$pulse-color: $accent-alt;
|
||||
$dot-size: 12px;
|
||||
|
||||
.mx_BetaDot {
|
||||
|
||||
@ -17,6 +17,7 @@ limitations under the License.
|
||||
// A context menu that largely fits the | [icon] [label] | format.
|
||||
.mx_IconizedContextMenu {
|
||||
min-width: 146px;
|
||||
width: max-content;
|
||||
|
||||
.mx_IconizedContextMenu_optionList {
|
||||
& > * {
|
||||
@ -58,6 +59,11 @@ limitations under the License.
|
||||
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
// round all corners of the only button for the hover effect to be bounded
|
||||
&:first-child:last-child .mx_AccessibleButton:first-child:last-child {
|
||||
border-radius: 8px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
// pad the inside of the button so that the hover background is padded too
|
||||
padding-top: 12px;
|
||||
@ -119,27 +125,35 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-content;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_optionList_red {
|
||||
.mx_AccessibleButton {
|
||||
color: $warning-color !important;
|
||||
color: $alert !important;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_option_red {
|
||||
color: $alert !important;
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_active {
|
||||
&.mx_AccessibleButton, .mx_AccessibleButton {
|
||||
color: $accent-color !important;
|
||||
color: $accent !important;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -162,4 +176,9 @@ limitations under the License.
|
||||
.mx_IconizedContextMenu_unchecked::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_sublabel {
|
||||
margin-left: 20px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +54,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
|
||||
}
|
||||
|
||||
.mx_MessageContextMenu_iconEndPoll::before {
|
||||
mask-image: url('$(res)/img/element-icons/check-white.svg');
|
||||
}
|
||||
|
||||
.mx_MessageContextMenu_iconForward::before {
|
||||
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
|
||||
}
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
/*
|
||||
Copyright 2018 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_StatusMessageContextMenu {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input.mx_StatusMessageContextMenu_message {
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 6.5px 11px;
|
||||
background-color: $background;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_message::placeholder {
|
||||
color: $memberstatus-placeholder-color;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_actionContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_submit,
|
||||
.mx_StatusMessageContextMenu_clear {
|
||||
@mixin mx_DialogButton;
|
||||
align-self: start;
|
||||
font-size: $font-12px;
|
||||
padding: 6px 1em;
|
||||
border: 1px solid transparent;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_submit[disabled] {
|
||||
opacity: 0.49;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_clear {
|
||||
color: $warning-color;
|
||||
background-color: transparent;
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -98,7 +98,7 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_errorCaption {
|
||||
@ -199,7 +199,7 @@ limitations under the License.
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
.mx_SubspaceSelector_dropdownOptionActive {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
padding-right: 32px;
|
||||
position: relative;
|
||||
|
||||
@ -213,7 +213,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ limitations under the License.
|
||||
|
||||
.mx_AddressPickerDialog_error {
|
||||
margin-top: 10px;
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_AddressPickerDialog_cancel {
|
||||
|
||||
@ -16,4 +16,8 @@ limitations under the License.
|
||||
|
||||
.mx_AnalyticsModal table {
|
||||
margin: 10px 0px;
|
||||
|
||||
.mx_AnalyticsModal_label {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
64
res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss
Normal file
64
res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss
Normal file
@ -0,0 +1,64 @@
|
||||
/*
|
||||
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_AnalyticsLearnMoreDialog {
|
||||
max-width: 500px;
|
||||
.mx_AnalyticsLearnMore_image_holder {
|
||||
background-image: url('$(res)/img/element-shiny.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
height: 112px;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
.mx_Dialog_content {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mx_AnalyticsLearnMore_copy {
|
||||
border-bottom: 1px solid $menu-border-color;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mx_AnalyticsPolicyLink {
|
||||
display: inline-block;
|
||||
mask-image: url('$(res)/img/external-link.svg');
|
||||
background-color: $accent;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_AnalyticsLearnMore_bullets {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.mx_AnalyticsLearnMore_bullets li {
|
||||
background: url('$(res)/img/tick-circle.svg') no-repeat;
|
||||
list-style-type: none;
|
||||
padding: 2px 0px 20px 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
87
res/css/views/dialogs/_CompoundDialog.scss
Normal file
87
res/css/views/dialogs/_CompoundDialog.scss
Normal file
@ -0,0 +1,87 @@
|
||||
/*
|
||||
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: This stylesheet covers dialogs listed by the compound, including
|
||||
// over multiple React components. The actual inner contents of the dialog should
|
||||
// be in their respective stylesheets.
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// Override legacy/default styles for dialogs
|
||||
.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
|
||||
padding: 0; // we'll manage it ourselves
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_CompoundDialog {
|
||||
.mx_CompoundDialog_header {
|
||||
padding: 32px 32px 16px 32px;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-size: $font-24px;
|
||||
margin: 0; // managed by header class
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_cancelButton {
|
||||
mask: url('$(res)/img/feather-customised/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $dialog-close-fg-color;
|
||||
cursor: pointer;
|
||||
|
||||
// Align with middle of title, 34px from right edge
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_content {
|
||||
overflow: auto;
|
||||
padding: 8px 32px;
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_footer {
|
||||
padding: 20px 32px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ScrollableBaseDialog {
|
||||
width: 544px; // fixed
|
||||
height: 516px; // fixed
|
||||
|
||||
.mx_CompoundDialog_content {
|
||||
height: 349px; // dialogHeight - header - footer
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_footer {
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); // hardcoded colour for both themes
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_CreateCommunityPrototypeDialog_subtext_error {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ limitations under the License.
|
||||
list-style: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
|
||||
// list-style doesn't do it for webkit
|
||||
&::-webkit-details-marker {
|
||||
|
||||
@ -106,7 +106,7 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_errorCaption {
|
||||
@ -168,7 +168,7 @@ limitations under the License.
|
||||
.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $accent-color;
|
||||
border: 3px solid $accent;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin: 12px auto 32px;
|
||||
@ -178,7 +178,7 @@ limitations under the License.
|
||||
height: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
|
||||
@ -215,7 +215,7 @@ limitations under the License.
|
||||
|
||||
th {
|
||||
// Colour choice: first one autocomplete gave me.
|
||||
border-bottom: 1px solid $accent-color;
|
||||
border-bottom: 1px solid $accent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -233,16 +233,16 @@ limitations under the License.
|
||||
|
||||
tr:hover {
|
||||
// Colour choice: first one autocomplete gave me.
|
||||
background-color: $accent-color-50pct;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DevTools_SettingsExplorer_mutable {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_DevTools_SettingsExplorer_immutable {
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
.mx_DevTools_SettingsExplorer_edit {
|
||||
@ -251,7 +251,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_DevTools_SettingsExplorer_warning {
|
||||
border: 2px solid $warning-color;
|
||||
border: 2px solid $alert;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@ -34,11 +34,11 @@ limitations under the License.
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RadioButton input[type="radio"]:checked + div > div {
|
||||
background: $greyed-fg-color;
|
||||
.mx_StyledRadioButton input[type="radio"]:checked + div > div {
|
||||
background: $info-plinth-fg-color;
|
||||
}
|
||||
|
||||
.mx_RadioButton input[type=radio]:checked + div {
|
||||
.mx_StyledRadioButton input[type=radio]:checked + div {
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
|
||||
background: $greyed-fg-color;
|
||||
border-color: $greyed-fg-color;
|
||||
background: $info-plinth-fg-color;
|
||||
border-color: $info-plinth-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ limitations under the License.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RadioButton > .mx_RadioButton_content {
|
||||
.mx_StyledRadioButton > .mx_StyledRadioButton_content {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@ -30,10 +30,32 @@ limitations under the License.
|
||||
|
||||
.mx_FeedbackDialog_section {
|
||||
position: relative;
|
||||
padding-left: 52px;
|
||||
padding: 12px 52px 12px 68px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $quinary-content;
|
||||
|
||||
& + .mx_FeedbackDialog_section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
||||
> p {
|
||||
color: $tertiary-content;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.mx_FeedbackDialog_section_microcopy {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
@ -42,7 +64,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
a, .mx_AccessibleButton_kind_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -51,13 +73,13 @@ limitations under the License.
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $icon-button-color;
|
||||
border-radius: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -75,7 +97,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_FeedbackDialog_rateApp {
|
||||
.mx_RadioButton {
|
||||
.mx_StyledRadioButton {
|
||||
display: inline-flex;
|
||||
font-size: 20px;
|
||||
transition: font-size 1s, border .5s;
|
||||
@ -90,7 +112,7 @@ limitations under the License.
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RadioButton_content {
|
||||
.mx_StyledRadioButton_content {
|
||||
background: $icon-button-color;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -100,18 +122,18 @@ limitations under the License.
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_spacer {
|
||||
.mx_StyledRadioButton_spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& + .mx_RadioButton {
|
||||
& + .mx_StyledRadioButton {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
.mx_StyledRadioButton_checked {
|
||||
font-size: 24px;
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
||||
@ -110,18 +110,28 @@ limitations under the License.
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_entry_name {
|
||||
font-size: $font-15px;
|
||||
.mx_ForwardList_entry_name,
|
||||
.mx_ForwardList_entry_detail {
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_entry_name {
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_entry_detail {
|
||||
font-size: $font-12px;
|
||||
margin-left: 8px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ForwardList_sendButton {
|
||||
position: relative;
|
||||
margin-left: 12px;
|
||||
|
||||
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
|
||||
// Hide the "Send" label while preserving button size
|
||||
@ -138,7 +148,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
|
||||
background-color: $button-primary-bg-color;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
@ -148,7 +158,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
|
||||
background-color: $button-primary-bg-color;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
|
||||
@ -78,7 +78,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_HostSignup_maximize_button {
|
||||
mask: url('$(res)/img/feather-customised/maximise.svg');
|
||||
mask: url("$(res)/img/element-icons/maximise-expand.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
@ -92,7 +92,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_HostSignup_minimize_button {
|
||||
mask: url('$(res)/img/feather-customised/minimise.svg');
|
||||
mask: url("$(res)/img/element-icons/minimise-collapse.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
|
||||
@ -362,7 +362,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPadField .mx_Field_postfix {
|
||||
@ -447,7 +447,7 @@ limitations under the License.
|
||||
margin-left: 32px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ limitations under the License.
|
||||
kbd {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background-color: $reaction-row-button-bg-color;
|
||||
background-color: $header-panel-bg-color;
|
||||
margin-right: 5px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
|
||||
@ -69,8 +69,8 @@ limitations under the License.
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_Dialog_primary {
|
||||
background-color: $notice-primary-color !important; // override default colour
|
||||
border-color: $notice-primary-color;
|
||||
background-color: $alert !important; // override default colour
|
||||
border-color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MessageEditHistoryDialog_error {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
84
res/css/views/dialogs/_PollCreateDialog.scss
Normal file
84
res/css/views/dialogs/_PollCreateDialog.scss
Normal file
@ -0,0 +1,84 @@
|
||||
/*
|
||||
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_PollCreateDialog {
|
||||
.mx_PollCreateDialog_busy {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba($background, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-child(n + 2) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PollCreateDialog_option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 16px; // 11px from the top will collapse, so this creates a 16px gap between options
|
||||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_PollCreateDialog_removeOption {
|
||||
margin-left: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: $quinary-content;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
mask: url('$(res)/img/element-icons/x-8px.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PollCreateDialog_addOption {
|
||||
padding: 0;
|
||||
margin-bottom: 40px; // arbitrary to create scrollable area under the poll
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@ -43,7 +43,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,5 +29,5 @@ limitations under the License.
|
||||
.mx_SetEmailDialog_email_input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
@ -43,11 +43,11 @@ limitations under the License.
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
.mx_StyledRadioButton {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.mx_RadioButton_content {
|
||||
.mx_StyledRadioButton_content {
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
color: $primary-content;
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License.
|
||||
.mx_TabbedIntegrationManagerDialog_currentManager {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: 1px solid $accent-color;
|
||||
border-top: 1px solid $accent;
|
||||
|
||||
iframe {
|
||||
background-color: #fff;
|
||||
@ -48,7 +48,7 @@ limitations under the License.
|
||||
|
||||
.mx_TabbedIntegrationManagerDialog_tab {
|
||||
display: inline-block;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
@ -57,6 +57,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_TabbedIntegrationManagerDialog_currentTab {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ limitations under the License.
|
||||
.mx_TermsDialog_link {
|
||||
display: inline-block;
|
||||
mask-image: url('$(res)/img/external-link.svg');
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@ -37,6 +37,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/settings/preference.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_sidebarIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings/sidebar.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_securityIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset_link {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@ limitations under the License.
|
||||
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -100,18 +100,18 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
|
||||
color: $input-valid-border-color;
|
||||
color: $accent;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $input-valid-border-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
|
||||
color: $input-invalid-border-color;
|
||||
color: $alert;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $input-invalid-border-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
.mx_CreateKeyBackupDialog_passPhraseInput {
|
||||
flex: none;
|
||||
width: 250px;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
@ -72,8 +72,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
|
||||
padding-top: 20px;
|
||||
|
||||
&.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer::after {
|
||||
@ -82,7 +87,7 @@ limitations under the License.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
|
||||
.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
|
||||
margin-bottom: 16px;
|
||||
padding: 11px;
|
||||
}
|
||||
@ -127,9 +132,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
|
||||
width: 380px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKey {
|
||||
@ -141,18 +144,29 @@ limitations under the License.
|
||||
border-radius: 6px;
|
||||
word-spacing: 1em;
|
||||
margin-bottom: 20px;
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
|
||||
width: 160px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@ -20,14 +20,14 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RestoreKeyBackupDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_RestoreKeyBackupDialog_passPhraseInput,
|
||||
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $notice-primary-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,7 +108,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $input-valid-border-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,23 +30,25 @@ limitations under the License.
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-14px;
|
||||
border: none; // override default <button /> styles
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $button-primary-bg-color;
|
||||
background-color: $accent;
|
||||
border: 1px solid $accent; // account for size loss of no border
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
color: $button-primary-bg-color;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border: 1px solid $button-primary-bg-color;
|
||||
border: 1px solid $accent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -58,7 +60,7 @@ limitations under the License.
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
|
||||
padding: 5px 12px;
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $button-primary-bg-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
|
||||
@ -67,13 +69,13 @@ limitations under the License.
|
||||
|
||||
.mx_AccessibleButton_kind_danger {
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $button-danger-bg-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_outline {
|
||||
color: $button-danger-bg-color;
|
||||
color: $alert;
|
||||
background-color: transparent;
|
||||
border: 1px solid $button-danger-bg-color;
|
||||
border: 1px solid $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
|
||||
@ -89,7 +91,7 @@ limitations under the License.
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
|
||||
padding: 5px 12px;
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $button-danger-bg-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
|
||||
@ -98,8 +100,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: $button-link-fg-color;
|
||||
background-color: $button-link-bg-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
|
||||
@ -108,10 +109,49 @@ limitations under the License.
|
||||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
|
||||
padding: 5px 12px;
|
||||
color: $button-link-fg-color;
|
||||
background-color: $button-link-bg-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
|
||||
background-color: $alert;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_confirm_sm,
|
||||
.mx_AccessibleButton_kind_cancel_sm {
|
||||
padding: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ limitations under the License.
|
||||
max-height: 116px;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
border: solid 1px $accent-color;
|
||||
border: solid 1px $accent;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -28,8 +28,8 @@ limitations under the License.
|
||||
|
||||
.mx_AddressTile.mx_AddressTile_error {
|
||||
background-color: rgba(255, 0, 100, 0.1);
|
||||
color: $warning-color;
|
||||
border-color: $warning-color;
|
||||
color: $alert;
|
||||
border-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AddressTile_network {
|
||||
|
||||
@ -41,7 +41,7 @@ limitations under the License.
|
||||
&.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ limitations under the License.
|
||||
padding: 3px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: $plinth-bg-color;
|
||||
background-color: $secondary-accent-color;
|
||||
border-radius: 3px;
|
||||
background-image: url('$(res)/img/icon-return.svg');
|
||||
background-position: 8px 70%;
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_clear {
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
mask: url('$(res)/img/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Dropdown_input:focus {
|
||||
border-color: $input-focused-border-color;
|
||||
border-color: $accent-alt;
|
||||
}
|
||||
|
||||
/* Disable dropdown highlight on focus */
|
||||
@ -110,7 +110,7 @@ input.mx_Dropdown_option:focus {
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-focused-border-color;
|
||||
border: 1px solid $accent-alt;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -33,7 +33,7 @@ limitations under the License.
|
||||
height: 14px;
|
||||
mask-image: url('$(res)/img/feather-customised/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
mask-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventListSummary_toggle {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -73,7 +73,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Field:focus-within {
|
||||
border-color: $input-focused-border-color;
|
||||
border-color: $accent-alt;
|
||||
}
|
||||
|
||||
.mx_Field input:focus,
|
||||
@ -89,9 +89,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Field input:placeholder-shown:focus::placeholder,
|
||||
.mx_Field textarea:placeholder-shown:focus::placeholder {
|
||||
.mx_Field textarea:placeholder-shown:focus::placeholder,
|
||||
.mx_Field.mx_Field_placeholderIsHint input::placeholder {
|
||||
transition: color 0.25s ease-in 0.1s;
|
||||
color: $greyed-fg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
}
|
||||
|
||||
.mx_Field label {
|
||||
@ -135,7 +136,7 @@ limitations under the License.
|
||||
.mx_Field input:focus + label,
|
||||
.mx_Field select:focus + label,
|
||||
.mx_Field textarea:focus + label {
|
||||
color: $input-focused-border-color;
|
||||
color: $accent-alt;
|
||||
}
|
||||
|
||||
.mx_Field select:disabled,
|
||||
@ -145,30 +146,30 @@ limitations under the License.
|
||||
.mx_Field textarea:disabled,
|
||||
.mx_Field textarea:disabled + label {
|
||||
background-color: $background;
|
||||
color: $greyed-fg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
}
|
||||
|
||||
.mx_Field_valid {
|
||||
&.mx_Field,
|
||||
&.mx_Field:focus-within {
|
||||
border-color: $input-valid-border-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
&.mx_Field label,
|
||||
&.mx_Field:focus-within label {
|
||||
color: $input-valid-border-color;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Field_invalid {
|
||||
&.mx_Field,
|
||||
&.mx_Field:focus-within {
|
||||
border-color: $input-invalid-border-color;
|
||||
border-color: $alert;
|
||||
}
|
||||
|
||||
&.mx_Field label,
|
||||
&.mx_Field:focus-within label {
|
||||
color: $input-invalid-border-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,5 +24,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_InlineSpinner_icon {
|
||||
display: inline-block;
|
||||
display: inline-block !important; // Override regular mx_Spinner_icon
|
||||
}
|
||||
|
||||
97
res/css/views/elements/_InteractiveTooltip.scss
Normal file
97
res/css/views/elements/_InteractiveTooltip.scss
Normal file
@ -0,0 +1,97 @@
|
||||
/*
|
||||
Copyright 2019 - 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_InteractiveTooltip_wrapper {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip {
|
||||
border-radius: 8px;
|
||||
background-color: $background;
|
||||
color: $primary-content;
|
||||
position: absolute;
|
||||
z-index: 5001;
|
||||
box-shadow: 0 24px 8px rgb(17 17 26 / 4%), 0 8px 32px rgb(17 17 26 / 4%);
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
|
||||
top: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
|
||||
left: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
|
||||
right: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
|
||||
bottom: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
position: absolute;
|
||||
left: calc(50% - 8px);
|
||||
top: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-bottom: 8px solid $background;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(135deg);
|
||||
border-radius: 0 0 0 3px;
|
||||
top: calc(-8px / 1.414); // sqrt(2) because of rotation
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip_chevron_bottom {
|
||||
position: absolute;
|
||||
left: calc(50% - 8px);
|
||||
bottom: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-top: 8px solid $background;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_bottom {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
border-radius: 0 0 0 3px;
|
||||
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
|
||||
}
|
||||
}
|
||||
@ -35,7 +35,7 @@ limitations under the License.
|
||||
font-size: 10pt;
|
||||
line-height: 1.5em;
|
||||
border-radius: 5px;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
color: $accent-fg-color;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
|
||||
@ -22,7 +22,7 @@ progress.mx_ProgressBar {
|
||||
border: none;
|
||||
|
||||
@mixin ProgressBarBorderRadius 6px;
|
||||
@mixin ProgressBarColour $progressbar-fg-color;
|
||||
@mixin ProgressBarColour $accent;
|
||||
@mixin ProgressBarBgColour $progressbar-bg-color;
|
||||
::-webkit-progress-value {
|
||||
transition: width 1s;
|
||||
|
||||
@ -20,7 +20,7 @@ limitations under the License.
|
||||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 10px;
|
||||
border-left: 2px solid $button-bg-color;
|
||||
border-left: 2px solid $accent;
|
||||
border-radius: 2px;
|
||||
|
||||
.mx_ReplyChain_show {
|
||||
|
||||
@ -32,15 +32,6 @@ limitations under the License.
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
|
||||
margin: 0 -10px 0 0;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle > div {
|
||||
background: $panel-divider-color;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
|
||||
@ -32,7 +32,7 @@ a.mx_Pill {
|
||||
.mx_EventTile_content .markdown-body a.mx_GroupPill,
|
||||
.mx_GroupPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-group-pill-color;
|
||||
background-color: $rte-room-pill-color;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` text-decoration */
|
||||
@ -48,7 +48,7 @@ a.mx_Pill {
|
||||
}
|
||||
|
||||
.mx_UserPill_selected {
|
||||
background-color: $accent-color !important;
|
||||
background-color: $accent !important;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
@ -57,7 +57,7 @@ a.mx_Pill {
|
||||
.mx_EventTile_content .mx_AtRoomPill,
|
||||
.mx_MessageComposer_input .mx_AtRoomPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $mention-user-pill-bg-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
|
||||
@ -30,12 +30,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: $greyed-fg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mx_Field_prefix, .mx_Field_postfix {
|
||||
color: $greyed-fg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
font-weight: 600;
|
||||
|
||||
@ -46,13 +46,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_SSOButton_default {
|
||||
color: $button-primary-bg-color;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border-color: $button-primary-bg-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
.mx_SSOButton_default.mx_SSOButton_primary {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $button-primary-bg-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_SSOButton_mini {
|
||||
|
||||
@ -62,7 +62,6 @@ limitations under the License.
|
||||
color: $authpage-primary-color;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_ServerPicker_change {
|
||||
@ -73,7 +72,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ServerPicker_desc {
|
||||
margin-top: -12px;
|
||||
margin-top: 4px;
|
||||
color: $tertiary-content;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 3;
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
width: $slider-selection-dot-size;
|
||||
height: $slider-selection-dot-size;
|
||||
background-color: $slider-selection-color;
|
||||
background-color: $accent;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -72,7 +72,7 @@ limitations under the License.
|
||||
|
||||
.mx_Slider_selection > hr {
|
||||
margin: 0;
|
||||
border: 0.2em solid $slider-selection-color;
|
||||
border: 0.2em solid $accent;
|
||||
}
|
||||
|
||||
.mx_Slider_dot {
|
||||
@ -84,7 +84,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Slider_dotActive {
|
||||
background-color: $slider-selection-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_Slider_dotValue {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
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.
|
||||
@ -37,8 +38,28 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Spinner_icon {
|
||||
background-color: $primary-content;
|
||||
mask: url('$(res)/img/spinner.svg');
|
||||
mask-size: contain;
|
||||
animation: 1.1s steps(12, end) infinite spin;
|
||||
background-color: $quinary-content;
|
||||
mask: url('$(res)/img/spinner/spinner-background.svg');
|
||||
mask-size: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
mask: url('$(res)/img/spinner/spinner-foreground.svg');
|
||||
mask-size: 100%;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: "";
|
||||
display: flex;
|
||||
|
||||
animation: 1s linear spin infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,22 +48,20 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
border-radius: $border-radius;
|
||||
|
||||
img {
|
||||
.mx_Checkbox_checkmark {
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: invert(100%);
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
mask-position: center;
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: $accent-color;
|
||||
border-color: $accent-color;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& + label > *:not(.mx_Checkbox_background) {
|
||||
@ -75,11 +73,6 @@ limitations under the License.
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:checked:disabled + label > .mx_Checkbox_background {
|
||||
background-color: $accent-color;
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
&.focus-visible {
|
||||
& + label .mx_Checkbox_background {
|
||||
@mixin unreal-focus;
|
||||
@ -87,3 +80,25 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] {
|
||||
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: $accent;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
|
||||
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
|
||||
background: $accent;
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: transparent;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,16 +19,16 @@ limitations under the License.
|
||||
* width
|
||||
*/
|
||||
|
||||
.mx_RadioButton {
|
||||
$radio-circle-color: $muted-fg-color;
|
||||
$active-radio-circle-color: $accent-color;
|
||||
.mx_StyledRadioButton {
|
||||
$radio-circle-color: $quaternary-content;
|
||||
$active-radio-circle-color: $accent;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
|
||||
> .mx_RadioButton_content {
|
||||
> .mx_StyledRadioButton_content {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_spacer {
|
||||
.mx_StyledRadioButton_spacer {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
@ -113,18 +113,18 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_innerLabel {
|
||||
.mx_StyledRadioButton_innerLabel {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_outlined {
|
||||
.mx_StyledRadioButton_outlined {
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
.mx_StyledRadioButton_checked {
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ToggleSwitch.mx_ToggleSwitch_on {
|
||||
background-color: $togglesw-on-color;
|
||||
background-color: $accent;
|
||||
|
||||
> .mx_ToggleSwitch_ball {
|
||||
left: calc(100% - $font-20px);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user