sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

Browse Source
This commit is contained in:
Tulir Asokan
2020-08-03 16:49:43 +03:00
parent 4521e9feb1 fba1158700
commit db5121aeca
744 changed files with 33567 additions and 22072 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.scss
+119 -8
View File
@@ -19,7 +19,7 @@ limitations under the License.
@import "./_font-sizes.scss";
:root {
font-size: 15px;
font-size: 10px;
}
html {
@@ -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;
}
@@ -319,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_Dialog_titleImage {
vertical-align: middle;
vertical-align: sub;
width: 25px;
height: 25px;
margin-left: -2px;
@@ -428,6 +427,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 8px;
padding: 0px;
box-shadow: none;
/* Don't show scroll-bars on spinner dialogs */
overflow-x: hidden;
overflow-y: hidden;
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
@@ -581,3 +584,111 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// So it fits in the space provided by the page
max-width: 120px;
}
// A context menu that largely fits the | [icon] [label] | format.
.mx_IconizedContextMenu {
min-width: 146px;
.mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
// the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work
// around the problem. PostCSS doesn't support the opacity() function, and if we
// use something like postcss-functions we quickly run into an issue where the
// function we would define gets passed a CSS variable for custom themes, which
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
//
// Therefore, we just hack in a line and border the thing ourselves
&::before {
border-top: 1px solid $primary-fg-color;
opacity: 0.1;
content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding,
// unless we position it absolutely then it does the right thing).
width: 100%;
position: absolute;
left: 0;
}
}
// round the top corners of the top button for the hover effect to be bounded
&:first-child .mx_AccessibleButton:first-child {
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 8px 8px; // radius matches .mx_ContextualMenu
}
.mx_AccessibleButton {
// pad the inside of the button so that the hover background is padded too
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
// Create a flexbox to more easily define the list items
display: flex;
align-items: center;
&:hover {
background-color: $menu-selected-color;
}
img, .mx_IconizedContextMenu_icon { // icons
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label { // labels
padding-left: 14px;
width: 100%;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
}
}
}
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {
border-radius: $radius;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: $radius;
}
}
res/css/_components.scss
+13 -9
View File
@@ -15,19 +15,20 @@
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss";
@import "./structures/_RightPanel.scss";
@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";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
@@ -46,7 +47,9 @@
@import "./views/auth/_ServerTypeSelector.scss";
@import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@@ -68,10 +71,12 @@
@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";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
@@ -102,7 +107,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";
@@ -115,6 +119,7 @@
@import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_StyledCheckbox.scss";
@import "./views/elements/_StyledRadioButton.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@@ -140,7 +145,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";
@@ -163,32 +167,31 @@
@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";
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_ReplyTile.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomDropTarget.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.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/_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";
@@ -216,7 +219,8 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss";
res/css/_font-sizes.scss
+57 -56
View File
@@ -14,59 +14,60 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$font-1px: 0.067rem;
$font-1-5px: 0.100rem;
$font-2px: 0.133rem;
$font-3px: 0.200rem;
$font-4px: 0.267rem;
$font-5px: 0.333rem;
$font-6px: 0.400rem;
$font-7px: 0.467rem;
$font-8px: 0.533rem;
$font-9px: 0.600rem;
$font-10px: 0.667rem;
$font-10-4px: 0.693rem;
$font-11px: 0.733rem;
$font-12px: 0.800rem;
$font-13px: 0.867rem;
$font-14px: 0.933rem;
$font-15px: 1.000rem;
$font-16px: 1.067rem;
$font-17px: 1.133rem;
$font-18px: 1.200rem;
$font-19px: 1.267rem;
$font-20px: 1.3333333rem;
$font-21px: 1.400rem;
$font-22px: 1.467rem;
$font-23px: 1.533rem;
$font-24px: 1.600rem;
$font-25px: 1.667rem;
$font-26px: 1.733rem;
$font-27px: 1.800rem;
$font-28px: 1.867rem;
$font-29px: 1.933rem;
$font-30px: 2.000rem;
$font-31px: 2.067rem;
$font-32px: 2.133rem;
$font-33px: 2.200rem;
$font-34px: 2.267rem;
$font-35px: 2.333rem;
$font-36px: 2.400rem;
$font-37px: 2.467rem;
$font-38px: 2.533rem;
$font-39px: 2.600rem;
$font-40px: 2.667rem;
$font-41px: 2.733rem;
$font-42px: 2.800rem;
$font-43px: 2.867rem;
$font-44px: 2.933rem;
$font-45px: 3.000rem;
$font-46px: 3.067rem;
$font-47px: 3.133rem;
$font-48px: 3.200rem;
$font-49px: 3.267rem;
$font-50px: 3.333rem;
$font-51px: 3.400rem;
$font-52px: 3.467rem;
$font-88px: 5.887rem;
$font-400px: 26.667rem;
$font-1px: 0.1rem;
$font-1-5px: 0.15rem;
$font-2px: 0.2rem;
$font-3px: 0.3rem;
$font-4px: 0.4rem;
$font-5px: 0.5rem;
$font-6px: 0.6rem;
$font-7px: 0.7rem;
$font-8px: 0.8rem;
$font-9px: 0.9rem;
$font-10px: 1.0rem;
$font-10-4px: 1.04rem;
$font-11px: 1.1rem;
$font-12px: 1.2rem;
$font-13px: 1.3rem;
$font-14px: 1.4rem;
$font-15px: 1.5rem;
$font-16px: 1.6rem;
$font-17px: 1.7rem;
$font-18px: 1.8rem;
$font-19px: 1.9rem;
$font-20px: 2.0rem;
$font-21px: 2.1rem;
$font-22px: 2.2rem;
$font-23px: 2.3rem;
$font-24px: 2.4rem;
$font-25px: 2.5rem;
$font-26px: 2.6rem;
$font-27px: 2.7rem;
$font-28px: 2.8rem;
$font-29px: 2.9rem;
$font-30px: 3.0rem;
$font-31px: 3.1rem;
$font-32px: 3.2rem;
$font-33px: 3.3rem;
$font-34px: 3.4rem;
$font-35px: 3.5rem;
$font-36px: 3.6rem;
$font-37px: 3.7rem;
$font-38px: 3.8rem;
$font-39px: 3.9rem;
$font-40px: 4.0rem;
$font-41px: 4.1rem;
$font-42px: 4.2rem;
$font-43px: 4.3rem;
$font-44px: 4.4rem;
$font-45px: 4.5rem;
$font-46px: 4.6rem;
$font-47px: 4.7rem;
$font-48px: 4.8rem;
$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;
res/css/structures/_ContextualMenu.scss
+1 -1
View File
@@ -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;
res/css/structures/_CustomRoomTagPanel.scss
+4 -2
View File
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// TODO: Update design for custom tags to match new designs
.mx_LeftPanel_tagPanelContainer {
display: flex;
flex-direction: column;
@@ -50,7 +52,7 @@ limitations under the License.
background-color: $accent-color-alt;
width: 5px;
position: absolute;
left: -15px;
left: -9px;
border-radius: 0 3px 3px 0;
top: 2px; // 10 [padding-top] - (56 - 40)/2
top: 5px; // just feels right (see comment above about designs needing to be updated)
}
res/css/structures/_FilePanel.scss
+4
View File
@@ -109,3 +109,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
.mx_FilePanel_empty::before {
mask-image: url('$(res)/img/element-icons/room/files.svg');
}
res/css/structures/_GroupView.scss
+5 -3
View File
@@ -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 {
res/css/structures/_HeaderButtons.scss
+1 -1
View File
@@ -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;
}
res/css/structures/_HomePage.scss
+1 -1
View File
@@ -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;
res/css/structures/_LeftPanel.scss
+154 -156
View File
@@ -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,172 +14,171 @@ 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;
}
// TODO: Remove temporary indicator of new room list implementation.
// This border is meant to visually distinguish between the two components when the
// user has turned on the new room list implementation, at least until the designs
// themselves give it away.
.mx_LeftPanel2 .mx_LeftPanel {
border-left: 5px #e26dff solid;
}
.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 {
overflow: hidden;
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 {
position: relative; // for sticky headers
height: 100%; // ensure scrolling still works
}
}
// 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;
}
}
}
}
}
res/css/structures/_MainSplit.scss
+16 -4
View File
@@ -21,8 +21,20 @@ limitations under the License.
height: 100%;
}
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
&:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes
// set by re-resizable
top: 50% !important;
transform: translate(0, -50%);
height: 64px !important; // to match width of the ones on roomlist
width: 4px !important;
border-radius: 4px !important;
background-color: $primary-fg-color;
opacity: 0.8;
}
}
res/css/structures/_MatrixChat.scss
+22 -1
View File
@@ -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_ResizeHandle) {
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color;
flex: 1 1 0;
@@ -78,3 +78,24 @@ limitations under the License.
*/
height: 100%;
}
.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: 6px;
top: 50%;
transform: translate(0, -50%);
height: 64px; // to match width of the ones on roomlist
width: 4px;
border-radius: 4px;
content: ' ';
background-color: $primary-fg-color;
opacity: 0.8;
}
}
res/css/views/messages/_ReactionsRowButtonTooltip.scss → res/css/structures/_NonUrgentToastContainer.scss
+19 -3
View File
@@ -1,5 +1,5 @@
/*
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.
@@ -14,6 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ReactionsRowButtonTooltip_reactedWith {
opacity: 0.7;
.mx_NonUrgentToastContainer {
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101; // same level as other toasts
.mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
border-radius: 8px;
width: 320px;
font-size: $font-13px;
margin-top: 8px;
// We don't use variables on the colours because we want it to be the same
// in all themes.
background-color: #17191c;
color: #fff;
}
}
res/css/structures/_NotificationPanel.scss
+4
View File
@@ -99,3 +99,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
.mx_NotificationPanel_empty::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
res/css/structures/_RightPanel.scss
+63 -26
View File
@@ -19,10 +19,16 @@ limitations under the License.
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
min-width: 264px;
max-width: 50%;
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 4px 0;
box-sizing: border-box;
height: 100%;
.mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
}
}
.mx_RightPanel_header {
@@ -44,22 +50,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 +71,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 {
@@ -132,3 +144,28 @@ limitations under the License.
order: 2;
margin: auto;
}
.mx_RightPanel_empty {
margin-right: -42px;
h2 {
font-weight: 700;
margin: 16px 0;
}
h2, p {
font-size: $font-14px;
}
&::before {
content: '';
display: block;
margin: 11px auto 29px auto;
height: 42px;
width: 42px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}
res/css/structures/_RoomSearch.scss
+81
View File
@@ -0,0 +1,81 @@
/*
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.
*/
// Note: this component expects to be contained within a flexbox
.mx_RoomSearch {
flex: 1;
border-radius: 20px;
background-color: $roomlist-button-bg-color;
height: 28px;
padding: 2px;
// Create a flexbox for the icons (easier to manage)
display: flex;
align-items: center;
.mx_RoomSearch_icon {
width: 16px;
height: 16px;
mask: url('$(res)/img/feather-customised/search-input.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
margin-left: 7px;
}
.mx_RoomSearch_input {
border: none !important; // !important to override default app-wide styles
flex: 1 !important; // !important to override default app-wide styles
color: $primary-fg-color !important; // !important to override default app-wide styles
padding: 0;
height: 100%;
width: 100%;
font-size: $font-12px;
line-height: $font-16px;
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: $primary-fg-color !important; // !important to override default app-wide styles
}
}
&.mx_RoomSearch_expanded {
.mx_RoomSearch_clearButton {
width: 16px;
height: 16px;
mask-image: url('$(res)/img/feather-customised/x.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
margin-right: 8px;
}
}
.mx_RoomSearch_clearButton {
width: 0;
height: 0;
}
&.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
.mx_RoomSearch_icon {
margin-left: 0;
}
}
}
res/css/structures/_RoomSubList.scss
-187
View File
@@ -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;
}
}
res/css/structures/_RoomView.scss
+1 -1
View File
@@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
margin-top: 10px;
margin-top: 13px;
cursor: pointer;
}
res/css/structures/_TagPanel.scss
+7 -9
View File
@@ -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 {
res/css/structures/_ToastContainer.scss
+20 -3
View File
@@ -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 {
res/css/structures/_TopLeftMenuButton.scss
-49
View File
@@ -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;
}
res/css/structures/_UserMenu.scss
+201
View File
@@ -0,0 +1,201 @@
/*
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_UserMenu {
// to make the ... button sort of aligned with the explore button below
padding-right: 6px;
.mx_UserMenu_headerButtons {
width: 16px;
height: 16px;
position: relative;
display: block;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
}
.mx_UserMenu_row {
// Create a row-based flexbox to ensure items stay aligned correctly.
display: flex;
align-items: center;
.mx_UserMenu_userAvatarContainer {
position: relative; // to make default avatars work
margin-right: 8px;
height: 32px; // to remove the unknown 4px gap the browser puts below it
.mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size
object-fit: cover;
}
}
.mx_UserMenu_userName {
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_headerButtons {
// No special styles: the rest of the layout happens to make it work.
}
}
&.mx_UserMenu_minimized {
.mx_UserMenu_userHeader {
.mx_UserMenu_row {
justify-content: center;
}
.mx_UserMenu_userAvatarContainer {
margin-right: 0;
}
}
}
}
.mx_UserMenu_contextMenu {
width: 247px;
.mx_UserMenu_contextMenu_redRow {
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_UserMenu_contextMenu_header {
padding: 20px;
// Create a flexbox to organize the header a bit easier
display: flex;
align-items: center;
.mx_UserMenu_contextMenu_name {
// Create another flexbox of columns to handle large user IDs
display: flex;
flex-direction: column;
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
* {
// Automatically grow all subelements to fit the container
flex: 1;
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_contextMenu_displayName {
font-weight: bold;
font-size: $font-15px;
line-height: $font-20px;
}
.mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
line-height: $font-24px;
}
}
.mx_UserMenu_contextMenu_themeButton {
min-width: 32px;
max-width: 32px;
width: 32px;
height: 32px;
margin-left: 8px;
border-radius: 32px;
background-color: $theme-button-bg-color;
cursor: pointer;
// to make alignment easier, create flexbox for the image
display: flex;
align-items: center;
justify-content: center;
}
}
.mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
&::before {
content: '';
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_UserMenu_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_UserMenu_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_UserMenu_iconLock::before {
mask-image: url('$(res)/img/element-icons/security.svg');
}
.mx_UserMenu_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_UserMenu_iconArchive::before {
mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
}
.mx_UserMenu_iconMessage::before {
mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
}
.mx_UserMenu_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
}
res/css/views/auth/_AuthBody.scss
+14
View File
@@ -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 {
@@ -146,3 +151,12 @@ limitations under the License.
.mx_AuthBody_spinner {
margin: 1em 0;
}
@media only screen and (max-width: 480px) {
.mx_AuthBody {
border-radius: 4px;
width: auto;
max-width: 500px;
padding: 10px;
}
}
res/css/views/auth/_AuthHeader.scss
+6
View File
@@ -21,3 +21,9 @@ limitations under the License.
padding: 25px 40px;
box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
.mx_AuthHeader {
display: none;
}
}
res/css/views/auth/_AuthHeaderLogo.scss
+6
View File
@@ -23,3 +23,9 @@ limitations under the License.
.mx_AuthHeaderLogo img {
width: 100%;
}
@media only screen and (max-width: 480px) {
.mx_AuthHeaderLogo {
display: none;
}
}
res/css/views/auth/_AuthPage.scss
+6
View File
@@ -29,3 +29,9 @@ limitations under the License.
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}
@media only screen and (max-width: 480px) {
.mx_AuthPage_modal {
margin-top: 0;
}
}
res/css/views/auth/_PassphraseField.scss
+1 -19
View File
@@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
$PassphraseStrengthMedium: $username-variant5-color;
$PassphraseStrengthLow: $notice-primary-color;
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
progress.mx_PassphraseField_progress {
appearance: none;
width: 100%;
@@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
position: absolute;
top: -12px;
border-radius: 2px;
&::-moz-progress-bar {
border-radius: 2px;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: 2px;
}
@mixin ProgressBarBorderRadius "2px";
@mixin ProgressBarColour $PassphraseStrengthLow;
&[value="2"], &[value="3"] {
@mixin ProgressBarColour $PassphraseStrengthMedium;
res/css/views/rooms/_UserOnlineDot.scss → res/css/views/avatars/_DecoratedRoomAvatar.scss
+18 -7
View File
@@ -1,5 +1,5 @@
/*
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.
@@ -14,10 +14,21 @@ 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;
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative;
.mx_RoomTileIcon {
position: absolute;
bottom: 0;
right: 0;
}
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
width: 18px;
}
}
res/css/views/rooms/_RoomSublist2.scss → res/css/views/avatars/_PulsedAvatar.scss
+12 -3
View File
@@ -14,8 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import "../../../../node_modules/react-resizable/css/styles.css";
.mx_PulsedAvatar {
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
}
100% {
box-shadow: 0 0 0 6px rgba($accent-color, 0);
}
}
.mx_RoomList2 .mx_RoomSubList_labelContainer {
z-index: 12;
img {
animation: shadow-pulse 1s infinite;
}
}
res/css/views/context_menus/_TagTileContextMenu.scss
+14 -8
View File
@@ -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 {
res/css/views/dialogs/_RebrandDialog.scss
+64
View File
@@ -0,0 +1,64 @@
/*
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: 30px;
height: 30px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
transform: rotate(-90deg);
}
res/css/views/dialogs/_RoomSettingsDialog.scss
+5 -5
View File
@@ -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 {
res/css/views/dialogs/_ServerOfflineDialog.scss
+72
View File
@@ -0,0 +1,72 @@
/*
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_ServerOfflineDialog {
.mx_ServerOfflineDialog_content {
padding-right: 85px;
color: $primary-fg-color;
hr {
border-color: $primary-fg-color;
opacity: 0.1;
border-bottom: none;
}
ul {
padding: 16px;
li:nth-child(n + 2) {
margin-top: 16px;
}
}
.mx_ServerOfflineDialog_content_context {
.mx_ServerOfflineDialog_content_context_timestamp {
display: inline-block;
width: 115px;
color: $muted-fg-color;
line-height: 24px; // same as avatar
vertical-align: top;
}
.mx_ServerOfflineDialog_content_context_timeline {
display: inline-block;
width: calc(100% - 155px); // 115px timestamp width + 40px right margin
.mx_ServerOfflineDialog_content_context_timeline_header {
span {
margin-left: 8px;
vertical-align: middle;
}
}
.mx_ServerOfflineDialog_content_context_txn {
position: relative;
margin-top: 8px;
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px); // 100px is an arbitrary margin for the button
}
.mx_AccessibleButton {
float: right;
padding: 0;
}
}
}
}
}
}
res/css/views/dialogs/_ShareDialog.scss
+1 -1
View File
@@ -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 {
res/css/views/dialogs/_UserSettingsDialog.scss
+10 -10
View File
@@ -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');
}
res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
+66 -7
View File
@@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
.mx_AccessSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
}
.mx_AccessSecretStorageDialog_passPhraseInput,
.mx_AccessSecretStorageDialog_recoveryKeyInput {
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: 16px;
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-right: 5px;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
color: $input-valid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
color: $input-invalid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
+75 -13
View File
@@ -48,6 +48,29 @@ limitations under the License.
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
text-align: center;
}
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding-top: 20px;
@@ -59,6 +82,36 @@ limitations under the License.
display: block;
}
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
margin-bottom: 16px;
padding: 11px;
}
.mx_CreateSecretStorageDialog_optionTitle {
color: $dialog-title-fg-color;
font-weight: 600;
font-size: $font-18px;
padding-bottom: 10px;
}
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_passPhraseContainer {
display: flex;
align-items: flex-start;
@@ -73,33 +126,42 @@ limitations under the License.
margin-left: 20px;
}
.mx_CreateSecretStorageDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
display: flex;
width: 380px;
margin-left: auto;
margin-right: auto;
}
.mx_CreateSecretStorageDialog_recoveryKey {
width: 262px;
font-weight: bold;
text-align: center;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
margin-right: 12px;
border-radius: 6px;
word-spacing: 1em;
margin-bottom: 20px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
margin-right: 10px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
flex: 1;
width: 160px;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
}
.mx_CreateSecretStorageDialog_continueSpinner {
margin-top: 33px;
text-align: right;
}
.mx_CreateSecretStorageDialog_continueSpinner img {
width: 20px;
height: 20px;
}
res/css/views/directory/_NetworkDropdown.scss
+5 -4
View File
@@ -145,13 +145,14 @@ limitations under the License.
&::after {
content: "";
position: absolute;
width: 24px;
height: 24px;
right: -28px; // - (24 + 4)
width: 26px;
height: 26px;
right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
top: -3px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color;
}
res/css/views/elements/_Field.scss
+1 -1
View File
@@ -191,5 +191,5 @@ limitations under the License.
}
.mx_Field .mx_CountryDropdown {
width: 67px;
width: $font-78px;
}
res/css/views/elements/_InlineSpinner.scss
+1 -1
View File
@@ -18,7 +18,7 @@ limitations under the License.
display: inline;
}
.mx_InlineSpinner img {
.mx_InlineSpinner_spin img {
margin: 0px 6px;
vertical-align: -3px;
}
res/css/views/elements/_InteractiveTooltip.scss
-91
View File
@@ -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
}
}
res/css/views/elements/_ProgressBar.scss
+22 -8
View File
@@ -1,5 +1,5 @@
/*
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.
@@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ProgressBar {
height: 5px;
border: 1px solid $progressbar-color;
}
progress.mx_ProgressBar {
height: 4px;
width: 60px;
border-radius: 10px;
overflow: hidden;
appearance: none;
border: 0;
.mx_ProgressBar_fill {
height: 100%;
background-color: $progressbar-color;
@mixin ProgressBarBorderRadius "10px";
@mixin ProgressBarColour $accent-color;
::-webkit-progress-value {
transition: width 1s;
}
::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
height: 0;
}
}
res/css/views/elements/_ResizeHandle.scss
+1 -1
View File
@@ -34,7 +34,7 @@ limitations under the License.
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
padding: 0 8px 0 0;
}
.mx_ResizeHandle > div {
res/css/views/elements/_StyledCheckbox.scss
+19 -1
View File
@@ -24,7 +24,9 @@ limitations under the License.
align-items: flex-start;
input[type=checkbox] {
display: none;
appearance: none;
margin: 0;
padding: 0;
& + label {
display: flex;
@@ -48,6 +50,8 @@ limitations under the License.
border-radius: $border-radius;
img {
display: none;
height: 100%;
width: 100%;
filter: invert(100%);
@@ -57,10 +61,24 @@ limitations under the License.
&:checked + label > .mx_Checkbox_background {
background: $accent-color;
border-color: $accent-color;
img {
display: block;
}
}
& + label > *:not(.mx_Checkbox_background) {
margin-left: 10px;
}
&:disabled + label {
opacity: 0.5;
cursor: not-allowed;
}
&:checked:disabled + label > .mx_Checkbox_background {
background-color: $accent-color;
border-color: $accent-color;
}
}
}
res/css/views/elements/_StyledRadioButton.scss
+117
View File
@@ -0,0 +1,117 @@
/*
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.
*/
/**
* This component expects the parent to specify a positive padding and
* width
*/
.mx_RadioButton {
$radio-circle-color: $muted-fg-color;
$active-radio-circle-color: $accent-color;
position: relative;
display: flex;
align-items: baseline;
flex-grow: 1;
> .mx_RadioButton_content {
flex-grow: 1;
display: flex;
flex-direction: column;
margin-left: 8px;
margin-right: 8px;
}
.mx_RadioButton_spacer {
flex-shrink: 0;
flex-grow: 0;
height: $font-16px;
width: $font-16px;
}
> input[type=radio] {
// Remove the OS's representation
margin: 0;
padding: 0;
appearance: none;
+ div {
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: $font-16px;
width: $font-16px;
border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px;
> div {
box-sizing: border-box;
height: $font-8px;
width: $font-8px;
border-radius: $font-8px;
}
}
&:checked {
& + div {
border-color: $active-radio-circle-color;
& > div {
background: $active-radio-circle-color;
}
}
}
&:disabled {
& + div,
& + div + span {
opacity: 0.5;
cursor: not-allowed;
}
& + div {
border-color: $radio-circle-color;
}
}
&:checked:disabled {
& + div > div {
background-color: $radio-circle-color;
}
}
}
}
.mx_RadioButton_outlined {
border: 1px solid $input-darker-bg-color;
border-radius: 8px;
}
.mx_RadioButton_checked {
border-color: $accent-color;
}
res/css/views/elements/_Tooltip.scss
+29 -18
View File
@@ -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: 4000; // Higher than dialogs so tooltips can be used in dialogs
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;
}
res/css/views/messages/_MessageActionBar.scss
+4 -4
View File
@@ -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');
}
res/css/views/messages/_MessageTimestamp.scss
+1
View File
@@ -17,4 +17,5 @@ limitations under the License.
.mx_MessageTimestamp {
color: $event-timestamp-color;
font-size: $font-10px;
font-variant-numeric: tabular-nums;
}
res/css/views/messages/_ReactionsRowButton.scss
-6
View File
@@ -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;
res/css/views/messages/_common_CryptoEvent.scss
+23 -6
View File
@@ -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 {
res/css/views/right_panel/_UserInfo.scss
+2 -2
View File
@@ -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;
}
res/css/views/rooms/_AppsDrawer.scss
+2 -1
View File
@@ -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 {
res/css/views/rooms/_Autocomplete.scss
+2 -1
View File
@@ -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 {
res/css/views/rooms/_E2EIcon.scss
+45 -15
View File
@@ -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;
}
res/css/views/rooms/_EntityTile.scss
-2
View File
@@ -26,8 +26,6 @@ limitations under the License.
position: absolute;
bottom: 2px;
right: 7px;
height: 15px;
width: 15px;
}
}
res/css/views/rooms/_EventTile.scss
+65 -19
View File
@@ -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,29 +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 {
&::after {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
}
opacity: 1;
}
@@ -392,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 {
@@ -403,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,
@@ -500,7 +536,7 @@ limitations under the License.
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
top: 8px;
right: 6px;
width: 19px;
height: 19px;
@@ -532,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 {
@@ -572,3 +607,14 @@ limitations under the License.
margin-left: 1em;
}
}
@media only screen and (max-width: 480px) {
.mx_EventTile_line, .mx_EventTile_reply {
padding-left: 0;
margin-right: 0;
}
.mx_EventTile_content {
margin-top: 10px;
margin-right: 0;
}
}
res/css/views/rooms/_GroupLayout.scss
+4 -4
View File
@@ -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 {
@@ -108,12 +108,12 @@ $left-gutter: 65px;
top: 27px;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars {
&.mx_EventTile_continuation .mx_EventTile_readAvatars,
&.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}
.mx_EventTile_info .mx_EventTile_readAvatars {
&.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
}
res/css/views/rooms/_IRCLayout.scss
+16 -9
View File
@@ -43,6 +43,10 @@ $irc-line-height: $font-18px;
> .mx_EventTile_msgOption {
order: 5;
flex-shrink: 0;
.mx_EventTile_readAvatars {
top: 0.2rem; // ($irc-line-height - avatar height) / 2
}
}
> .mx_SenderProfile {
@@ -78,7 +82,7 @@ $irc-line-height: $font-18px;
align-items: center;
// Need to use important to override the js provided height and width values.
> .mx_BaseAvatar, .mx_BaseAvatar > * {
> .mx_BaseAvatar, > .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
@@ -93,13 +97,19 @@ $irc-line-height: $font-18px;
}
> .mx_EventTile_e2eIcon {
position: relative;
position: absolute;
right: unset;
left: unset;
top: 0;
padding: 0;
order: 3;
flex-shrink: 0;
flex-grow: 0;
height: $font-18px;
background-position: center;
}
.mx_EventTile_line {
@@ -111,11 +121,6 @@ $irc-line-height: $font-18px;
}
}
.mx_EvenTile_line .mx_MessageActionBar,
.mx_EvenTile_line .mx_ReplyThread_wrapper {
display: block;
}
.mx_EventTile_reply {
order: 4;
}
@@ -176,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);
}
}
}
res/css/views/rooms/_InviteOnlyIcon.scss
-58
View File
@@ -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;
}
}
res/css/views/rooms/_JumpToBottomButton.scss
+9 -4
View File
@@ -41,6 +41,11 @@ limitations under the License.
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $accent-fg-color;
background-color: $muted-fg-color;
}
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: $secondary-accent-color;
background-color: $warning-color;
}
@@ -51,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;
}
@@ -62,8 +67,8 @@ limitations under the License.
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
mask-size: contain;
background: $muted-fg-color;
}
res/css/views/rooms/_MemberList.scss
+22 -14
View File
@@ -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');
}
res/css/views/rooms/_MessageComposer.scss
+15 -10
View File
@@ -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 {
res/css/views/rooms/_MessageComposerFormatBar.scss
+5 -5
View File
@@ -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');
}
}
res/css/views/rooms/_NotificationBadge.scss
+72
View File
@@ -0,0 +1,72 @@
/*
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_NotificationBadge {
&:not(.mx_NotificationBadge_visible) {
display: none;
}
// Badges are structured a bit weirdly to work around issues with non-monospace
// font styles. The badge pill is actually a background div and the count floats
// within that. For example:
//
// ( 99+ ) <-- Rounded pill is a _bg class.
// ^- The count is an element floating within that.
&.mx_NotificationBadge_visible {
background-color: $roomtile-default-badge-bg-color;
// Create a flexbox to order the count a bit easier
display: flex;
align-items: center;
justify-content: center;
&.mx_NotificationBadge_highlighted {
// TODO: Use a more specific variable
background-color: $warning-color;
}
// 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: $font-16px;
height: $font-16px;
border-radius: $font-16px;
}
&.mx_NotificationBadge_3char {
width: $font-26px;
height: $font-16px;
border-radius: $font-16px;
}
// The following is the floating badge
.mx_NotificationBadge_count {
font-size: $font-10px;
line-height: $font-14px;
color: #fff; // TODO: Variable
}
}
}
res/css/views/rooms/_ReplyPreview.scss
+2 -1
View File
@@ -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 {
res/css/views/rooms/_RoomBreadcrumbs.scss
+29 -85
View File
@@ -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;
}
res/css/views/rooms/_RoomDropTarget.scss
-55
View File
@@ -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;
}
res/css/views/rooms/_RoomHeader.scss
+51 -23
View File
@@ -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 {
@@ -267,3 +286,12 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
}
.mx_RoomHeader {
overflow: hidden;
}
}
res/css/views/rooms/_RoomList.scss
+2 -53
View File
@@ -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,6 @@ 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;
}
.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;
padding-right: 7px; // width of the scrollbar, to line things up
}
res/css/views/rooms/_RoomPreviewBar.scss
-5
View File
@@ -58,11 +58,6 @@ limitations under the License.
}
}
.mx_RoomPreviewBar_dark {
background-color: $tagpanel-bg-color;
color: $accent-fg-color;
}
.mx_RoomPreviewBar_actions {
display: flex;
}
res/css/views/rooms/_RoomSublist.scss
+389
View File
@@ -0,0 +1,389 @@
/*
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_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
align-items: center;
// ***************************
// Sticky Headers Start
// Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
// headerContainer, however due to our layout concerns we actually have to
// calculate it manually so we can sticky things in the right places. We also
// target the headerText instead of the container to reduce jumps when scrolling,
// and to help hide the badges/other buttons that could appear on hover. This
// 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 LeftPanel component for sticky headers
// to work correctly.
padding-bottom: 8px;
height: 24px;
color: $roomlist-header-color;
.mx_RoomSublist_stickable {
flex: 1;
max-width: 100%;
// Create a flexbox to make ordering easy
display: flex;
align-items: center;
// We use a generic sticky class for 2 reasons: to reduce style duplication and
// 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_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; // to match the header container
// width set by JS
width: calc(100% - 22px);
}
&.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_RoomSublist_headerContainer_stickyTop, is applied though.
}
// Sticky Headers End
// ***************************
.mx_RoomSublist_badgeContainer {
// Create another flexbox row because it's super easy to position the badge this way.
display: flex;
align-items: center;
justify-content: center;
// Apply the width and margin to the badge so the container doesn't occupy dead space
.mx_NotificationBadge {
// Do not set a width so the badges get properly sized
margin-left: 8px; // same as menu+aux buttons
}
}
&:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
}
}
.mx_RoomSublist_auxButton,
.mx_RoomSublist_menuButton {
margin-left: 8px; // should be the same as the notification badge
position: relative;
width: 24px;
height: 24px;
border-radius: 32px;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 4px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $muted-fg-color;
}
}
// Hide the menu button by default
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
}
.mx_RoomSublist_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
line-height: $font-16px;
font-size: $font-13px;
font-weight: 600;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 14px;
height: 14px;
margin-right: 6px;
&::before {
content: '';
width: 18px;
height: 18px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_RoomSublist_collapseBtn_collapsed::before {
transform: rotate(-90deg);
}
}
}
}
// 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
display: flex;
flex-direction: column;
overflow: hidden;
.mx_RoomSublist_tiles {
flex: 1 0 0;
overflow: hidden;
// need this to be flex otherwise the overflow hidden from above
// sometimes vertically centers the clipped list ... no idea why it would do this
// 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_RoomSublist_resizerHandles_showNButton {
flex: 0 0 32px;
}
.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_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
// Override styles from library
width: unset !important;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
// This is positioned directly below the 'show more' button.
position: absolute;
bottom: 0 !important; // override from library
// Together, these make the bar 64px wide
// These are also overridden from the library
left: calc(50% - 32px) !important;
right: calc(50% - 32px) !important;
}
&:hover, &.mx_RoomSublist_hasMenuOpen {
.mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}
.mx_RoomSublist_showNButton {
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
height: 24px;
padding-bottom: 4px;
// We create a flexbox to cheat at alignment
display: flex;
align-items: center;
.mx_RoomSublist_showNButtonChevron {
position: relative;
width: 18px;
height: 18px;
margin-left: 12px;
margin-right: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomlist-header-color;
left: -1px; // adjust for image position
}
.mx_RoomSublist_showMoreButtonChevron,
.mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_RoomSublist_showLessButtonChevron {
transform: rotate(180deg);
}
}
&.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_RoomSublist_minimized {
.mx_RoomSublist_headerContainer {
height: auto;
flex-direction: column;
position: relative;
.mx_RoomSublist_badgeContainer {
order: 0;
align-self: flex-end;
margin-right: 0;
}
.mx_RoomSublist_stickable {
order: 1;
max-width: 100%;
}
.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: $roomlist-button-bg-color;
margin-top: 8px;
&::before {
top: 8px;
left: 8px;
}
}
}
.mx_RoomSublist_resizeBox {
align-items: center;
}
.mx_RoomSublist_showNButton {
flex-direction: column;
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px; // to center
}
}
.mx_RoomSublist_menuButton {
height: 16px;
}
&.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
right: 0;
width: 16px;
height: 16px;
border-radius: 0;
z-index: 1; // occlude the list name
// This is the same color as the left panel background because it needs
// to occlude the sublist title
background-color: $roomlist-bg-color;
&::before {
top: 0;
left: 0;
}
}
&.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.
}
}
}
}
}
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
hr {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; // additional 16px
border: 1px solid $roomsublist-divider-color;
opacity: 0.1;
}
.mx_RoomSublist_contextMenu_title {
font-size: $font-15px;
line-height: $font-20px;
font-weight: 600;
margin-bottom: 4px;
}
.mx_RadioButton, .mx_Checkbox {
margin-top: 8px;
}
}
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
res/css/views/rooms/_RoomTile.scss
+197 -190
View File
@@ -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,222 @@ 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_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;
}
res/css/views/rooms/_RoomTileIcon.scss
+69
View File
@@ -0,0 +1,69 @@
/*
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_RoomTileIcon {
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $roomlist-bg-color; // to match the room list itself
}
.mx_RoomTileIcon_globe::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/globe.svg');
}
.mx_RoomTileIcon_offline::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-offline;
}
.mx_RoomTileIcon_online::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-online;
}
.mx_RoomTileIcon_away::before {
content: '';
width: 8px;
height: 8px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 8px;
background-color: $presence-away;
}
res/css/views/rooms/_Stickers.scss
+1 -1
View File
@@ -31,7 +31,7 @@
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
text-decoration: underline;
color: $button-link-fg-color;
}
.mx_Stickers_hideStickers {
res/css/views/rooms/_TopUnreadMessagesBar.scss
+10 -9
View File
@@ -28,7 +28,7 @@ limitations under the License.
content: "";
position: absolute;
top: -8px;
left: 11px;
left: 10.5px;
width: 4px;
height: 4px;
border-radius: 16px;
@@ -42,19 +42,20 @@ 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;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
width: 36px;
height: 36px;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
mask-size: contain;
background: $muted-fg-color;
transform: rotate(180deg);
}
.mx_TopUnreadMessagesBar_markAsRead {
@@ -62,7 +63,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 +77,5 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
background: $roomtile-name-color;
background: $muted-fg-color;
}
res/css/views/rooms/_WhoIsTypingTile.scss
+1 -1
View File
@@ -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 {
res/css/views/settings/_AvatarSetting.scss
-22
View File
@@ -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 {
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+188 -3
View File
@@ -15,31 +15,216 @@ limitations under the License.
*/
.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
.mx_AppearanceUserSettingsTab_fontSlider_preview,
.mx_AppearanceUserSettingsTab_Layout {
@mixin mx_Settings_fullWidthField;
}
.mx_AppearanceUserSettingsTab .mx_Field {
width: 256px;
}
.mx_AppearanceUserSettingsTab_fontScaling {
color: $primary-fg-color;
}
.mx_AppearanceUserSettingsTab_fontSlider {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
background: $font-slider-bg-color;
background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px;
font-size: 10px;
margin-top: 24px;
margin-bottom: 24px;
}
.mx_AppearanceUserSettingsTab_fontSlider_preview {
border: 1px solid $appearance-tab-border-color;
border-radius: 10px;
padding: 0 16px 9px 16px;
pointer-events: none;
.mx_EventTile_msgOption {
display: none;
}
&.mx_IRCLayout {
padding-top: 9px;
}
}
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px;
padding-right: 20px;
padding-left: 5px;
font-weight: 500;
}
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px;
padding-left: 20px;
padding-right: 5px;
font-weight: 500;
}
.mx_AppearanceUserSettingsTab {
> .mx_SettingsTab_SubHeading {
margin-bottom: 32px;
}
}
.mx_AppearanceUserSettingsTab_themeSection {
$radio-bg-color: $input-darker-bg-color;
color: $primary-fg-color;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 4px;
margin-bottom: 30px;
> .mx_RadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
background: $radio-bg-color;
opacity: 0.4;
flex-shrink: 1;
flex-grow: 0;
margin-right: 15px;
margin-top: 10px;
font-weight: 600;
color: $muted-fg-color;
> span {
justify-content: center;
}
}
> .mx_RadioButton_enabled {
opacity: 1;
// These colors need to be hardcoded because they don't change with the theme
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
&.mx_ThemeSelector_dark {
// 5% lightened version of 181b21
background-color: #25282e;
color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
}
&.mx_ThemeSelector_black {
background-color: #000000;
color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
}
}
}
}
.mx_SettingsTab_customFontSizeField {
margin-left: calc($font-16px + 10px);
}
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
display: flex;
flex-direction: row;
color: $primary-fg-color;
.mx_AppearanceUserSettingsTab_spacer {
width: 24px;
}
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
width: 300px;
border: 1px solid $appearance-tab-border-color;
border-radius: 10px;
.mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none;
}
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
flex-grow: 1;
display: flex;
align-items: center;
padding: 10px;
pointer-events: none;
}
.mx_RadioButton {
flex-grow: 0;
padding: 10px;
}
.mx_EventTile_content {
margin-right: 0;
}
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: $accent-color;
}
}
.mx_RadioButton {
border-top: 1px solid $appearance-tab-border-color;
> input + div {
border-color: rgba($muted-fg-color, 0.2);
}
}
.mx_RadioButton_checked {
background-color: rgba($accent-color, 0.08);
}
}
.mx_AppearanceUserSettingsTab_Advanced {
color: $primary-fg-color;
> * {
margin-bottom: 16px;
}
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: $accent-color;
cursor: pointer;
}
.mx_AppearanceUserSettingsTab_systemFont {
margin-left: calc($font-16px + 10px);
}
}
res/css/views/toasts/_NonUrgentEchoFailureToast.scss
+37
View File
@@ -0,0 +1,37 @@
/*
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_NonUrgentEchoFailureToast {
.mx_NonUrgentEchoFailureToast_icon {
display: inline-block;
width: $font-18px;
height: $font-18px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: #fff; // we know that non-urgent toasts are always styled the same
mask-image: url('$(res)/img/element-icons/cloud-off.svg');
margin-right: 8px;
}
span { // includes the i18n block
vertical-align: middle;
}
.mx_AccessibleButton {
padding: 0;
}
}
res/css/views/voip/_CallContainer.scss
+89
View File
@@ -0,0 +1,89 @@
/*
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_CallContainer {
position: absolute;
right: 20px;
bottom: 72px;
border-radius: 8px;
overflow: hidden;
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
cursor: pointer;
.mx_CallPreview {
.mx_VideoView {
width: 350px;
}
.mx_VideoView_localVideoFeed {
border-radius: 8px;
overflow: hidden;
}
}
.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
padding: 8px;
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
img {
margin: 8px;
}
> div {
display: flex;
flex-direction: column;
justify-content: center;
}
h1, p {
margin: 0px;
padding: 0px;
font-size: $font-14px;
line-height: $font-16px;
}
h1 {
font-weight: bold;
}
}
.mx_IncomingCallBox_buttons {
padding: 8px;
display: flex;
flex-direction: row;
> .mx_IncomingCallBox_spacer {
width: 8px;
}
> * {
flex-shrink: 0;
flex-grow: 1;
margin-right: 0;
font-size: $font-15px;
line-height: $font-24px;
}
}
}
}
res/css/views/voip/_CallView.scss
+71 -2
View File
@@ -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;
}
}
res/css/views/voip/_IncomingCallbox.scss
-69
View File
@@ -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;
}