Merge branches 'develop' and 't3chguy/ts/1' of github.com:matrix-org/matrix-react-sdk into t3chguy/ts/1
Conflicts: src/@types/global.d.ts
This commit is contained in:
Michael Telatynski
commit
6ef9a2474c
390 changed files with 5935 additions and 15427 deletions
273
CHANGELOG.md
273
CHANGELOG.md
|
|
@ -1,3 +1,276 @@
|
|||
Changes in [2.10.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.1) (2020-07-16)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.10.0...v2.10.1)
|
||||
|
||||
* Post-launch Element Web polish
|
||||
[\#5002](https://github.com/matrix-org/matrix-react-sdk/pull/5002)
|
||||
* Move e2e icon
|
||||
[\#4992](https://github.com/matrix-org/matrix-react-sdk/pull/4992)
|
||||
* Wire up new room list breadcrumbs as an ARIA Toolbar
|
||||
[\#4976](https://github.com/matrix-org/matrix-react-sdk/pull/4976)
|
||||
* Fix Room Tile Icon to not ignore DMs in other tags
|
||||
[\#4999](https://github.com/matrix-org/matrix-react-sdk/pull/4999)
|
||||
* Fix filtering by community not showing DM rooms with community members
|
||||
[\#4997](https://github.com/matrix-org/matrix-react-sdk/pull/4997)
|
||||
* Fix enter in new room list filter breaking things
|
||||
[\#4996](https://github.com/matrix-org/matrix-react-sdk/pull/4996)
|
||||
* Notify left panel of resizing when it is collapsed&expanded
|
||||
[\#4995](https://github.com/matrix-org/matrix-react-sdk/pull/4995)
|
||||
* When removing a filter condition, try recalculate in case it wasn't last
|
||||
[\#4994](https://github.com/matrix-org/matrix-react-sdk/pull/4994)
|
||||
* Create a generic ARIA toolbar component
|
||||
[\#4975](https://github.com/matrix-org/matrix-react-sdk/pull/4975)
|
||||
* Fix /op Slash Command
|
||||
[\#4604](https://github.com/matrix-org/matrix-react-sdk/pull/4604)
|
||||
* Fix copy button in share dialog
|
||||
[\#4998](https://github.com/matrix-org/matrix-react-sdk/pull/4998)
|
||||
* Add tooltip to Room Tile Icon
|
||||
[\#4987](https://github.com/matrix-org/matrix-react-sdk/pull/4987)
|
||||
* Fix names jumping on hover in irc layout
|
||||
[\#4991](https://github.com/matrix-org/matrix-react-sdk/pull/4991)
|
||||
* check that encryptionInfo.sender is set
|
||||
[\#4988](https://github.com/matrix-org/matrix-react-sdk/pull/4988)
|
||||
* Update help link
|
||||
[\#4986](https://github.com/matrix-org/matrix-react-sdk/pull/4986)
|
||||
* Update cover photo link
|
||||
[\#4985](https://github.com/matrix-org/matrix-react-sdk/pull/4985)
|
||||
|
||||
Changes in [2.10.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.10.0) (2020-07-15)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0...v2.10.0)
|
||||
|
||||
* Incorporate new toasts into end-to-end tests
|
||||
[\#4983](https://github.com/matrix-org/matrix-react-sdk/pull/4983)
|
||||
* Fix TS lint errors
|
||||
[\#4982](https://github.com/matrix-org/matrix-react-sdk/pull/4982)
|
||||
* Fix js lint errors after rebrand merge
|
||||
[\#4981](https://github.com/matrix-org/matrix-react-sdk/pull/4981)
|
||||
* Fix style lint
|
||||
[\#4980](https://github.com/matrix-org/matrix-react-sdk/pull/4980)
|
||||
* Fix alignment of login/syncing spinner
|
||||
[\#4979](https://github.com/matrix-org/matrix-react-sdk/pull/4979)
|
||||
* De labs font-scaling
|
||||
[\#4899](https://github.com/matrix-org/matrix-react-sdk/pull/4899)
|
||||
* Remove debug logging from new room list
|
||||
[\#4972](https://github.com/matrix-org/matrix-react-sdk/pull/4972)
|
||||
* Tweak sticky header hiding to avoid pop
|
||||
[\#4974](https://github.com/matrix-org/matrix-react-sdk/pull/4974)
|
||||
* Fix show-all keyboard focus regression
|
||||
[\#4973](https://github.com/matrix-org/matrix-react-sdk/pull/4973)
|
||||
* Clean up TODOs, comments, and imports in the new room list
|
||||
[\#4970](https://github.com/matrix-org/matrix-react-sdk/pull/4970)
|
||||
* Make EffectiveMembership utils generic
|
||||
[\#4971](https://github.com/matrix-org/matrix-react-sdk/pull/4971)
|
||||
* Update sticky headers when breadcrumbs pop in or out
|
||||
[\#4969](https://github.com/matrix-org/matrix-react-sdk/pull/4969)
|
||||
* Fix show less button occluding the last tile
|
||||
[\#4967](https://github.com/matrix-org/matrix-react-sdk/pull/4967)
|
||||
* Ensure breadcrumbs don't keep turning themselves back on
|
||||
[\#4968](https://github.com/matrix-org/matrix-react-sdk/pull/4968)
|
||||
* Update top vs. bottom sticky styles separately
|
||||
[\#4966](https://github.com/matrix-org/matrix-react-sdk/pull/4966)
|
||||
* Ensure RoomListStore2 gets reset when the client becomes invalidated
|
||||
[\#4965](https://github.com/matrix-org/matrix-react-sdk/pull/4965)
|
||||
* Add fade to show more button on room list
|
||||
[\#4963](https://github.com/matrix-org/matrix-react-sdk/pull/4963)
|
||||
* Fix extra room tiles being rendered on smaller sublists
|
||||
[\#4964](https://github.com/matrix-org/matrix-react-sdk/pull/4964)
|
||||
* Ensure tag changes (leaving rooms) causes rooms to move between lists
|
||||
[\#4962](https://github.com/matrix-org/matrix-react-sdk/pull/4962)
|
||||
* Fix badges for font size 20
|
||||
[\#4958](https://github.com/matrix-org/matrix-react-sdk/pull/4958)
|
||||
* Fix default sorting mechanics for new room list
|
||||
[\#4960](https://github.com/matrix-org/matrix-react-sdk/pull/4960)
|
||||
* Fix room sub list header collapse/jump interactions on bottom-most sublist
|
||||
[\#4961](https://github.com/matrix-org/matrix-react-sdk/pull/4961)
|
||||
* Fix room tile context menu for Historical rooms
|
||||
[\#4959](https://github.com/matrix-org/matrix-react-sdk/pull/4959)
|
||||
* "ignore"/"unignore" commands: validate user ID
|
||||
[\#4895](https://github.com/matrix-org/matrix-react-sdk/pull/4895)
|
||||
* Stop classname from overwritting baseavatar's
|
||||
[\#4957](https://github.com/matrix-org/matrix-react-sdk/pull/4957)
|
||||
* Remove redundant scroll-margins and fix RoomTile wrongly scrolling
|
||||
[\#4952](https://github.com/matrix-org/matrix-react-sdk/pull/4952)
|
||||
* Fix RoomAvatar viewAvatarOnClick to work on actual avatars instead of
|
||||
default ones
|
||||
[\#4953](https://github.com/matrix-org/matrix-react-sdk/pull/4953)
|
||||
* Be consistent with the at-room pill avatar configurability
|
||||
[\#4955](https://github.com/matrix-org/matrix-react-sdk/pull/4955)
|
||||
* Room List v2 Enter in the filter field should select the first result
|
||||
[\#4954](https://github.com/matrix-org/matrix-react-sdk/pull/4954)
|
||||
* Enable the new room list by default
|
||||
[\#4919](https://github.com/matrix-org/matrix-react-sdk/pull/4919)
|
||||
* Convert ImportanceAlgorithm over to using NotificationColor instead
|
||||
[\#4949](https://github.com/matrix-org/matrix-react-sdk/pull/4949)
|
||||
* Internalize algorithm updates in the new room list store
|
||||
[\#4951](https://github.com/matrix-org/matrix-react-sdk/pull/4951)
|
||||
* Remove now-dead code from sublist resizing
|
||||
[\#4950](https://github.com/matrix-org/matrix-react-sdk/pull/4950)
|
||||
* Ensure triggered updates get fired for filters in the new room list
|
||||
[\#4948](https://github.com/matrix-org/matrix-react-sdk/pull/4948)
|
||||
* Handle off-cycle filtering updates in the new room list
|
||||
[\#4947](https://github.com/matrix-org/matrix-react-sdk/pull/4947)
|
||||
* Make the show more button do a clean cut on the room list while transparent
|
||||
[\#4941](https://github.com/matrix-org/matrix-react-sdk/pull/4941)
|
||||
* Stop safari from aggressively shrinking flex items
|
||||
[\#4945](https://github.com/matrix-org/matrix-react-sdk/pull/4945)
|
||||
* Fix search padding
|
||||
[\#4946](https://github.com/matrix-org/matrix-react-sdk/pull/4946)
|
||||
* Reduce event loop load caused by duplicate calculations in the new room list
|
||||
[\#4943](https://github.com/matrix-org/matrix-react-sdk/pull/4943)
|
||||
* Add an option to disable room list logging, and improve logging
|
||||
[\#4944](https://github.com/matrix-org/matrix-react-sdk/pull/4944)
|
||||
* Scroll fade for breadcrumbs
|
||||
[\#4942](https://github.com/matrix-org/matrix-react-sdk/pull/4942)
|
||||
* Auto expand room list on search
|
||||
[\#4927](https://github.com/matrix-org/matrix-react-sdk/pull/4927)
|
||||
* Fix rough badge alignment for community invite tiles again
|
||||
[\#4939](https://github.com/matrix-org/matrix-react-sdk/pull/4939)
|
||||
* Improve safety of new rooms in the room list
|
||||
[\#4940](https://github.com/matrix-org/matrix-react-sdk/pull/4940)
|
||||
* Don't destroy room notification states when replacing them
|
||||
[\#4938](https://github.com/matrix-org/matrix-react-sdk/pull/4938)
|
||||
* Move irc layout option to advanced
|
||||
[\#4937](https://github.com/matrix-org/matrix-react-sdk/pull/4937)
|
||||
* Potential solution to supporting transparent 'show more' buttons
|
||||
[\#4932](https://github.com/matrix-org/matrix-react-sdk/pull/4932)
|
||||
* Improve performance and stability in sticky headers for new room list
|
||||
[\#4931](https://github.com/matrix-org/matrix-react-sdk/pull/4931)
|
||||
* Move and improve notification state handling
|
||||
[\#4935](https://github.com/matrix-org/matrix-react-sdk/pull/4935)
|
||||
* Move list layout management to its own store
|
||||
[\#4934](https://github.com/matrix-org/matrix-react-sdk/pull/4934)
|
||||
* Noop first breadcrumb
|
||||
[\#4933](https://github.com/matrix-org/matrix-react-sdk/pull/4933)
|
||||
* Highlight "Jump to Bottom" badge when appropriate
|
||||
[\#4892](https://github.com/matrix-org/matrix-react-sdk/pull/4892)
|
||||
* Don't render the context menu within its trigger otherwise unhandled clicks
|
||||
bubble
|
||||
[\#4930](https://github.com/matrix-org/matrix-react-sdk/pull/4930)
|
||||
* Protect rooms from getting lost due to complex transitions
|
||||
[\#4929](https://github.com/matrix-org/matrix-react-sdk/pull/4929)
|
||||
* Hide archive button
|
||||
[\#4928](https://github.com/matrix-org/matrix-react-sdk/pull/4928)
|
||||
* Enable options to favourite and low priority rooms
|
||||
[\#4920](https://github.com/matrix-org/matrix-react-sdk/pull/4920)
|
||||
* Move voip previews to bottom right corner
|
||||
[\#4904](https://github.com/matrix-org/matrix-react-sdk/pull/4904)
|
||||
* Focus room filter on openSearch
|
||||
[\#4923](https://github.com/matrix-org/matrix-react-sdk/pull/4923)
|
||||
* Swap out the resizer lib for something more stable in the new room list
|
||||
[\#4924](https://github.com/matrix-org/matrix-react-sdk/pull/4924)
|
||||
* Add wrapper to room list so sticky headers don't need a background
|
||||
[\#4912](https://github.com/matrix-org/matrix-react-sdk/pull/4912)
|
||||
* New room list view_room show_room_tile support
|
||||
[\#4908](https://github.com/matrix-org/matrix-react-sdk/pull/4908)
|
||||
* Convert Context Menu to TypeScript
|
||||
[\#4871](https://github.com/matrix-org/matrix-react-sdk/pull/4871)
|
||||
* Use html innerText for org.matrix.custom.html m.room.message room list
|
||||
previews
|
||||
[\#4925](https://github.com/matrix-org/matrix-react-sdk/pull/4925)
|
||||
* Fix MELS summary of 3pid invite revocations
|
||||
[\#4913](https://github.com/matrix-org/matrix-react-sdk/pull/4913)
|
||||
* Fix sticky headers being left on display:none if they change too quickly
|
||||
[\#4926](https://github.com/matrix-org/matrix-react-sdk/pull/4926)
|
||||
* Fix gaps under resize handle
|
||||
[\#4922](https://github.com/matrix-org/matrix-react-sdk/pull/4922)
|
||||
* Fix DM handling in new room list
|
||||
[\#4921](https://github.com/matrix-org/matrix-react-sdk/pull/4921)
|
||||
* Respect and fix understanding of legacy options in new room list
|
||||
[\#4918](https://github.com/matrix-org/matrix-react-sdk/pull/4918)
|
||||
* Ensure DMs are not lost in the new room list, and clean up tag logging
|
||||
[\#4916](https://github.com/matrix-org/matrix-react-sdk/pull/4916)
|
||||
* Mute "Unknown room caused setting update" spam
|
||||
[\#4915](https://github.com/matrix-org/matrix-react-sdk/pull/4915)
|
||||
* Remove comment claiming encrypted rooms are handled incorrectly in the new
|
||||
room list
|
||||
[\#4917](https://github.com/matrix-org/matrix-react-sdk/pull/4917)
|
||||
* Try using requestAnimationFrame if available for sticky headers
|
||||
[\#4914](https://github.com/matrix-org/matrix-react-sdk/pull/4914)
|
||||
* Show more/Show less keep focus in a relevant place
|
||||
[\#4911](https://github.com/matrix-org/matrix-react-sdk/pull/4911)
|
||||
* Change orange to our orange and do some lints
|
||||
[\#4910](https://github.com/matrix-org/matrix-react-sdk/pull/4910)
|
||||
* New Room List implement view_room_delta for keyboard shortcuts
|
||||
[\#4900](https://github.com/matrix-org/matrix-react-sdk/pull/4900)
|
||||
* New Room List accessibility
|
||||
[\#4896](https://github.com/matrix-org/matrix-react-sdk/pull/4896)
|
||||
* Improve room safety in the new room list
|
||||
[\#4905](https://github.com/matrix-org/matrix-react-sdk/pull/4905)
|
||||
* Fix a number of issues with the new room list's invites
|
||||
[\#4906](https://github.com/matrix-org/matrix-react-sdk/pull/4906)
|
||||
* Decrease default visible rooms down to 5
|
||||
[\#4907](https://github.com/matrix-org/matrix-react-sdk/pull/4907)
|
||||
* swap order of context menu buttons so it does not jump when muted
|
||||
[\#4909](https://github.com/matrix-org/matrix-react-sdk/pull/4909)
|
||||
* Fix some room list sticky header instabilities
|
||||
[\#4901](https://github.com/matrix-org/matrix-react-sdk/pull/4901)
|
||||
* null-guard against groups with a null name in new Room List
|
||||
[\#4903](https://github.com/matrix-org/matrix-react-sdk/pull/4903)
|
||||
* Allow vertical scrolling on the new room list breadcrumbs
|
||||
[\#4902](https://github.com/matrix-org/matrix-react-sdk/pull/4902)
|
||||
* Convert things to Typescript, including languageHandler
|
||||
[\#4883](https://github.com/matrix-org/matrix-react-sdk/pull/4883)
|
||||
* Fix minor issues with the badges in the new room list
|
||||
[\#4894](https://github.com/matrix-org/matrix-react-sdk/pull/4894)
|
||||
* Radio button outline fixes including for new room list context menu
|
||||
[\#4893](https://github.com/matrix-org/matrix-react-sdk/pull/4893)
|
||||
* First step towards a11y in the new room list
|
||||
[\#4882](https://github.com/matrix-org/matrix-react-sdk/pull/4882)
|
||||
* Fix theme selector clicks bubbling out and causing context menu to float
|
||||
away
|
||||
[\#4891](https://github.com/matrix-org/matrix-react-sdk/pull/4891)
|
||||
* Revert "Remove a bunch of noisy logging from the room list"
|
||||
[\#4890](https://github.com/matrix-org/matrix-react-sdk/pull/4890)
|
||||
* Remove duplicate compact settings, handle device level updates
|
||||
[\#4888](https://github.com/matrix-org/matrix-react-sdk/pull/4888)
|
||||
* fix notifications icons some more
|
||||
[\#4887](https://github.com/matrix-org/matrix-react-sdk/pull/4887)
|
||||
* Remove a bunch of noisy logging from the room list
|
||||
[\#4886](https://github.com/matrix-org/matrix-react-sdk/pull/4886)
|
||||
* Fix bell icon mismatch on room tile between hover and context menu
|
||||
[\#4884](https://github.com/matrix-org/matrix-react-sdk/pull/4884)
|
||||
* Add a null guard for message event previews
|
||||
[\#4885](https://github.com/matrix-org/matrix-react-sdk/pull/4885)
|
||||
* Enable the new room list by default and trigger an initial render
|
||||
[\#4881](https://github.com/matrix-org/matrix-react-sdk/pull/4881)
|
||||
* Fix selection states of room tiles in the new room list
|
||||
[\#4879](https://github.com/matrix-org/matrix-react-sdk/pull/4879)
|
||||
* Update mute icon behaviour for new room list designs
|
||||
[\#4876](https://github.com/matrix-org/matrix-react-sdk/pull/4876)
|
||||
* Fix alignment of avatars on community invites
|
||||
[\#4878](https://github.com/matrix-org/matrix-react-sdk/pull/4878)
|
||||
* Don't include empty badge container in minimized view
|
||||
[\#4880](https://github.com/matrix-org/matrix-react-sdk/pull/4880)
|
||||
* Fix alignment of dot badges in new room list
|
||||
[\#4877](https://github.com/matrix-org/matrix-react-sdk/pull/4877)
|
||||
* Reorganize and match new room list badges to old list behaviour
|
||||
[\#4861](https://github.com/matrix-org/matrix-react-sdk/pull/4861)
|
||||
* Implement breadcrumb notifications and scrolling
|
||||
[\#4862](https://github.com/matrix-org/matrix-react-sdk/pull/4862)
|
||||
* Add click-to-jump on badge in the room sublist header
|
||||
[\#4875](https://github.com/matrix-org/matrix-react-sdk/pull/4875)
|
||||
* Room List v2 context menu interactions
|
||||
[\#4870](https://github.com/matrix-org/matrix-react-sdk/pull/4870)
|
||||
* Wedge community invites into the new room list
|
||||
[\#4874](https://github.com/matrix-org/matrix-react-sdk/pull/4874)
|
||||
* Check whether crypto is enabled in room recovery reminder
|
||||
[\#4873](https://github.com/matrix-org/matrix-react-sdk/pull/4873)
|
||||
* Fix room list 2's room tile wrapping wrongly
|
||||
[\#4872](https://github.com/matrix-org/matrix-react-sdk/pull/4872)
|
||||
* Hide scrollbar without pixel jumping
|
||||
[\#4863](https://github.com/matrix-org/matrix-react-sdk/pull/4863)
|
||||
* Room Tile context menu, notifications, indicator and placement
|
||||
[\#4858](https://github.com/matrix-org/matrix-react-sdk/pull/4858)
|
||||
* Improve resizing interactions in the new room list
|
||||
[\#4865](https://github.com/matrix-org/matrix-react-sdk/pull/4865)
|
||||
* Disable use of account-level ordering options in new room list
|
||||
[\#4866](https://github.com/matrix-org/matrix-react-sdk/pull/4866)
|
||||
* Remove context menu on invites in new room list
|
||||
[\#4867](https://github.com/matrix-org/matrix-react-sdk/pull/4867)
|
||||
* Fix reaction event crashes in message previews
|
||||
[\#4868](https://github.com/matrix-org/matrix-react-sdk/pull/4868)
|
||||
|
||||
Changes in [2.9.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.9.0) (2020-07-03)
|
||||
===================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.9.0-rc.1...v2.9.0)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "2.9.0",
|
||||
"version": "2.10.1",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
// these things should probably not be defined
|
||||
// globally
|
||||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
// these things should probably not be defined globally
|
||||
margin: 9px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -175,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
|
||||
.mx_textinput input::placeholder {
|
||||
color: $roomsublist-label-fg-color;
|
||||
color: rgba($input-darker-fg-color, .75);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
}
|
||||
|
||||
#mx_theme_tertiaryAccentColor {
|
||||
color: $roomsublist-label-bg-color;
|
||||
color: $tertiary-accent-color;
|
||||
}
|
||||
|
||||
/* Expected z-indexes for dialogs:
|
||||
|
|
@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
padding: 25px 30px 30px 30px;
|
||||
max-height: 80%;
|
||||
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -622,12 +621,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
|
||||
// round the top corners of the top button for the hover effect to be bounded
|
||||
&:first-child .mx_AccessibleButton:first-child {
|
||||
border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu
|
||||
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
// round the bottom corners of the bottom button for the hover effect to be bounded
|
||||
&:last-child .mx_AccessibleButton:last-child {
|
||||
border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu
|
||||
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
@import "./structures/_HeaderButtons.scss";
|
||||
@import "./structures/_HomePage.scss";
|
||||
@import "./structures/_LeftPanel.scss";
|
||||
@import "./structures/_LeftPanel2.scss";
|
||||
@import "./structures/_MainSplit.scss";
|
||||
@import "./structures/_MatrixChat.scss";
|
||||
@import "./structures/_MyGroups.scss";
|
||||
|
|
@ -21,14 +20,12 @@
|
|||
@import "./structures/_RoomDirectory.scss";
|
||||
@import "./structures/_RoomSearch.scss";
|
||||
@import "./structures/_RoomStatusBar.scss";
|
||||
@import "./structures/_RoomSubList.scss";
|
||||
@import "./structures/_RoomView.scss";
|
||||
@import "./structures/_ScrollPanel.scss";
|
||||
@import "./structures/_SearchBox.scss";
|
||||
@import "./structures/_TabbedView.scss";
|
||||
@import "./structures/_TagPanel.scss";
|
||||
@import "./structures/_ToastContainer.scss";
|
||||
@import "./structures/_TopLeftMenuButton.scss";
|
||||
@import "./structures/_UploadBar.scss";
|
||||
@import "./structures/_UserMenu.scss";
|
||||
@import "./structures/_ViewSource.scss";
|
||||
|
|
@ -73,6 +70,7 @@
|
|||
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
|
||||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
@import "./views/dialogs/_RebrandDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeDialog.scss";
|
||||
|
|
@ -107,7 +105,6 @@
|
|||
@import "./views/elements/_IconButton.scss";
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
@import "./views/elements/_InlineSpinner.scss";
|
||||
@import "./views/elements/_InteractiveTooltip.scss";
|
||||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_PowerSelector.scss";
|
||||
@import "./views/elements/_ProgressBar.scss";
|
||||
|
|
@ -145,7 +142,6 @@
|
|||
@import "./views/messages/_MjolnirBody.scss";
|
||||
@import "./views/messages/_ReactionsRow.scss";
|
||||
@import "./views/messages/_ReactionsRowButton.scss";
|
||||
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
|
||||
@import "./views/messages/_RedactedBody.scss";
|
||||
@import "./views/messages/_RoomAvatarEvent.scss";
|
||||
@import "./views/messages/_SenderProfile.scss";
|
||||
|
|
@ -168,7 +164,6 @@
|
|||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_GroupLayout.scss";
|
||||
@import "./views/rooms/_IRCLayout.scss";
|
||||
@import "./views/rooms/_InviteOnlyIcon.scss";
|
||||
@import "./views/rooms/_JumpToBottomButton.scss";
|
||||
@import "./views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./views/rooms/_MemberInfo.scss";
|
||||
|
|
@ -181,23 +176,18 @@
|
|||
@import "./views/rooms/_PresenceLabel.scss";
|
||||
@import "./views/rooms/_ReplyPreview.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs2.scss";
|
||||
@import "./views/rooms/_RoomDropTarget.scss";
|
||||
@import "./views/rooms/_RoomHeader.scss";
|
||||
@import "./views/rooms/_RoomList.scss";
|
||||
@import "./views/rooms/_RoomList2.scss";
|
||||
@import "./views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./views/rooms/_RoomRecoveryReminder.scss";
|
||||
@import "./views/rooms/_RoomSublist2.scss";
|
||||
@import "./views/rooms/_RoomSublist.scss";
|
||||
@import "./views/rooms/_RoomTile.scss";
|
||||
@import "./views/rooms/_RoomTile2.scss";
|
||||
@import "./views/rooms/_RoomTileIcon.scss";
|
||||
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
|
||||
@import "./views/rooms/_SearchBar.scss";
|
||||
@import "./views/rooms/_SendMessageComposer.scss";
|
||||
@import "./views/rooms/_Stickers.scss";
|
||||
@import "./views/rooms/_TopUnreadMessagesBar.scss";
|
||||
@import "./views/rooms/_UserOnlineDot.scss";
|
||||
@import "./views/rooms/_WhoIsTypingTile.scss";
|
||||
@import "./views/settings/_AvatarSetting.scss";
|
||||
@import "./views/settings/_CrossSigningPanel.scss";
|
||||
|
|
@ -228,6 +218,4 @@
|
|||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_CallView2.scss";
|
||||
@import "./views/voip/_IncomingCallbox.scss";
|
||||
@import "./views/voip/_VideoView.scss";
|
||||
|
|
|
|||
|
|
@ -68,5 +68,6 @@ $font-49px: 4.9rem;
|
|||
$font-50px: 5.0rem;
|
||||
$font-51px: 5.1rem;
|
||||
$font-52px: 5.2rem;
|
||||
$font-78px: 7.8rem;
|
||||
$font-88px: 8.8rem;
|
||||
$font-400px: 40rem;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ limitations under the License.
|
|||
align-items: center;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_view {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 19px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -63,11 +63,11 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_GroupHeader_editButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_GroupHeader_shareButton::before {
|
||||
mask-image: url('$(res)/img/icons-share.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/share.svg');
|
||||
}
|
||||
|
||||
.mx_GroupView_hostingSignup img {
|
||||
|
|
@ -182,6 +182,7 @@ limitations under the License.
|
|||
|
||||
.mx_GroupView_body {
|
||||
flex-grow: 1;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms {
|
||||
|
|
@ -250,6 +251,7 @@ limitations under the License.
|
|||
.mx_GroupView_membershipSubSection {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSubSection .mx_Spinner {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
content: "";
|
||||
background-color: $header-divider-color;
|
||||
opacity: 0.5;
|
||||
margin: 0 15px;
|
||||
margin: 6px 8px;
|
||||
border-radius: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ limitations under the License.
|
|||
|
||||
&:hover {
|
||||
color: $accent-color;
|
||||
background: rgba(#03b381, 0.06);
|
||||
background: rgba($accent-color, 0.06);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -15,164 +14,182 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_LeftPanel_container {
|
||||
display: flex;
|
||||
/* LeftPanel 260px */
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed {
|
||||
min-width: unset;
|
||||
/* Collapsed LeftPanel 50px */
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 70px + Collapsed LeftPanel 50px */
|
||||
flex: 0 0 120px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
flex: 0 0 70px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
$tagPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
background-color: $roomlist-bg-color;
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
|
||||
.mx_LeftPanel .mx_AppTile_mini {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_RoomList_scrollbar {
|
||||
order: 1;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
overflow-y: auto;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid $panel-divider-color;
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
flex: 0 0 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_RoleButton {
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreAndFilterRow {
|
||||
// Create a row-based flexbox for the TagPanel and the room list
|
||||
display: flex;
|
||||
|
||||
.mx_SearchBox {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
margin: 4px 9px 1px 9px;
|
||||
}
|
||||
}
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $tagPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
.mx_LeftPanel_explore {
|
||||
flex: 0 0 50%;
|
||||
overflow: hidden;
|
||||
transition: flex-basis 0.2s;
|
||||
box-sizing: border-box;
|
||||
// Create another flexbox so the TagPanel fills the container
|
||||
display: flex;
|
||||
|
||||
&.mx_LeftPanel_explore_hidden {
|
||||
flex-basis: 0;
|
||||
// TagPanel handles its own CSS
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
font-size: $font-14px;
|
||||
margin: 4px 0 1px 9px;
|
||||
padding: 9px;
|
||||
padding-left: 42px;
|
||||
font-weight: 600;
|
||||
color: $notice-secondary-color;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-bg-color;
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: calc(100% - $tagPanelWidth);
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_LeftPanel_userHeader {
|
||||
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
|
||||
* for internal whitespace in the breadcrumbs)
|
||||
*/
|
||||
padding: 12px;
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create another flexbox column for the rows to stack within
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&::before {
|
||||
cursor: pointer;
|
||||
mask: url('$(res)/img/explore.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
content: "";
|
||||
left: 14px;
|
||||
top: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $notice-secondary-color;
|
||||
position: absolute;
|
||||
.mx_LeftPanel_breadcrumbsContainer {
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
margin: 12px 12px 0 12px;
|
||||
flex: 0 0 auto;
|
||||
// Create yet another flexbox, this time within the row, to ensure items stay
|
||||
// aligned correctly. This is also a row-based flexbox.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 5%);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow {
|
||||
mask-image: linear-gradient(90deg, black, black 95%, transparent);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create a flexbox to organize the inputs
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
|
||||
// Cheaty way to return the occupied space to the filter input
|
||||
flex-basis: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
|
||||
// Don't forget to hide the masked ::before icon,
|
||||
// using display:none or visibility:hidden would break accessibility
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/compass.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListWrapper {
|
||||
// Create a flexbox to ensure the containing items cause appropriate overflow.
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin-top: 10px; // so we're not up against the search/filter
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyBottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyTop {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_actualRoomListContainer {
|
||||
flex-grow: 1; // fill the available space
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative; // for sticky headers
|
||||
|
||||
// Create a flexbox to trick the layout engine
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel_minimized {
|
||||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
&.mx_LeftPanel_hasTagPanel {
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
}
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: 68px;
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
$tagPanelWidth: 70px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel2 {
|
||||
background-color: $roomlist2-bg-color;
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
|
||||
// Create a row-based flexbox for the TagPanel and the room list
|
||||
display: flex;
|
||||
|
||||
.mx_LeftPanel2_tagPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $tagPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
// Create another flexbox so the TagPanel fills the container
|
||||
display: flex;
|
||||
|
||||
// TagPanel handles its own CSS
|
||||
}
|
||||
|
||||
&:not(.mx_LeftPanel2_hasTagPanel) {
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: calc(100% - $tagPanelWidth);
|
||||
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_LeftPanel2_userHeader {
|
||||
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
|
||||
* for internal whitespace in the breadcrumbs)
|
||||
*/
|
||||
padding: 12px 12px 13px;
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create another flexbox column for the rows to stack within
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// This is basically just breadcrumbs. The row above that is handled by the UserMenu
|
||||
.mx_LeftPanel2_headerRow {
|
||||
// Create yet another flexbox, this time within the row, to ensure items stay
|
||||
// aligned correctly. This is also a row-based flexbox.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_breadcrumbsContainer {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 10%);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow {
|
||||
mask-image: linear-gradient(90deg, black, black 90%, transparent);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_filterContainer {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create a flexbox to organize the inputs
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
|
||||
// Cheaty way to return the occupied space to the filter input
|
||||
flex-basis: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
|
||||
// Don't forget to hide the masked ::before icon,
|
||||
// using display:none or visibility:hidden would break accessibility
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_exploreButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/compass.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_roomListWrapper {
|
||||
// Create a flexbox to ensure the containing items cause appropriate overflow.
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin-top: 12px; // so we're not up against the search/filter
|
||||
|
||||
&.mx_LeftPanel2_roomListWrapper_stickyBottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel2_roomListWrapper_stickyTop {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_actualRoomListContainer {
|
||||
flex-grow: 1; // fill the available space
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative; // for sticky headers
|
||||
|
||||
// Create a flexbox to trick the layout engine
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel2_minimized {
|
||||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
&.mx_LeftPanel2_hasTagPanel {
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
}
|
||||
&:not(.mx_LeftPanel2_hasTagPanel) {
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: 68px;
|
||||
|
||||
.mx_LeftPanel2_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_LeftPanel2_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_LeftPanel2):not(.mx_ResizeHandle) {
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,13 @@ limitations under the License.
|
|||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
margin: 5px;
|
||||
padding: 4px 0;
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_header {
|
||||
|
|
@ -44,22 +51,20 @@ limitations under the License.
|
|||
.mx_RightPanel_headerButton {
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: top;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 4px; // center with parent of 32px
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $rightpanel-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
|
|
@ -67,38 +72,46 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RightPanel_membersButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/user.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_filesButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/files.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/files.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_notifsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_groupMembersButton::before {
|
||||
mask-image: url('$(res)/img/icons-people.svg');
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_roomsButton::before {
|
||||
mask-image: url('$(res)/img/icons-room-nobg.svg');
|
||||
mask-image: url('$(res)/img/element-icons/community-rooms.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: $button-bg-color;
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
background: rgba($accent-color, 0.25);
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ limitations under the License.
|
|||
.mx_RoomSearch {
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
height: 26px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
|
||||
// Create a flexbox for the icons (easier to manage)
|
||||
|
|
|
|||
|
|
@ -1,187 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket 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.
|
||||
*/
|
||||
|
||||
/* a word of explanation about the flex-shrink values employed here:
|
||||
there are 3 priotized categories of screen real-estate grabbing,
|
||||
each with a flex-shrink difference of 4 order of magnitude,
|
||||
so they ideally wouldn't affect each other.
|
||||
lowest category: .mx_RoomSubList
|
||||
flex-shrink: 10000000
|
||||
distribute size of items within the same category by their size
|
||||
middle category: .mx_RoomSubList.resized-sized
|
||||
flex-shrink: 1000
|
||||
applied when using the resizer, will have a max-height set to it,
|
||||
to limit the size
|
||||
highest category: .mx_RoomSubList.resized-all
|
||||
flex-shrink: 1
|
||||
small flex-shrink value (1), is only added if you can drag the resizer so far
|
||||
so in practice you can only assign this category if there is enough space.
|
||||
*/
|
||||
|
||||
.mx_RoomSubList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin: 0 8px;
|
||||
padding: 0 8px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer.focus-visible:focus-within {
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label > span {
|
||||
flex: 1 1 auto;
|
||||
text-transform: uppercase;
|
||||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 700;
|
||||
font-size: $font-12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badge > div {
|
||||
flex: 0 0 auto;
|
||||
border-radius: $font-16px;
|
||||
font-weight: 600;
|
||||
font-size: $font-12px;
|
||||
padding: 0 5px;
|
||||
color: $roomtile-badge-fg-color;
|
||||
background-color: $roomtile-name-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom {
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
border-radius: 10px; // 16/2 + 2 padding
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask: url('$(res)/img/icons-room-add.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badgeHighlight > div {
|
||||
color: $accent-fg-color;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevron {
|
||||
pointer-events: none;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
transition: transform 0.2s ease-in;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
margin-left: 2px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronDown {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronUp {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_scroll {
|
||||
/* let rooms list grab as much space as it needs (auto),
|
||||
potentially overflowing and showing a scrollbar */
|
||||
flex: 0 1 auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
.mx_RoomSubList_scroll {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer {
|
||||
margin-right: 8px;
|
||||
margin-left: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom {
|
||||
margin-left: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// overflow indicators
|
||||
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
|
||||
&.mx_IndicatorScrollbar_topOverflow::before {
|
||||
position: sticky;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
z-index: 100;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
transition: background-image 0.1s ease-in;
|
||||
background: linear-gradient(to top, $panel-gradient);
|
||||
}
|
||||
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
|
|||
.mx_RoomView_voipButton {
|
||||
float: right;
|
||||
margin-right: 13px;
|
||||
margin-top: 10px;
|
||||
margin-top: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ limitations under the License.
|
|||
.mx_TagPanel .mx_TagPanel_clearButton_container {
|
||||
/* Constant height within flex mx_TagPanel */
|
||||
height: 70px;
|
||||
width: 60px;
|
||||
width: 56px;
|
||||
|
||||
flex: none;
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ limitations under the License.
|
|||
|
||||
.mx_TagPanel .mx_TagPanel_divider {
|
||||
height: 0px;
|
||||
width: 42px;
|
||||
width: 34px;
|
||||
border-bottom: 1px solid $panel-divider-color;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -66,15 +66,13 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
height: 40px;
|
||||
padding: 10px 0 9px 0;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile {
|
||||
margin: 9px 0;
|
||||
// opacity: 0.5;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -86,8 +84,8 @@ limitations under the License.
|
|||
|
||||
.mx_TagPanel .mx_TagTile_plus {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
position: relative;
|
||||
|
|
@ -159,7 +157,7 @@ limitations under the License.
|
|||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
padding: 0 5px;
|
||||
background-color: $roomtile-name-color;
|
||||
background-color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_TagTile_badgeHighlight {
|
||||
|
|
|
|||
|
|
@ -48,14 +48,17 @@ limitations under the License.
|
|||
padding: 8px;
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
&::after {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-size: 100%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification::after {
|
||||
|
|
@ -63,8 +66,22 @@ limitations under the License.
|
|||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning::after {
|
||||
background-image: url("$(res)/img/e2e/warning.svg");
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
// white infill for the hollow svg mask
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-size: 90%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mask-image: url("$(res)/img/e2e/warning.svg");
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_element_logo::after {
|
||||
background-image: url("$(res)/img/element-logo.svg");
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
|
|
|
|||
|
|
@ -1,49 +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_TopLeftMenuButton {
|
||||
flex: 0 0 52px;
|
||||
border-bottom: 1px solid $panel-divider-color;
|
||||
color: $topleftmenu-color;
|
||||
background-color: $primary-bg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton .mx_BaseAvatar {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton_name {
|
||||
margin: 0 7px;
|
||||
font-size: $font-18px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton_chevron {
|
||||
margin: 0 7px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
width: $font-22px;
|
||||
height: 6px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
|
|
@ -15,6 +15,10 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_UserMenu {
|
||||
|
||||
// to make the ... button sort of aligned with the explore button below
|
||||
padding-right: 6px;
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -32,7 +36,7 @@ limitations under the License.
|
|||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,6 +52,7 @@ limitations under the License.
|
|||
|
||||
.mx_UserMenu_userAvatar {
|
||||
border-radius: 32px; // should match avatar size
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -167,30 +172,30 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_UserMenu_iconHome::before {
|
||||
mask-image: url('$(res)/img/feather-customised/home.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconBell::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconLock::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSettings::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconArchive::before {
|
||||
mask-image: url('$(res)/img/feather-customised/archive.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMessage::before {
|
||||
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,6 +128,11 @@ limitations under the License.
|
|||
margin-top: 16px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
.mx_InlineSpinner img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter_subtitle {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
|
||||
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_TagTileContextMenu_item {
|
||||
padding-top: 8px;
|
||||
padding: 8px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
|
|
@ -25,15 +24,22 @@ limitations under the License.
|
|||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_item object {
|
||||
pointer-events: none;
|
||||
.mx_TagTileContextMenu_item::before {
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: currentColor;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_viewCommunity::before {
|
||||
mask-image: url('$(res)/img/element-icons/view-community.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_item_icon {
|
||||
padding-right: 8px;
|
||||
padding-left: 4px;
|
||||
display: inline-block;
|
||||
.mx_TagTileContextMenu_hideCommunity::before {
|
||||
mask-image: url('$(res)/img/element-icons/hide.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_separator {
|
||||
|
|
|
|||
63
res/css/views/dialogs/_RebrandDialog.scss
Normal file
63
res/css/views/dialogs/_RebrandDialog.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
Copyright 2020 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_RebrandDialog {
|
||||
text-align: center;
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
@mixin mx_Dialog_link;
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
margin-top: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_body {
|
||||
width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_logoContainer {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_logo {
|
||||
margin-left: 28px;
|
||||
margin-right: 28px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_chevron::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $muted-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
|
||||
}
|
||||
|
|
@ -18,19 +18,19 @@ limitations under the License.
|
|||
// ==========================================================
|
||||
|
||||
.mx_RoomSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_securityIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_rolesIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/settings/roles.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_notificationsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_bridgesIcon::before {
|
||||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSettingsDialog_warningIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog .mx_Dialog_title {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: none;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mx_ShareDialog_split {
|
||||
|
|
|
|||
|
|
@ -18,41 +18,41 @@ limitations under the License.
|
|||
// ==========================================================
|
||||
|
||||
.mx_UserSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_appearanceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/brush.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_voiceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_bellIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_preferencesIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sliders.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/preference.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_securityIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_helpIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/help.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_labsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/flag.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_mjolnirIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/face.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_flairIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/flair.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/flair.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -191,5 +191,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Field .mx_CountryDropdown {
|
||||
width: 67px;
|
||||
width: $font-78px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 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: 3px;
|
||||
background-color: $interactive-tooltip-bg-color;
|
||||
color: $interactive-tooltip-fg-color;
|
||||
position: absolute;
|
||||
font-size: $font-10px;
|
||||
font-weight: 600;
|
||||
padding: 6px;
|
||||
z-index: 5001;
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
|
||||
top: 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 $interactive-tooltip-bg-color;
|
||||
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.mx_InteractiveTooltip_withChevron_bottom {
|
||||
bottom: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.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 $interactive-tooltip-bg-color;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -23,16 +23,6 @@ limitations under the License.
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_Spinner_spin img {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MatrixChat_middlePanel .mx_Spinner {
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,21 +51,27 @@ limitations under the License.
|
|||
.mx_Tooltip {
|
||||
display: none;
|
||||
position: fixed;
|
||||
border: 1px solid $menu-border-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
line-height: $font-14px;
|
||||
font-size: $font-12px;
|
||||
font-weight: 600;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 500;
|
||||
max-width: 200px;
|
||||
word-break: break-word;
|
||||
margin-right: 50px;
|
||||
|
||||
background-color: $inverted-bg-color;
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
|
||||
.mx_Tooltip_chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_Tooltip_visible {
|
||||
animation: mx_fadein 0.2s forwards;
|
||||
}
|
||||
|
|
@ -75,18 +81,23 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_Tooltip_timeline {
|
||||
box-shadow: none;
|
||||
background-color: $tooltip-timeline-bg-color;
|
||||
color: $tooltip-timeline-fg-color;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: $font-14px;
|
||||
line-height: 1.2;
|
||||
padding: 6px 8px;
|
||||
// These tooltips use an older style with a chevron
|
||||
.mx_Field_tooltip {
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
border: 1px solid $menu-border-color;
|
||||
text-align: unset;
|
||||
|
||||
.mx_Tooltip_chevron::after {
|
||||
border-right-color: $tooltip-timeline-bg-color;
|
||||
.mx_Tooltip_chevron {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Tooltip_title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_Tooltip_sub {
|
||||
opacity: 0.7;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,17 +91,17 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageActionBar_reactButton::after {
|
||||
mask-image: url('$(res)/img/react.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_replyButton::after {
|
||||
mask-image: url('$(res)/img/reply.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_editButton::after {
|
||||
mask-image: url('$(res)/img/edit.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_optionsButton::after {
|
||||
mask-image: url('$(res)/img/icon_context.svg');
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ limitations under the License.
|
|||
|
||||
.mx_ReactionsRowButton {
|
||||
display: inline-flex;
|
||||
height: 20px;
|
||||
line-height: $font-21px;
|
||||
margin-right: 6px;
|
||||
padding: 0 6px;
|
||||
|
|
@ -35,11 +34,6 @@ limitations under the License.
|
|||
border-color: $reaction-row-button-selected-border-color;
|
||||
}
|
||||
|
||||
// ignore mouse events for all children, treat it as one entire hoverable entity
|
||||
* {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_ReactionsRowButton_content {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -15,28 +15,45 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_cryptoEvent {
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) min-content;
|
||||
|
||||
&.mx_cryptoEvent_icon::before,
|
||||
&.mx_cryptoEvent_icon::after {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
background-image: url("$(res)/img/e2e/normal.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
// white infill for the transparency
|
||||
&.mx_cryptoEvent_icon::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 90%;
|
||||
}
|
||||
|
||||
&.mx_cryptoEvent_icon_verified::after {
|
||||
background-image: url("$(res)/img/e2e/verified.svg");
|
||||
mask-image: url("$(res)/img/e2e/verified.svg");
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
&.mx_cryptoEvent_icon_warning::after {
|
||||
background-image: url("$(res)/img/e2e/warning.svg");
|
||||
mask-image: url("$(res)/img/e2e/warning.svg");
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
|
||||
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_UserInfo_separator {
|
||||
border-bottom: 1px solid lightgray;
|
||||
border-bottom: 1px solid rgba($primary-fg-color, .1);
|
||||
}
|
||||
|
||||
.mx_UserInfo_memberDetailsContainer {
|
||||
|
|
@ -121,7 +121,7 @@ limitations under the License.
|
|||
h3 {
|
||||
text-transform: uppercase;
|
||||
color: $notice-secondary-color;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
font-size: $font-12px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px;
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
border: 5px solid $widget-menu-bar-bg-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_AppTile_mini {
|
||||
|
|
@ -98,6 +98,7 @@ $AppsDrawerBodyHeight: 273px;
|
|||
|
||||
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
||||
height: 114px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@
|
|||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
|
|
|
|||
|
|
@ -22,28 +22,58 @@ limitations under the License.
|
|||
display: block;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_warning::after,
|
||||
.mx_E2EIcon_normal::after,
|
||||
.mx_E2EIcon_verified::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
.mx_E2EIcon_warning,
|
||||
.mx_E2EIcon_normal,
|
||||
.mx_E2EIcon_verified {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// white infill for the transparency
|
||||
.mx_E2EIcon::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 90%;
|
||||
}
|
||||
|
||||
// transparent-looking border surrounding the shield for when overlain over avatars
|
||||
.mx_E2EIcon_bordered {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
// shrink the actual badge
|
||||
&::after {
|
||||
mask-size: 75%;
|
||||
}
|
||||
// shrink the infill of the badge
|
||||
&::before {
|
||||
mask-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_E2EIcon_warning::after {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_normal::after {
|
||||
background-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_verified::after {
|
||||
background-image: url('$(res)/img/e2e/verified.svg');
|
||||
mask-image: url('$(res)/img/e2e/verified.svg');
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,6 @@ limitations under the License.
|
|||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 7px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$left-gutter: 64px;
|
||||
|
||||
.mx_EventTile {
|
||||
max-width: 100%;
|
||||
clear: both;
|
||||
|
|
@ -45,7 +47,7 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
|
||||
top: $font-8px;
|
||||
left: 65px;
|
||||
left: $left-gutter;
|
||||
}
|
||||
|
||||
.mx_EventTile_continuation {
|
||||
|
|
@ -73,7 +75,7 @@ limitations under the License.
|
|||
/* the next three lines, along with overflow hidden, truncate long display names */
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 65px);
|
||||
max-width: calc(100% - $left-gutter);
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile .mx_Flair {
|
||||
|
|
@ -111,7 +113,7 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
position: relative;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-left: $left-gutter;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +184,7 @@ limitations under the License.
|
|||
* TODO: ultimately we probably want some transition on here.
|
||||
*/
|
||||
.mx_EventTile_selected > .mx_EventTile_line {
|
||||
border-left: $accent-color 5px solid;
|
||||
border-left: $accent-color 4px solid;
|
||||
padding-left: 60px;
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
|
@ -328,34 +330,67 @@ limitations under the License.
|
|||
.mx_EventTile_e2eIcon {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 46px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 44px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.2;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unknown {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unencrypted {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unauthenticated {
|
||||
background-image: url('$(res)/img/e2e/normal.svg');
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -397,10 +432,6 @@ limitations under the License.
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mx_EventTile_12hr .mx_EventTile_e2eIcon {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
|
|
@ -408,15 +439,15 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
border-left: $e2e-verified-color 5px solid;
|
||||
border-left: $e2e-verified-color 4px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
border-left: $e2e-unverified-color 5px solid;
|
||||
border-left: $e2e-unverified-color 4px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
border-left: $e2e-unknown-color 5px solid;
|
||||
border-left: $e2e-unknown-color 4px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
|
||||
|
|
@ -505,7 +536,7 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
top: 6px;
|
||||
top: 8px;
|
||||
right: 6px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
|
|
@ -537,7 +568,6 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile_content .markdown-body a {
|
||||
color: $accent-color-alt;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body .hljs {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$left-gutter: 65px;
|
||||
$left-gutter: 64px;
|
||||
|
||||
.mx_GroupLayout {
|
||||
.mx_EventTile {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ $irc-line-height: $font-18px;
|
|||
}
|
||||
|
||||
> .mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
right: unset;
|
||||
left: unset;
|
||||
top: 0;
|
||||
|
|
@ -181,9 +181,11 @@ $irc-line-height: $font-18px;
|
|||
> span {
|
||||
display: flex;
|
||||
|
||||
> .mx_SenderProfile_name {
|
||||
> .mx_SenderProfile_name,
|
||||
> .mx_SenderProfile_aux {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: var(--name-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
@define-mixin mx_InviteOnlyIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@define-mixin mx_InviteOnlyIcon_padlock {
|
||||
background-color: $roomtile-name-color;
|
||||
mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_InviteOnlyIcon_large {
|
||||
@mixin mx_InviteOnlyIcon;
|
||||
margin: 0 4px;
|
||||
|
||||
&::before {
|
||||
@mixin mx_InviteOnlyIcon_padlock;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteOnlyIcon_small {
|
||||
@mixin mx_InviteOnlyIcon;
|
||||
left: -2px;
|
||||
|
||||
&::before {
|
||||
@mixin mx_InviteOnlyIcon_padlock;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,8 +41,8 @@ limitations under the License.
|
|||
// with text-align in parent
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
color: $roomtile-badge-fg-color;
|
||||
background-color: $roomtile-name-color;
|
||||
color: $accent-fg-color;
|
||||
background-color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
|
||||
|
|
@ -56,7 +56,7 @@ limitations under the License.
|
|||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
background: $primary-bg-color;
|
||||
border: 1.3px solid $roomtile-name-color;
|
||||
border: 1.3px solid $muted-fg-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -70,5 +70,5 @@ limitations under the License.
|
|||
mask: url('$(res)/img/icon-jump-to-bottom.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 9px 14px;
|
||||
background: $roomtile-name-color;
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ limitations under the License.
|
|||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
|
|
@ -59,32 +63,27 @@ limitations under the License.
|
|||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 1 1 0;
|
||||
|
||||
// stricter rule to override the one in _common.scss
|
||||
&[type="text"] {
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mx_MemberList_wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.mx_MemberList_invite,
|
||||
.mx_RightPanel_invite {
|
||||
.mx_MemberList_invite {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
background-color: $button-bg-color;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin: 9px;
|
||||
margin: 5px 9px 9px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $button-fg-color;
|
||||
font-weight: 600;
|
||||
|
||||
.mx_RightPanel_icon {
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_invite.mx_AccessibleButton_disabled {
|
||||
|
|
@ -93,8 +92,17 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_invite span {
|
||||
background-image: url('$(res)/img/feather-customised/user-add.svg');
|
||||
background-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 25px;
|
||||
background-size: 20px;
|
||||
padding: 8px 0 8px 25px;
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteCommunity span {
|
||||
background-image: url('$(res)/img/icon-invite-people.svg');
|
||||
}
|
||||
|
||||
.mx_MemberList_addRoomToCommunity span {
|
||||
background-image: url('$(res)/img/icons-room-add.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
margin: auto;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
padding-left: 84px;
|
||||
padding-left: 82px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_replaced_wrapper {
|
||||
|
|
@ -60,7 +60,7 @@ limitations under the License.
|
|||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
|
||||
|
|
@ -76,8 +76,8 @@ limitations under the License.
|
|||
left: 60px;
|
||||
margin-right: 0; // Counteract the E2EIcon class
|
||||
margin-left: 3px; // Counteract the E2EIcon class
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
|
|
@ -196,30 +196,35 @@ limitations under the License.
|
|||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
&.mx_MessageComposer_hangup::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_MessageComposer_upload::before {
|
||||
mask-image: url('$(res)/img/feather-customised/paperclip.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_hangup::before {
|
||||
mask-image: url('$(res)/img/hangup.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_voicecall::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_videocall::before {
|
||||
mask-image: url('$(res)/img/feather-customised/video.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_emoji::before {
|
||||
mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_stickers::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sticker.custom.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatting {
|
||||
|
|
|
|||
|
|
@ -75,23 +75,23 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconBold::after {
|
||||
mask-image: url('$(res)/img/format/bold.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconItalic::after {
|
||||
mask-image: url('$(res)/img/format/italics.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
|
||||
mask-image: url('$(res)/img/format/strikethrough.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconQuote::after {
|
||||
mask-image: url('$(res)/img/format/quote.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconCode::after {
|
||||
mask-image: url('$(res)/img/format/code.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
// ^- The count is an element floating within that.
|
||||
|
||||
&.mx_NotificationBadge_visible {
|
||||
background-color: $roomtile2-default-badge-bg-color;
|
||||
background-color: $roomtile-default-badge-bg-color;
|
||||
|
||||
// Create a flexbox to order the count a bit easier
|
||||
display: flex;
|
||||
|
|
@ -42,21 +42,23 @@ limitations under the License.
|
|||
// These are the 3 background types
|
||||
|
||||
&.mx_NotificationBadge_dot {
|
||||
background-color: $primary-fg-color; // increased visibility
|
||||
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_2char {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 16px;
|
||||
width: $font-16px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_3char {
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
border-radius: 16px;
|
||||
width: $font-26px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
// The following is the floating badge
|
||||
|
|
|
|||
|
|
@ -22,9 +22,10 @@ limitations under the License.
|
|||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -15,98 +15,42 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomBreadcrumbs {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
padding: 8px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
// Create a flexbox for the crumbs
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
// repeating circles as empty placeholders
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
$breadcrumb-placeholder-bg-color,
|
||||
$breadcrumb-placeholder-bg-color 15px,
|
||||
transparent 16px
|
||||
);
|
||||
background-size: 36px;
|
||||
background-position: 6px -1px;
|
||||
background-repeat: repeat-x;
|
||||
|
||||
|
||||
// Autohide the scrollbar
|
||||
overflow-x: hidden;
|
||||
&:hover {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
.mx_RoomBreadcrumbs_crumb {
|
||||
margin-left: 4px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s, width 0.3s;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_dmIndicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_animate {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_preAnimate {
|
||||
width: 0;
|
||||
transform: scale(0);
|
||||
// These classes come from the CSSTransition component. There's many more classes we
|
||||
// could care about, but this is all we worried about for now. The animation works by
|
||||
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
|
||||
// sliding it into view.
|
||||
&.mx_RoomBreadcrumbs-enter {
|
||||
margin-left: -40px; // 32px for the avatar, 8px for the margin
|
||||
}
|
||||
&.mx_RoomBreadcrumbs-enter-active {
|
||||
margin-left: 0;
|
||||
|
||||
// Timing function is as-requested by design.
|
||||
// NOTE: The transition time MUST match the value passed to CSSTransition!
|
||||
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_left {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
|
||||
// will deal with left/right positioning for us. Normally we'd use position:sticky on
|
||||
// a few key elements, however that doesn't work in horizontal scrolling scenarios.
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator,
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator {
|
||||
background: linear-gradient(to left, $panel-gradient);
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
background: linear-gradient(to right, $panel-gradient);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
|
||||
&.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 15px;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
.mx_RoomBreadcrumbs_placeholder {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
line-height: 32px; // specifically to match the height this is not scaled
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_Tooltip {
|
||||
margin-left: -42px;
|
||||
margin-top: -42px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
.mx_RoomBreadcrumbs2 {
|
||||
width: 100%;
|
||||
|
||||
// Create a flexbox for the crumbs
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
.mx_RoomBreadcrumbs2_crumb {
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
// These classes come from the CSSTransition component. There's many more classes we
|
||||
// could care about, but this is all we worried about for now. The animation works by
|
||||
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
|
||||
// sliding it into view.
|
||||
&.mx_RoomBreadcrumbs2-enter {
|
||||
margin-left: -40px; // 32px for the avatar, 8px for the margin
|
||||
}
|
||||
&.mx_RoomBreadcrumbs2-enter-active {
|
||||
margin-left: 0;
|
||||
|
||||
// Timing function is as-requested by design.
|
||||
// NOTE: The transition time MUST match the value passed to CSSTransition!
|
||||
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs2_placeholder {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
line-height: 32px; // specifically to match the height this is not scaled
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs2_Tooltip {
|
||||
margin-left: -42px;
|
||||
margin-top: -42px;
|
||||
|
||||
&.mx_Tooltip {
|
||||
background-color: $tagpanel-bg-color;
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
|
||||
.mx_Tooltip_chevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket 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_RoomDropTarget_container {
|
||||
background-color: $secondary-accent-color;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomDropTarget {
|
||||
font-size: $font-13px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomDropTarget_label {
|
||||
position: relative;
|
||||
margin-top: 3px;
|
||||
line-height: $font-21px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_avatar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_label {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -15,26 +15,34 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomHeader {
|
||||
flex: 0 0 52px;
|
||||
flex: 0 0 50px;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
background-color: $roomheader-bg-color;
|
||||
|
||||
.mx_E2EIcon {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -6px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
.mx_RoomHeader_e2eIcon {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
.mx_E2EIcon {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_wrapper {
|
||||
margin: auto;
|
||||
height: 52px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 10px 0 19px;
|
||||
padding: 0 10px 0 18px;
|
||||
|
||||
.mx_InviteOnlyIcon_large {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_spinner {
|
||||
|
|
@ -67,7 +75,6 @@ limitations under the License.
|
|||
.mx_RoomHeader_buttons {
|
||||
display: flex;
|
||||
background-color: $primary-bg-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_info {
|
||||
|
|
@ -173,7 +180,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomHeader_avatar {
|
||||
flex: 0;
|
||||
margin: 0 7px;
|
||||
margin: 0 6px 0 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -201,41 +208,53 @@ limitations under the License.
|
|||
|
||||
.mx_RoomHeader_button {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 4px; // center with parent of 32px
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $roomheader-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_settingsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_forgetButton::before {
|
||||
mask-image: url('$(res)/img/leave.svg');
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/search.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_shareButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/share.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/share.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_manageIntegsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/grid.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/integrations.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_showPanel {
|
||||
|
|
@ -251,7 +270,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_pinnedButton::before {
|
||||
mask-image: url('$(res)/img/icons-pin.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/pin.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinsIndicator {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -15,56 +14,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomList.mx_RoomList2 {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_RoomList {
|
||||
/* take up remaining space below TopLeftMenu */
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
|
||||
|
||||
.mx_RoomList .mx_ResizeHandle {
|
||||
// needed so the z-index takes effect
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hide resize handles next to collapsed / empty sublists */
|
||||
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomList_expandButton {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomList_emptySubListTip_container {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomList_emptySubListTip {
|
||||
font-size: $font-13px;
|
||||
padding: 5px;
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_RoomList_emptySubListTip .mx_RoleButton {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.mx_RoomList_headerButtons {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
// Create a column-based flexbox for the sublists. That's pretty much all we have to
|
||||
// worry about in this stylesheet.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap; // let the column overflow
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
// TODO: Rename to mx_RoomList during replacement of old component
|
||||
|
||||
.mx_RoomList2 {
|
||||
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
|
||||
|
||||
// Create a column-based flexbox for the sublists. That's pretty much all we have to
|
||||
// worry about in this stylesheet.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap; // let the column overflow
|
||||
}
|
||||
|
|
@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
.mx_RoomSublist2 {
|
||||
.mx_RoomSublist {
|
||||
// The sublist is a column of rows, essentially
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 8px;
|
||||
margin-bottom: 4px;
|
||||
width: 100%;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
// Create a flexbox to make alignment easy
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -42,18 +41,13 @@ limitations under the License.
|
|||
// all works by ensuring the header text has a fixed height when sticky so the
|
||||
// fixed height of the container can maintain the scroll position.
|
||||
|
||||
// The combined height must be set in the LeftPanel2 component for sticky headers
|
||||
// The combined height must be set in the LeftPanel component for sticky headers
|
||||
// to work correctly.
|
||||
padding-bottom: 8px;
|
||||
height: 24px;
|
||||
color: $roomlist-header-color;
|
||||
|
||||
// Hide the header container if the contained element is stickied.
|
||||
// We don't use display:none as that causes the header to go away too.
|
||||
&.mx_RoomSublist2_headerContainer_hasSticky {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
.mx_RoomSublist_stickable {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
|
||||
|
|
@ -65,25 +59,26 @@ limitations under the License.
|
|||
// to identify when a header is sticky. If we didn't have a consistent sticky class,
|
||||
// we'd have to do the "is sticky" checks again on click, as clicking the header
|
||||
// when sticky scrolls instead of collapses the list.
|
||||
&.mx_RoomSublist2_headerContainer_sticky {
|
||||
&.mx_RoomSublist_headerContainer_sticky {
|
||||
position: fixed;
|
||||
height: 32px; // to match the header container
|
||||
// width set by JS
|
||||
width: calc(100% - 22px);
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer_stickyBottom {
|
||||
&.mx_RoomSublist_headerContainer_stickyBottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// We don't have a top style because the top is dependent on the room list header's
|
||||
// height, and is therefore calculated in JS.
|
||||
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
|
||||
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
|
||||
}
|
||||
|
||||
// Sticky Headers End
|
||||
// ***************************
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
// Create another flexbox row because it's super easy to position the badge this way.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -96,14 +91,14 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
&:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton,
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_auxButton,
|
||||
.mx_RoomSublist_menuButton {
|
||||
margin-left: 8px; // should be the same as the notification badge
|
||||
position: relative;
|
||||
width: 24px;
|
||||
|
|
@ -125,26 +120,25 @@ limitations under the License.
|
|||
}
|
||||
|
||||
// Hide the menu button by default
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton::before {
|
||||
.mx_RoomSublist_auxButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
.mx_RoomSublist_menuButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerText {
|
||||
.mx_RoomSublist_headerText {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 16px); // 16px is the badge width
|
||||
text-transform: uppercase;
|
||||
line-height: $font-16px;
|
||||
font-size: $font-12px;
|
||||
font-size: $font-13px;
|
||||
font-weight: 600;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
|
|
@ -152,7 +146,7 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.mx_RoomSublist2_collapseBtn {
|
||||
.mx_RoomSublist_collapseBtn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
|
|
@ -173,14 +167,24 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_collapseBtn_collapsed::before {
|
||||
&.mx_RoomSublist_collapseBtn_collapsed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
// In the general case, we leave height of headers alone even if sticky, so
|
||||
// that the sublists below them do not jump. However, that leaves a gap
|
||||
// when scrolled to the top above the first sublist (whose header can only
|
||||
// ever stick to top), so we force height to 0 for only that first header.
|
||||
// See also https://github.com/vector-im/riot-web/issues/14429.
|
||||
&:first-child .mx_RoomSublist_headerContainer {
|
||||
height: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_resizeBox {
|
||||
position: relative;
|
||||
|
||||
// Create another flexbox column for the tiles
|
||||
|
|
@ -188,7 +192,7 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_RoomSublist2_tiles {
|
||||
.mx_RoomSublist_tiles {
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
// need this to be flex otherwise the overflow hidden from above
|
||||
|
|
@ -196,20 +200,22 @@ limitations under the License.
|
|||
// as the box model should be top aligned. Happens in both FF and Chromium
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
mask-image: linear-gradient(0deg, transparent, black 4px);
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles_showNButton {
|
||||
.mx_RoomSublist_resizerHandles_showNButton {
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizerHandles {
|
||||
.mx_RoomSublist_resizerHandles {
|
||||
flex: 0 0 4px;
|
||||
}
|
||||
|
||||
// Class name comes from the ResizableBox component
|
||||
// The hover state needs to use the whole sublist, not just the resizable box,
|
||||
// so that selector is below and one level higher.
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
cursor: ns-resize;
|
||||
border-radius: 3px;
|
||||
|
||||
|
|
@ -227,21 +233,21 @@ limitations under the License.
|
|||
right: calc(50% - 32px) !important;
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomSublist2_hasMenuOpen {
|
||||
.mx_RoomSublist2_resizerHandle {
|
||||
&:hover, &.mx_RoomSublist_hasMenuOpen {
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
opacity: 0.8;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
.mx_RoomSublist_showNButton {
|
||||
cursor: pointer;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile2-preview-color;
|
||||
color: $roomtile-preview-color;
|
||||
|
||||
// Update the render() function for RoomSublist2 if these change
|
||||
// Update the render() function for RoomSublist if these change
|
||||
// Update the ListLayout class for minVisibleTiles if these change.
|
||||
height: 24px;
|
||||
padding-bottom: 4px;
|
||||
|
|
@ -250,7 +256,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSublist2_showNButtonChevron {
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -259,52 +265,52 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $roomtile2-preview-color;
|
||||
background: $roomtile-preview-color;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showMoreButtonChevron {
|
||||
.mx_RoomSublist_showMoreButtonChevron {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showLessButtonChevron {
|
||||
.mx_RoomSublist_showLessButtonChevron {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
width: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_minimized {
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
&.mx_RoomSublist_minimized {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
order: 0;
|
||||
align-self: flex-end;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_stickable {
|
||||
.mx_RoomSublist_stickable {
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton {
|
||||
.mx_RoomSublist_auxButton {
|
||||
order: 2;
|
||||
visibility: visible;
|
||||
width: 32px !important; // !important to override hover styles
|
||||
height: 32px !important; // !important to override hover styles
|
||||
margin-left: 0 !important; // !important to override hover styles
|
||||
background-color: $roomlist2-button-bg-color;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
margin-top: 8px;
|
||||
|
||||
&::before {
|
||||
|
|
@ -314,25 +320,25 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
.mx_RoomSublist_resizeBox {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_showNButton {
|
||||
.mx_RoomSublist_showNButton {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_RoomSublist2_showNButtonChevron {
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
margin-right: 12px; // to center
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_menuButton {
|
||||
.mx_RoomSublist_menuButton {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
& > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
& > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
|
||||
|
|
@ -344,7 +350,7 @@ limitations under the License.
|
|||
|
||||
// This is the same color as the left panel background because it needs
|
||||
// to occlude the sublist title
|
||||
background-color: $roomlist2-bg-color;
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
|
|
@ -352,8 +358,8 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_RoomSublist_menuButton {
|
||||
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
|
||||
}
|
||||
}
|
||||
|
|
@ -361,7 +367,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu {
|
||||
.mx_RoomSublist_contextMenu {
|
||||
padding: 20px 16px;
|
||||
width: 250px;
|
||||
|
||||
|
|
@ -369,11 +375,11 @@ limitations under the License.
|
|||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px; // additional 16px
|
||||
border: 1px solid $roomsublist2-divider-color;
|
||||
border: 1px solid $roomsublist-divider-color;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_contextMenu_title {
|
||||
.mx_RoomSublist_contextMenu_title {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
font-weight: 600;
|
||||
|
|
@ -385,6 +391,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_addRoomTooltip {
|
||||
.mx_RoomSublist_addRoomTooltip {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2020 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.
|
||||
|
|
@ -15,214 +14,226 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// Note: the room tile expects to be in a flexbox column container
|
||||
.mx_RoomTile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
padding: 0 8px 0 10px;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTile_menuButton {
|
||||
display: none;
|
||||
flex: 0 0 16px;
|
||||
height: 16px;
|
||||
background-image: url('$(res)/img/icon_context.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.mx_UserOnlineDot {
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile:focus {
|
||||
filter: none !important;
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_tooltip {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -54px;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_nameContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
vertical-align: middle;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile_labelContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile_subtext {
|
||||
display: inline-block;
|
||||
font-size: $font-11px;
|
||||
padding: 0 0 0 7px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: clip;
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar_container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar {
|
||||
flex: 0;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
width: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
|
||||
padding-top: 0;
|
||||
vertical-align: super;
|
||||
}
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
|
||||
.mx_RoomTile_dm {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -5px;
|
||||
z-index: 2;
|
||||
}
|
||||
&.mx_RoomTile_selected,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile_hasMenuOpen {
|
||||
background-color: $roomtile-selected-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Note we match .mx_E2EIcon to make sure this matches more tightly than just
|
||||
// .mx_E2EIcon on its own
|
||||
.mx_RoomTile_e2eIcon.mx_E2EIcon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -5px;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
font-size: $font-14px;
|
||||
padding: 0 4px;
|
||||
color: $roomtile-name-color;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mx_RoomTile_nameContainer {
|
||||
flex-grow: 1;
|
||||
min-width: 0; // allow flex to shrink it
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
flex: 0 1 content;
|
||||
border-radius: 0.8em;
|
||||
padding: 0 0.4em;
|
||||
color: $roomtile-badge-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
.mx_RoomTile {
|
||||
margin: 0 6px;
|
||||
padding: 0 2px;
|
||||
position: relative;
|
||||
// Create a new column layout flexbox for the name parts
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_RoomTile_name,
|
||||
.mx_RoomTile_messagePreview {
|
||||
margin: 0 2px;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_RoomTile_messagePreview {
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile-preview-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_nameWithPreview {
|
||||
margin-top: -4px; // shift the name up a bit more
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
.mx_RoomTile_notificationsButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
.mx_RoomTile_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile_menuButton,
|
||||
.mx_RoomTile_notificationsButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 0px;
|
||||
border-radius: 16px;
|
||||
z-index: 3;
|
||||
border: 0.18em solid $secondary-accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_menuButton {
|
||||
display: none; // no design for this for now
|
||||
}
|
||||
.mx_UserOnlineDot {
|
||||
display: none; // no design for this for now
|
||||
}
|
||||
}
|
||||
|
||||
// toggle menuButton and badge on menu displayed
|
||||
.mx_RoomTile_menuDisplayed,
|
||||
// or on keyboard focus of room tile
|
||||
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
|
||||
// or on pointer hover
|
||||
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
|
||||
.mx_RoomTile_menuButton {
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
.mx_UserOnlineDot {
|
||||
display: none;
|
||||
|
||||
.mx_RoomTile_menuButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile_minimized) {
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile_notificationsButton,
|
||||
.mx_RoomTile_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomTile_minimized {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
|
||||
.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
|
||||
background-color: $roomtile-name-color;
|
||||
// We use these both in context menus and the room tiles
|
||||
.mx_RoomTile_iconBell::before {
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
.mx_RoomTile_iconBellDot::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
|
||||
}
|
||||
.mx_RoomTile_iconBellCrossed::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
|
||||
}
|
||||
.mx_RoomTile_iconBellMentions::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
|
||||
}
|
||||
.mx_RoomTile_iconCheck::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_badge,
|
||||
.mx_RoomTile_badge.mx_RoomTile_badgeRed {
|
||||
color: $accent-fg-color;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
.mx_RoomTile_contextMenu {
|
||||
.mx_RoomTile_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_RoomTile_unread, .mx_RoomTile_highlight {
|
||||
.mx_RoomTile_name {
|
||||
font-weight: 600;
|
||||
color: $roomtile-selected-color;
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_contextMenu_activeRow {
|
||||
&.mx_AccessibleButton, .mx_AccessibleButton {
|
||||
color: $accent-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconStar::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconFavorite::before {
|
||||
mask-image: url('$(res)/img/feather-customised/favourites.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconArrowDown::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconSettings::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_selected {
|
||||
border-radius: 4px;
|
||||
background-color: $roomtile-selected-bg-color;
|
||||
}
|
||||
|
||||
.mx_DNDRoomTile {
|
||||
transform: none;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.mx_DNDRoomTile_dragging {
|
||||
transform: scale(1.05, 1.05);
|
||||
}
|
||||
|
||||
.mx_RoomTile_arrow {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_transparent:focus {
|
||||
background-color: $roomtile-transparent-focused-color;
|
||||
}
|
||||
|
||||
.mx_GroupInviteTile .mx_RoomTile_name {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,250 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
// Note: the room tile expects to be in a flexbox column container
|
||||
.mx_RoomTile2 {
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
|
||||
// allow scrollIntoView to ignore the sticky headers, must match combined height of .mx_RoomSublist2_headerContainer
|
||||
scroll-margin-top: 32px;
|
||||
scroll-margin-bottom: 32px;
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
|
||||
&.mx_RoomTile2_selected,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
background-color: $roomtile2-selected-bg-color;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_nameContainer {
|
||||
flex-grow: 1;
|
||||
min-width: 0; // allow flex to shrink it
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
|
||||
// Create a new column layout flexbox for the name parts
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_RoomTile2_name,
|
||||
.mx_RoomTile2_messagePreview {
|
||||
margin: 0 2px;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_name {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_messagePreview {
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $roomtile2-preview-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_nameWithPreview {
|
||||
margin-top: -4px; // shift the name up a bit more
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_notificationsButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile2_menuButton,
|
||||
.mx_RoomTile2_notificationsButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_menuButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile2_minimized) {
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_notificationsButton,
|
||||
.mx_RoomTile2_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomTile2_minimized {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// do not apply scroll-margin-bottom to the sublist which will not have a sticky header below it
|
||||
.mx_RoomSublist2:last-child .mx_RoomTile2 {
|
||||
scroll-margin-bottom: 0;
|
||||
}
|
||||
|
||||
// We use these both in context menus and the room tiles
|
||||
.mx_RoomTile2_iconBell::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellDot::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellCrossed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellMentions::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconCheck::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu {
|
||||
.mx_RoomTile2_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu_activeRow {
|
||||
&.mx_AccessibleButton, .mx_AccessibleButton {
|
||||
color: $accent-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconStar::before {
|
||||
mask-image: url('$(res)/img/feather-customised/star.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconFavorite::before {
|
||||
mask-image: url('$(res)/img/feather-customised/favourites.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconArrowDown::before {
|
||||
mask-image: url('$(res)/img/feather-customised/arrow-down.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconSettings::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: $roomlist2-bg-color; // to match the room list itself
|
||||
background-color: $roomlist-bg-color; // to match the room list itself
|
||||
}
|
||||
|
||||
.mx_RoomTileIcon_globe::before {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
.mx_Stickers_addLink {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: $button-link-fg-color;
|
||||
}
|
||||
|
||||
.mx_Stickers_hideStickers {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ limitations under the License.
|
|||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
background: $primary-bg-color;
|
||||
border: 1.3px solid $roomtile-name-color;
|
||||
border: 1.3px solid $muted-fg-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 9px 13px;
|
||||
background: $roomtile-name-color;
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_markAsRead {
|
||||
|
|
@ -62,7 +62,7 @@ limitations under the License.
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
background: $primary-bg-color;
|
||||
border: 1.3px solid $roomtile-name-color;
|
||||
border: 1.3px solid $muted-fg-color;
|
||||
border-radius: 10px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
|
@ -76,5 +76,5 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
mask-size: 10px;
|
||||
mask-position: 4px 4px;
|
||||
background: $roomtile-name-color;
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 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_UserOnlineDot {
|
||||
border-radius: 50%;
|
||||
background-color: $accent-color;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ limitations under the License.
|
|||
flex: 1;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
color: $eventtile-meta-color;
|
||||
color: $roomtopic-color;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_label > span {
|
||||
|
|
|
|||
|
|
@ -27,28 +27,6 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
|
||||
margin-top: 8px;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
display: inline;
|
||||
padding-right: 6px; // 0.5 * 12px
|
||||
left: -6px; // 0.5 * 12px
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
div::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
background-color: $button-primary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/upload.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox2 {
|
||||
.mx_IncomingCallBox {
|
||||
min-width: 250px;
|
||||
background-color: $primary-bg-color;
|
||||
padding: 8px;
|
||||
|
||||
.mx_IncomingCallBox2_CallerInfo {
|
||||
.mx_IncomingCallBox_CallerInfo {
|
||||
display: flex;
|
||||
direction: row;
|
||||
|
||||
|
|
@ -68,12 +68,12 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox2_buttons {
|
||||
.mx_IncomingCallBox_buttons {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .mx_IncomingCallBox2_spacer {
|
||||
> .mx_IncomingCallBox_spacer {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -18,8 +19,76 @@ limitations under the License.
|
|||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
font-weight: bold;
|
||||
font-size: $font-13px;
|
||||
|
||||
border-radius: 8px;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Hacky vertical align
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
> div > p,
|
||||
> div > h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
> div > p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_hangup {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
border-radius: 35px;
|
||||
|
||||
background-color: $notice-primary-color;
|
||||
|
||||
z-index: 101;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
top: 6.5px;
|
||||
left: 7.5px;
|
||||
|
||||
mask: url('$(res)/img/hangup.svg');
|
||||
mask-size: contain;
|
||||
background-size: contain;
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
||||
|
||||
.mx_CallView2_voice {
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
font-weight: bold;
|
||||
|
||||
border-radius: 8px;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Hacky vertical align
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
> div > p,
|
||||
> div > h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
> div > p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView2_hangup {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
border-radius: 35px;
|
||||
|
||||
background-color: $notice-primary-color;
|
||||
|
||||
z-index: 101;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
top: 6.5px;
|
||||
left: 7.5px;
|
||||
|
||||
mask: url('$(res)/img/hangup.svg');
|
||||
mask-size: contain;
|
||||
background-size: contain;
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket 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_IncomingCallBox {
|
||||
text-align: center;
|
||||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: $primary-bg-color;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
padding: 6px;
|
||||
margin-top: -3px;
|
||||
margin-left: -20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_chevron {
|
||||
padding: 12px;
|
||||
position: absolute;
|
||||
left: -21px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_title {
|
||||
padding: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_cell {
|
||||
vertical-align: middle;
|
||||
padding: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline,
|
||||
.mx_IncomingCallBox_buttons_accept {
|
||||
vertical-align: middle;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
line-height: $font-36px;
|
||||
border-radius: 36px;
|
||||
color: $accent-fg-color;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline {
|
||||
background-color: $voip-decline-color;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_accept {
|
||||
background-color: $voip-accept-color;
|
||||
}
|
||||
BIN
res/fonts/Inter/Inter-Bold.woff
Normal file
BIN
res/fonts/Inter/Inter-Bold.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Bold.woff2
Normal file
BIN
res/fonts/Inter/Inter-Bold.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-BoldItalic.woff
Normal file
BIN
res/fonts/Inter/Inter-BoldItalic.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-BoldItalic.woff2
Normal file
BIN
res/fonts/Inter/Inter-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Italic.woff
Normal file
BIN
res/fonts/Inter/Inter-Italic.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Italic.woff2
Normal file
BIN
res/fonts/Inter/Inter-Italic.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Medium.woff
Normal file
BIN
res/fonts/Inter/Inter-Medium.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Medium.woff2
Normal file
BIN
res/fonts/Inter/Inter-Medium.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-MediumItalic.woff
Normal file
BIN
res/fonts/Inter/Inter-MediumItalic.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-MediumItalic.woff2
Normal file
BIN
res/fonts/Inter/Inter-MediumItalic.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Regular.woff
Normal file
BIN
res/fonts/Inter/Inter-Regular.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-Regular.woff2
Normal file
BIN
res/fonts/Inter/Inter-Regular.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-SemiBold.woff
Normal file
BIN
res/fonts/Inter/Inter-SemiBold.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-SemiBold.woff2
Normal file
BIN
res/fonts/Inter/Inter-SemiBold.woff2
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff
Normal file
BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff
Normal file
Binary file not shown.
BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff2
Normal file
BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff2
Normal file
Binary file not shown.
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#2E2F32" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.77777 8.24003V2.71114L7.99999 0.888916L14.2222 2.71114V8.24003C14.2222 13.8934 7.99999 15.1111 7.99999 15.1111C7.99999 15.1111 1.77777 13.8934 1.77777 8.24003Z" fill="#020202"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 293 B |
|
|
@ -1,4 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#03B381" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2268 7.80652C17.6053 8.17175 17.6053 8.7639 17.2268 9.12913L11.4013 14.7502C11.0228 15.1154 10.4091 15.1154 10.0306 14.7502L10.0145 14.7342C10.0084 14.7286 10.0023 14.7229 9.99635 14.7171L7.32348 12.1381C6.92604 11.7546 6.92604 11.1328 7.32348 10.7493C7.72091 10.3658 8.36528 10.3658 8.76272 10.7493L10.7838 12.6995L15.8561 7.80652C16.2346 7.44129 16.8483 7.44129 17.2268 7.80652Z" fill="white"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM10.6139 4.90635C10.7827 4.74635 11.0494 4.75524 11.2094 4.92413C11.3516 5.08413 11.3516 5.32413 11.2272 5.48413L7.47608 10.0263L7.44941 10.0619C7.20052 10.3641 6.74719 10.4086 6.44497 10.1597C6.41812 10.1463 6.39635 10.1227 6.37581 10.1005C6.36914 10.0933 6.36261 10.0862 6.35608 10.0797L4.74719 8.23079C4.56941 8.01746 4.58719 7.69746 4.80052 7.51968C4.9783 7.35968 5.23608 7.35968 5.42274 7.48413L6.8183 8.46191L10.6139 4.90635Z" fill="#0DBD8B"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 753 B After Width: | Height: | Size: 764 B |
|
|
@ -1,5 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#FF4B55" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="10.8" y="5.5" width="2.5" height="8" rx="1.25" fill="white"/>
|
||||
<rect x="10.8" y="15" width="2.5" height="2.5" rx="1.25" fill="white"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM7.92899 3.91112C7.42232 3.94668 7.04899 4.39113 7.09343 4.89779L7.37788 8.45335C7.40455 8.76446 7.64455 9.00446 7.95566 9.03113H8.00899C8.33788 9.03113 8.61343 8.78224 8.6401 8.45335L8.92455 4.89779V4.75557C8.87121 4.2489 8.42677 3.87557 7.92899 3.91112ZM8 11.5556C8.43201 11.5556 8.78222 11.2054 8.78222 10.7733C8.78222 10.3413 8.43201 9.99112 8 9.99112C7.56799 9.99112 7.21777 10.3413 7.21777 10.7733C7.21777 11.2054 7.56799 11.5556 8 11.5556Z" fill="#FF4B55"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 446 B After Width: | Height: | Size: 779 B |
6
res/img/element-icons/call/fullscreen.svg
Normal file
6
res/img/element-icons/call/fullscreen.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 4H4V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 20L20 20L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4 4L9.5 9.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M14.5 14.5L20 20" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
3
res/img/element-icons/call/hangup.svg
Normal file
3
res/img/element-icons/call/hangup.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0084 7.75648C10.3211 7.69163 6.85136 8.12949 6.00781 8.35133C5.95792 8.36445 5.90044 8.37912 5.83616 8.39552C4.54101 8.72607 0.48272 9.76183 0.0442423 13.0436C-0.295466 15.5862 1.40575 16.3558 2.25618 16.2386C2.84479 16.1648 4.5301 15.8983 6.08724 15.6189C7.61629 15.3446 7.61551 14.3359 7.61499 13.6538C7.61498 13.6413 7.61497 13.6288 7.61497 13.6165L7.61497 12.2453C7.61497 11.8961 7.94315 11.6942 8.3958 11.6396C9.99822 11.422 11.3359 11.4213 12.0055 11.4213L12.0112 11.4213C12.6807 11.4213 14.0018 11.422 15.6042 11.6396C16.0569 11.6942 16.385 11.8961 16.385 12.2453L16.385 13.6165C16.385 13.6289 16.385 13.6413 16.385 13.6538C16.3845 14.3359 16.3837 15.3446 17.9128 15.619C19.4699 15.8983 21.1552 16.1648 21.7438 16.2386C22.5942 16.3558 24.2955 15.5862 23.9558 13.0436C23.5173 9.76183 19.459 8.72608 18.1638 8.39553C18.0996 8.37913 18.0421 8.36446 17.9922 8.35134C17.1487 8.1295 13.6956 7.69163 12.0084 7.75648Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
4
res/img/element-icons/call/video-call.svg
Normal file
4
res/img/element-icons/call/video-call.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="white"/>
|
||||
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
5
res/img/element-icons/call/video-muted.svg
Normal file
5
res/img/element-icons/call/video-muted.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 2L19 20" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4H4.41122L17 16.615V19.415C16.9914 19.4057 16.9825 19.3965 16.9735 19.3874L1.98909 4.37176C1.93823 4.32079 1.88324 4.27646 1.82519 4.23876C2.18599 4.08505 2.58306 4 3 4ZM0.386676 5.52565C0.140502 5.96107 0 6.46413 0 7V17C0 18.6569 1.34315 20 3 20H14.7593L0.573407 5.78449C0.495634 5.70656 0.433392 5.619 0.386676 5.52565ZM17 7V13.7837L7.2367 4H14C15.6569 4 17 5.34315 17 7Z" fill="white"/>
|
||||
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
3
res/img/element-icons/call/voice-call.svg
Normal file
3
res/img/element-icons/call/voice-call.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.02698 13.9613C7.16801 15.1932 9.91484 17.3263 10.6635 17.7641C10.7078 17.79 10.7585 17.8201 10.8152 17.8538C11.9576 18.5329 15.5373 20.6609 18.1454 18.6694C20.1661 17.1266 19.5091 15.3909 18.8289 14.875C18.3633 14.5128 16.9914 13.5145 15.7006 12.6152C14.4331 11.7322 13.7268 12.4397 13.2492 12.918C13.2404 12.9268 13.2317 12.9355 13.2231 12.9442L12.2621 13.9051C12.0174 14.1498 11.6451 14.0605 11.2886 13.7804C10.0092 12.8061 9.06809 11.8659 8.59723 11.395L8.59326 11.391C8.12246 10.9202 7.19387 9.99076 6.21957 8.7114C5.93949 8.35485 5.85018 7.9826 6.09489 7.73789L7.05586 6.77693C7.06448 6.7683 7.0732 6.7596 7.08199 6.75082C7.56034 6.27321 8.2678 5.56684 7.38479 4.29937C6.48555 3.0086 5.4872 1.6367 5.125 1.17106C4.60907 0.490937 2.87345 -0.166084 1.33056 1.85458C-0.660932 4.46274 1.46708 8.04241 2.1462 9.18482C2.17991 9.24152 2.21005 9.29221 2.23593 9.33649C2.67367 10.0851 4.79507 12.8203 6.02698 13.9613Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
4
res/img/element-icons/call/voice-muted.svg
Normal file
4
res/img/element-icons/call/voice-muted.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3L21 21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6.59209V12C8 14.2091 9.79086 16 12 16C13.4616 16 14.7402 15.216 15.4381 14.0457L8 6.59209ZM16.8804 15.491C15.7918 17.0102 14.0115 18 12 18C8.68629 18 6 15.3137 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C15.1511 19.6699 17.037 18.5476 18.3077 16.9213L16.8804 15.491ZM19.3589 15.1433L17.7917 13.5729C17.9275 13.0716 18 12.5443 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 13.1159 19.7715 14.1783 19.3589 15.1433ZM16 11.7774L8.43077 4.19238C9.09091 2.89149 10.4413 2 12 2C14.2091 2 16 3.79086 16 6V11.7774Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 913 B |
3
res/img/element-icons/call/voice-unmuted.svg
Normal file
3
res/img/element-icons/call/voice-unmuted.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6ZM5 11C5.55228 11 6 11.4477 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 16.0796 16.9463 19.446 13 19.9381V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19.9381C7.05369 19.446 4 16.0796 4 12C4 11.4477 4.44772 11 5 11Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
8
res/img/element-icons/community-members.svg
Normal file
8
res/img/element-icons/community-members.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z" fill="black"/>
|
||||
<path d="M9.63071 13.7611L9.9873 12.1331L9.97144 12.1296L9.95552 12.1264L9.63071 13.7611ZM12.8333 17.7461H11.1667V17.7461L12.8333 17.7461ZM4.14307 16.5833L2.63139 15.8815L2.15278 16.9123L2.93762 17.7343L4.14307 16.5833ZM7.83334 20.4483L6.62789 21.5993L7.1203 22.115H7.83334V20.4483ZM12.8333 20.4483V22.115H14.5L14.5 20.4483L12.8333 20.4483ZM16.3804 20.4483V22.115H17.0916L17.5837 21.6015L16.3804 20.4483ZM14.8333 20.4483L13.1667 20.4483L13.1667 22.115H14.8333V20.4483ZM20.0844 16.5833L21.2877 17.7365L22.1834 16.802L21.4996 15.7029L20.0844 16.5833ZM14.2216 15.0849L13.3884 13.6415L12.0423 14.4185L12.7236 15.8155L14.2216 15.0849ZM14.8333 17.7461H13.1667V17.7461L14.8333 17.7461ZM12 23.6667C18.4433 23.6667 23.6667 18.4433 23.6667 12H20.3333C20.3333 16.6024 16.6024 20.3333 12 20.3333V23.6667ZM0.333333 12C0.333333 18.4433 5.55668 23.6667 12 23.6667V20.3333C7.39763 20.3333 3.66667 16.6024 3.66667 12H0.333333ZM12 0.333333C5.55668 0.333333 0.333333 5.55668 0.333333 12H3.66667C3.66667 7.39763 7.39763 3.66667 12 3.66667V0.333333ZM23.6667 12C23.6667 5.55668 18.4433 0.333333 12 0.333333V3.66667C16.6024 3.66667 20.3333 7.39763 20.3333 12H23.6667ZM16.9039 11.0394C16.9039 11.5574 16.5464 11.7454 16.3804 11.7454V15.0787C18.6335 15.0787 20.2372 13.1421 20.2372 11.0394H16.9039ZM16.3804 10.3333C16.5464 10.3333 16.9039 10.5213 16.9039 11.0394H20.2372C20.2372 8.9366 18.6335 7.00001 16.3804 7.00001V10.3333ZM15.8569 11.0394C15.8569 10.5213 16.2143 10.3333 16.3804 10.3333V7.00001C14.1272 7.00001 12.5235 8.9366 12.5235 11.0394H15.8569ZM16.3804 11.7454C16.2143 11.7454 15.8569 11.5574 15.8569 11.0394H12.5235C12.5235 13.1421 14.1272 15.0787 16.3804 15.0787V11.7454ZM9.27412 15.3892C10.357 15.6264 11.1667 16.5936 11.1667 17.7461H14.5C14.5 14.9945 12.5676 12.6982 9.9873 12.1331L9.27412 15.3892ZM8.66667 15.3333C8.88675 15.3333 9.10029 15.355 9.3059 15.3958L9.95552 12.1264C9.53724 12.0433 9.10614 12 8.66667 12V15.3333ZM5.65474 17.2852C6.19734 16.1166 7.3526 15.3333 8.66667 15.3333V12C5.98369 12 3.68961 13.6023 2.63139 15.8815L5.65474 17.2852ZM9.03878 19.2974L5.34851 15.4324L2.93762 17.7343L6.62789 21.5993L9.03878 19.2974ZM12.8333 18.7817H7.83334V22.115H12.8333V18.7817ZM11.1667 17.7461L11.1667 20.4483L14.5 20.4483L14.5 17.7461L11.1667 17.7461ZM16.3804 18.7817H14.8333V22.115H16.3804V18.7817ZM18.8811 15.4301L15.1771 19.2951L17.5837 21.6015L21.2877 17.7365L18.8811 15.4301ZM16.3804 16.1738C17.3311 16.1738 18.1797 16.6768 18.6693 17.4638L21.4996 15.7029C20.4366 13.9944 18.5477 12.8405 16.3804 12.8405V16.1738ZM15.0549 16.5284C15.4465 16.3023 15.8969 16.1738 16.3804 16.1738V12.8405C15.2941 12.8405 14.2711 13.132 13.3884 13.6415L15.0549 16.5284ZM16.5 17.7461C16.5 16.5328 16.2201 15.3806 15.7196 14.3544L12.7236 15.8155C13.0068 16.3963 13.1667 17.0498 13.1667 17.7461H16.5ZM16.5 20.4483L16.5 17.7461L13.1667 17.7461L13.1667 20.4483L16.5 20.4483ZM8.66669 14.0833C11.091 14.0833 12.8334 11.9965 12.8334 9.70833H9.50002C9.50002 10.4117 9.00383 10.75 8.66669 10.75V14.0833ZM4.50002 9.70833C4.50002 11.9965 6.2424 14.0833 8.66669 14.0833V10.75C8.32955 10.75 7.83335 10.4117 7.83335 9.70833H4.50002ZM8.66669 5.33333C6.2424 5.33333 4.50002 7.42021 4.50002 9.70833H7.83335C7.83335 9.00492 8.32955 8.66667 8.66669 8.66667V5.33333ZM12.8334 9.70833C12.8334 7.42021 11.091 5.33333 8.66669 5.33333V8.66667C9.00383 8.66667 9.50002 9.00492 9.50002 9.70833H12.8334Z" fill="black" mask="url(#path-1-inside-1)"/>
|
||||
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
3
res/img/element-icons/community-rooms.svg
Normal file
3
res/img/element-icons/community-rooms.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10.5253 6.00581C11.0743 6.06524 11.4713 6.55853 11.4118 7.10761L11.2234 8.84821H13.3843L13.596 6.89239C13.6554 6.34332 14.1487 5.94638 14.6978 6.00581C15.2469 6.06524 15.6438 6.55853 15.5844 7.10761L15.396 8.84821H16.3C16.8523 8.84821 17.3 9.29592 17.3 9.84821C17.3 10.4005 16.8523 10.8482 16.3 10.8482H15.1795L14.9319 13.1362H16.3C16.8523 13.1362 17.3 13.5839 17.3 14.1362C17.3 14.6884 16.8523 15.1362 16.3 15.1362H14.7154L14.502 17.1076C14.4426 17.6567 13.9493 18.0536 13.4002 17.9942C12.8512 17.9348 12.4542 17.4415 12.5136 16.8924L12.7037 15.1362H10.5429L10.3295 17.1076C10.2701 17.6567 9.77677 18.0536 9.22769 17.9942C8.67861 17.9348 8.28167 17.4415 8.3411 16.8924L8.53119 15.1362H7.5C6.94772 15.1362 6.5 14.6884 6.5 14.1362C6.5 13.5839 6.94772 13.1362 7.5 13.1362H8.74766L8.9953 10.8482H7.93922C7.38693 10.8482 6.93922 10.4005 6.93922 9.84821C6.93922 9.29592 7.38693 8.84821 7.93922 8.84821H9.21177L9.42345 6.89239C9.48288 6.34332 9.97618 5.94638 10.5253 6.00581ZM10.7593 13.1362H12.9202L13.1678 10.8482H11.007L10.7593 13.1362Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
5
res/img/element-icons/context-menu.svg
Normal file
5
res/img/element-icons/context-menu.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4.25" cy="9" r="1.25" fill="black"/>
|
||||
<circle cx="9" cy="9" r="1.25" fill="black"/>
|
||||
<circle cx="13.75" cy="9" r="1.25" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
5
res/img/element-icons/hide.svg
Normal file
5
res/img/element-icons/hide.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.74889 6.95039C2.29001 6.28246 2.98613 5.54443 3.83039 4.88884L5.69202 6.75047C5.2553 7.39143 5 8.1659 5 9C5 11.2091 6.79086 13 9 13C9.8341 13 10.6086 12.7447 11.2495 12.308L12.9251 13.9836C11.8136 14.5897 10.5052 15 9 15C5.51954 15 3.0914 12.806 1.7156 11.0714C0.745735 9.84863 0.766473 8.16305 1.74889 6.95039ZM12.9305 9.74631L15.3314 12.1473C15.6913 11.7844 16.0089 11.4187 16.2844 11.0714C17.2543 9.84863 17.2335 8.16305 16.2511 6.95039C14.8432 5.21247 12.3858 3 9 3C8.13025 3 7.32178 3.14599 6.57662 3.39243L8.25369 5.0695C8.49547 5.02387 8.74495 5 9 5C11.2091 5 13 6.79086 13 9C13 9.25505 12.9761 9.50453 12.9305 9.74631Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15892 8.21741C7.05661 8.45779 7 8.7223 7 9.00003C7 10.1046 7.89543 11 9 11C9.27773 11 9.54224 10.9434 9.78262 10.8411L7.15892 8.21741Z" fill="black"/>
|
||||
<path d="M1 1L17 17" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
7
res/img/element-icons/leave.svg
Normal file
7
res/img/element-icons/leave.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 4L18.2139 2.44654C19.1211 2.21972 20 2.90592 20 3.84112V20.1589C20 21.0941 19.1211 21.7803 18.2139 21.5535L12 20V4Z" fill="black"/>
|
||||
<mask id="path-2-inside-1" fill="white">
|
||||
<rect x="4" y="4" width="10" height="16" rx="1.4375"/>
|
||||
</mask>
|
||||
<rect x="4" y="4" width="10" height="16" rx="1.4375" stroke="black" stroke-width="4" mask="url(#path-2-inside-1)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
5
res/img/element-icons/notifications.svg
Normal file
5
res/img/element-icons/notifications.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2375 19.5C10.1625 19.7 10.125 19.9 10.125 20.125C10.125 21.1625 10.9625 22 12 22C13.0375 22 13.875 21.1625 13.875 20.125C13.875 19.9 13.825 19.7 13.7625 19.5H10.2375Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6125 16.0625C18.8625 15.625 18.25 14.8875 18.25 13.75V9.5C18.25 6.05 15.3 3.25 12 3.25C8.7 3.25 5.75 6.05 5.75 9.5V13.75C5.75 14.875 5.125 15.625 4.3875 16.0625C3.8875 16.3625 3.25 16.775 3.25 17.275C3.25 17.85 3.6125 18.2375 4.3625 18.2375H12H19.6375C20.3875 18.2375 20.75 17.8375 20.75 17.275C20.75 16.775 20.125 16.3625 19.6125 16.0625Z" fill="black"/>
|
||||
<path d="M12 4.5C12.6904 4.5 13.25 3.94036 13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3096 2 10.75 2.55964 10.75 3.25C10.75 3.94036 11.3096 4.5 12 4.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 916 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue