mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-06 06:28:27 +00:00
Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering
This commit is contained in:
Tulir Asokan
@@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 5px solid $widget-menu-bar-bg-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_AppTile_mini {
|
||||
@@ -98,6 +98,7 @@ $AppsDrawerBodyHeight: 273px;
|
||||
|
||||
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
||||
height: 114px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar {
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
|
||||
@@ -22,28 +22,58 @@ limitations under the License.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_warning::after,
|
||||
.mx_E2EIcon_normal::after,
|
||||
.mx_E2EIcon_verified::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
.mx_E2EIcon_warning,
|
||||
.mx_E2EIcon_normal,
|
||||
.mx_E2EIcon_verified {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// white infill for the transparency
|
||||
.mx_E2EIcon::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 90%;
|
||||
}
|
||||
|
||||
// transparent-looking border surrounding the shield for when overlain over avatars
|
||||
.mx_E2EIcon_bordered {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
// shrink the actual badge
|
||||
&::after {
|
||||
mask-size: 75%;
|
||||
}
|
||||
// shrink the infill of the badge
|
||||
&::before {
|
||||
mask-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_E2EIcon_warning::after {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_normal::after {
|
||||
background-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_verified::after {
|
||||
background-image: url('$(res)/img/e2e/verified.svg');
|
||||
mask-image: url('$(res)/img/e2e/verified.svg');
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
@@ -26,8 +26,6 @@ limitations under the License.
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 7px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$left-gutter: 64px;
|
||||
|
||||
.mx_EventTile {
|
||||
max-width: 100%;
|
||||
clear: both;
|
||||
@@ -45,7 +47,7 @@ limitations under the License.
|
||||
|
||||
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
|
||||
top: $font-8px;
|
||||
left: 65px;
|
||||
left: $left-gutter;
|
||||
}
|
||||
|
||||
.mx_EventTile_continuation {
|
||||
@@ -73,7 +75,7 @@ limitations under the License.
|
||||
/* the next three lines, along with overflow hidden, truncate long display names */
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 65px);
|
||||
max-width: calc(100% - $left-gutter);
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile .mx_Flair {
|
||||
@@ -111,7 +113,7 @@ limitations under the License.
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
position: relative;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-left: $left-gutter;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -182,7 +184,7 @@ limitations under the License.
|
||||
* TODO: ultimately we probably want some transition on here.
|
||||
*/
|
||||
.mx_EventTile_selected > .mx_EventTile_line {
|
||||
border-left: $accent-color 5px solid;
|
||||
border-left: $accent-color 4px solid;
|
||||
padding-left: 60px;
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
@@ -328,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@define-mixin mx_InviteOnlyIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@define-mixin mx_InviteOnlyIcon_padlock {
|
||||
background-color: $roomtile-name-color;
|
||||
mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_InviteOnlyIcon_large {
|
||||
@mixin mx_InviteOnlyIcon;
|
||||
margin: 0 4px;
|
||||
|
||||
&::before {
|
||||
@mixin mx_InviteOnlyIcon_padlock;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteOnlyIcon_small {
|
||||
@mixin mx_InviteOnlyIcon;
|
||||
left: -2px;
|
||||
|
||||
&::before {
|
||||
@mixin mx_InviteOnlyIcon_padlock;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
@@ -41,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;
|
||||
}
|
||||
|
||||
@@ -26,6 +26,10 @@ limitations under the License.
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
@@ -59,32 +63,27 @@ limitations under the License.
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 1 1 0;
|
||||
|
||||
// stricter rule to override the one in _common.scss
|
||||
&[type="text"] {
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mx_MemberList_wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.mx_MemberList_invite,
|
||||
.mx_RightPanel_invite {
|
||||
.mx_MemberList_invite {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
background-color: $button-bg-color;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin: 9px;
|
||||
margin: 5px 9px 9px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $button-fg-color;
|
||||
font-weight: 600;
|
||||
|
||||
.mx_RightPanel_icon {
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_invite.mx_AccessibleButton_disabled {
|
||||
@@ -93,8 +92,17 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberList_invite span {
|
||||
background-image: url('$(res)/img/feather-customised/user-add.svg');
|
||||
background-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 25px;
|
||||
background-size: 20px;
|
||||
padding: 8px 0 8px 25px;
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteCommunity span {
|
||||
background-image: url('$(res)/img/icon-invite-people.svg');
|
||||
}
|
||||
|
||||
.mx_MemberList_addRoomToCommunity span {
|
||||
background-image: url('$(res)/img/icons-room-add.svg');
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
margin: auto;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
padding-left: 84px;
|
||||
padding-left: 82px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_replaced_wrapper {
|
||||
@@ -60,7 +60,7 @@ limitations under the License.
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
|
||||
@@ -76,8 +76,8 @@ limitations under the License.
|
||||
left: 60px;
|
||||
margin-right: 0; // Counteract the E2EIcon class
|
||||
margin-left: 3px; // Counteract the E2EIcon class
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
@@ -196,30 +196,35 @@ limitations under the License.
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
&.mx_MessageComposer_hangup::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_MessageComposer_upload::before {
|
||||
mask-image: url('$(res)/img/feather-customised/paperclip.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_hangup::before {
|
||||
mask-image: url('$(res)/img/hangup.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_voicecall::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_videocall::before {
|
||||
mask-image: url('$(res)/img/feather-customised/video.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_emoji::before {
|
||||
mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_stickers::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sticker.custom.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatting {
|
||||
|
||||
@@ -75,23 +75,23 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconBold::after {
|
||||
mask-image: url('$(res)/img/format/bold.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconItalic::after {
|
||||
mask-image: url('$(res)/img/format/italics.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
|
||||
mask-image: url('$(res)/img/format/strikethrough.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconQuote::after {
|
||||
mask-image: url('$(res)/img/format/quote.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconCode::after {
|
||||
mask-image: url('$(res)/img/format/code.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,9 +22,10 @@ limitations under the License.
|
||||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@@ -15,98 +15,42 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomBreadcrumbs {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
padding: 8px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
// Create a flexbox for the crumbs
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
// repeating circles as empty placeholders
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
$breadcrumb-placeholder-bg-color,
|
||||
$breadcrumb-placeholder-bg-color 15px,
|
||||
transparent 16px
|
||||
);
|
||||
background-size: 36px;
|
||||
background-position: 6px -1px;
|
||||
background-repeat: repeat-x;
|
||||
|
||||
|
||||
// Autohide the scrollbar
|
||||
overflow-x: hidden;
|
||||
&:hover {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
.mx_RoomBreadcrumbs_crumb {
|
||||
margin-left: 4px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s, width 0.3s;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_dmIndicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_animate {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_preAnimate {
|
||||
width: 0;
|
||||
transform: scale(0);
|
||||
// These classes come from the CSSTransition component. There's many more classes we
|
||||
// could care about, but this is all we worried about for now. The animation works by
|
||||
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
|
||||
// sliding it into view.
|
||||
&.mx_RoomBreadcrumbs-enter {
|
||||
margin-left: -40px; // 32px for the avatar, 8px for the margin
|
||||
}
|
||||
&.mx_RoomBreadcrumbs-enter-active {
|
||||
margin-left: 0;
|
||||
|
||||
// Timing function is as-requested by design.
|
||||
// NOTE: The transition time MUST match the value passed to CSSTransition!
|
||||
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_left {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
|
||||
// will deal with left/right positioning for us. Normally we'd use position:sticky on
|
||||
// a few key elements, however that doesn't work in horizontal scrolling scenarios.
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator,
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator {
|
||||
background: linear-gradient(to left, $panel-gradient);
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
background: linear-gradient(to right, $panel-gradient);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
|
||||
&.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 15px;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
.mx_RoomBreadcrumbs_placeholder {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
line-height: 32px; // specifically to match the height this is not scaled
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_Tooltip {
|
||||
margin-left: -42px;
|
||||
margin-top: -42px;
|
||||
}
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomDropTarget_container {
|
||||
background-color: $secondary-accent-color;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomDropTarget {
|
||||
font-size: $font-13px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomDropTarget_label {
|
||||
position: relative;
|
||||
margin-top: 3px;
|
||||
line-height: $font-21px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_avatar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomDropTarget_label {
|
||||
display: none;
|
||||
}
|
||||
@@ -15,26 +15,34 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomHeader {
|
||||
flex: 0 0 52px;
|
||||
flex: 0 0 50px;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
background-color: $roomheader-bg-color;
|
||||
|
||||
.mx_E2EIcon {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -6px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
.mx_RoomHeader_e2eIcon {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
.mx_E2EIcon {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_wrapper {
|
||||
margin: auto;
|
||||
height: 52px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 10px 0 19px;
|
||||
padding: 0 10px 0 18px;
|
||||
|
||||
.mx_InviteOnlyIcon_large {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_spinner {
|
||||
@@ -67,7 +75,6 @@ limitations under the License.
|
||||
.mx_RoomHeader_buttons {
|
||||
display: flex;
|
||||
background-color: $primary-bg-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_info {
|
||||
@@ -173,7 +180,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_avatar {
|
||||
flex: 0;
|
||||
margin: 0 7px;
|
||||
margin: 0 6px 0 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -201,41 +208,53 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_button {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 4px; // center with parent of 32px
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $roomheader-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_settingsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_forgetButton::before {
|
||||
mask-image: url('$(res)/img/leave.svg');
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/search.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_shareButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/share.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/share.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_manageIntegsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/grid.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/integrations.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_showPanel {
|
||||
@@ -251,7 +270,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinnedButton::before {
|
||||
mask-image: url('$(res)/img/icons-pin.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/pin.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinsIndicator {
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,21 +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.
|
||||
*/
|
||||
|
||||
@import "../../../../node_modules/react-resizable/css/styles.css";
|
||||
|
||||
.mx_RoomList2 .mx_RoomSubList_labelContainer {
|
||||
z-index: 12;
|
||||
}
|
||||
+197
-190
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -31,7 +31,7 @@
|
||||
.mx_Stickers_addLink {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: $button-link-fg-color;
|
||||
}
|
||||
|
||||
.mx_Stickers_hideStickers {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_UserOnlineDot {
|
||||
border-radius: 50%;
|
||||
background-color: $accent-color;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -59,7 +59,7 @@ limitations under the License.
|
||||
flex: 1;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
color: $eventtile-meta-color;
|
||||
color: $roomtopic-color;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_label > span {
|
||||
|
||||
Reference in New Issue
Block a user