[CONFLICT CHUNKS] Merge branch 'develop' into travis/sourcemaps-develop
This commit is contained in:
Travis Ralston
@@ -24,7 +24,6 @@
|
||||
@import "./structures/_SearchBox.scss";
|
||||
@import "./structures/_TabbedView.scss";
|
||||
@import "./structures/_TagPanel.scss";
|
||||
@import "./structures/_TagPanelButtons.scss";
|
||||
@import "./structures/_ToastContainer.scss";
|
||||
@import "./structures/_TopLeftMenuButton.scss";
|
||||
@import "./structures/_UploadBar.scss";
|
||||
@@ -57,6 +56,7 @@
|
||||
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
|
||||
@import "./views/dialogs/_CreateGroupDialog.scss";
|
||||
@import "./views/dialogs/_CreateRoomDialog.scss";
|
||||
@import "./views/dialogs/_DMInviteDialog.scss";
|
||||
@import "./views/dialogs/_DeactivateAccountDialog.scss";
|
||||
@import "./views/dialogs/_DeviceVerifyDialog.scss";
|
||||
@import "./views/dialogs/_DevtoolsDialog.scss";
|
||||
@@ -174,7 +174,9 @@
|
||||
@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";
|
||||
@import "./views/settings/_DevicesPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
|
||||
@@ -26,11 +26,16 @@ limitations under the License.
|
||||
|
||||
.mx_CustomRoomTagPanel_scroller {
|
||||
max-height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton {
|
||||
margin: 9px auto;
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
padding: 10px 0 9px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
|
||||
@@ -39,7 +44,13 @@ limitations under the License.
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
|
||||
border: 3px solid $warning-color;
|
||||
border-radius: 40px;
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
|
||||
content: '';
|
||||
height: 56px;
|
||||
background-color: $accent-color-alt;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: 2px; // 10 [padding-top] - (56 - 40)/2
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ limitations under the License.
|
||||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
height: 40px;
|
||||
padding: 5px 0 4px 0;
|
||||
padding: 10px 0 9px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile {
|
||||
@@ -82,21 +82,39 @@ limitations under the License.
|
||||
// opacity: 1;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
|
||||
background-color: $accent-color;
|
||||
border-radius: 40px;
|
||||
|
||||
/* In case this is a "initial" avatar */
|
||||
display: block;
|
||||
.mx_TagPanel .mx_TagTile_plus {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
position: relative;
|
||||
/* overwrite mx_RoleButton inline-block */
|
||||
display: block !important;
|
||||
|
||||
&::before {
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
|
||||
border: 3px solid $accent-color;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
box-sizing: border-box;
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
content: '';
|
||||
height: 56px;
|
||||
background-color: $accent-color;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: -8px; // (56 - 40)/2
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
/*
|
||||
Copyright 2019 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_TagPanelButtons {
|
||||
background-color: $tagpanel-bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 17px 0 3px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_GroupsButton::before {
|
||||
mask: url('$(res)/img/feather-customised/users.svg');
|
||||
mask-position: center 11px;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
|
||||
mask: url('$(res)/img/feather-customised/life-buoy.svg');
|
||||
mask-position: center 9px;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_AccessibleButton {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: $tagpanel-button-color;
|
||||
position: relative;
|
||||
/* overwrite mx_RoleButton inline-block */
|
||||
display: block !important;
|
||||
|
||||
&::before {
|
||||
background-color: $tagpanel-bg-color;
|
||||
mask-repeat: no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
object-fit: cover;
|
||||
border-radius: 40px;
|
||||
vertical-align: top;
|
||||
background-color: $avatar-bg-color;
|
||||
|
||||
@@ -53,6 +53,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/feather-customised/home.svg');
|
||||
}
|
||||
|
||||
.mx_TopLeftMenu_icon_help::after {
|
||||
mask-image: url('$(res)/img/feather-customised/life-buoy.svg');
|
||||
}
|
||||
|
||||
.mx_TopLeftMenu_icon_settings::after {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
/*
|
||||
Copyright 2019, 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_DMInviteDialog_addressBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.mx_DMInviteDialog_editor {
|
||||
flex: 1;
|
||||
width: 100%; // Needed to make the Field inside grow
|
||||
background-color: $user-tile-hover-bg-color;
|
||||
border-radius: 4px;
|
||||
min-height: 25px;
|
||||
padding-left: 8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_DMInviteDialog_userTile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
// Using a textarea for this element, to circumvent autofill
|
||||
// Mostly copied from AddressPickerDialog
|
||||
textarea,
|
||||
textarea:focus {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
word-wrap: nowrap;
|
||||
|
||||
// Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
|
||||
// remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
|
||||
// support for "fill remaining width", but traditional tricks don't work with what
|
||||
// we're pushing into this "field". Flexbox just makes things worse. The theory is
|
||||
// that users won't need more than about 2/5ths of the input to find the person
|
||||
// they're looking for.
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_goButton {
|
||||
width: 48px;
|
||||
margin-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_section {
|
||||
padding-bottom: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
color: $muted-fg-color;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $user-tile-hover-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_avatarStack {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
& > * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_selected {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background-color: $username-variant1-color;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 6px; // 50%
|
||||
left: 6px; // 50%
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: $primary-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_userId {
|
||||
font-size: 12px;
|
||||
color: $muted-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_time {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: $muted-fg-color;
|
||||
float: right;
|
||||
line-height: 36px; // Height of the avatar to keep the time vertically aligned
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_roomTile_highlight {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
|
||||
.mx_DMInviteDialog_userTile {
|
||||
margin-right: 8px;
|
||||
|
||||
.mx_DMInviteDialog_userTile_pill {
|
||||
background-color: $username-variant1-color;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: #ffffff; // this is fine without a var because it's for both themes
|
||||
|
||||
.mx_DMInviteDialog_userTile_avatar {
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
img.mx_DMInviteDialog_userTile_avatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_userTile_name {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_userTile_threepidAvatar {
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_userTile_remove {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,11 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_bridgesIcon::before {
|
||||
// This icon is pants, please improve :)
|
||||
mask-image: url('$(res)/img/feather-customised/bridge.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_warningIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
|
||||
}
|
||||
@@ -42,3 +47,25 @@ limitations under the License.
|
||||
padding-left: 40px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
// show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings
|
||||
.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
|
||||
mask: url("$(res)/img/feather-customised/image.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 36px;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_BridgeList {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_BridgeList li {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-width: 1px 0px;
|
||||
border-color: #dee1f3;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
|
||||
@@ -63,7 +63,6 @@ limitations under the License.
|
||||
|
||||
.mx_UserInfo_avatar {
|
||||
margin: 24px 32px 0 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_UserInfo_avatar > div {
|
||||
@@ -77,12 +76,27 @@ limitations under the License.
|
||||
that's why we had to put the margin to center on a parent div),
|
||||
and not a % of the parent height. */
|
||||
padding-top: 100%;
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_UserInfo_avatar > div > div * {
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_UserInfo_avatar .mx_BaseAvatar_initial {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// override the calculated sizes so that the letter isn't HUGE
|
||||
font-size: 26px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
|
||||
|
||||
@@ -22,7 +22,9 @@ limitations under the License.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
|
||||
.mx_E2EIcon_warning::after,
|
||||
.mx_E2EIcon_normal::after,
|
||||
.mx_E2EIcon_verified::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -34,10 +36,14 @@ limitations under the License.
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.mx_E2EIcon_verified::after {
|
||||
background-image: url('$(res)/img/e2e/verified.svg');
|
||||
}
|
||||
|
||||
.mx_E2EIcon_warning::after {
|
||||
background-image: url('$(res)/img/e2e/warning.svg');
|
||||
}
|
||||
|
||||
.mx_E2EIcon_normal::after {
|
||||
background-image: url('$(res)/img/e2e/normal.svg');
|
||||
}
|
||||
|
||||
.mx_E2EIcon_verified::after {
|
||||
background-image: url('$(res)/img/e2e/verified.svg');
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
@@ -353,7 +354,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
|
||||
left: 46px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
@@ -52,12 +52,18 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_cancel {
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
flex: 0 0 40px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
img {
|
||||
flex: 0 0 40px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
|
||||
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
|
||||
.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
@@ -40,4 +40,5 @@ limitations under the License.
|
||||
|
||||
.mx_RoomRecoveryReminder_secondary {
|
||||
font-size: 90%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
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.
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
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: 5px;
|
||||
width: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
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_AvatarSetting_avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
margin-left: 13px;
|
||||
position: relative;
|
||||
|
||||
& > * {
|
||||
width: 88px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $button-danger-bg-color;
|
||||
}
|
||||
|
||||
& > img {
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& > img,
|
||||
.mx_AvatarSetting_avatarPlaceholder {
|
||||
display: block;
|
||||
height: 88px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_AvatarSetting_avatarPlaceholder::before {
|
||||
background-color: $settings-profile-overlay-placeholder-fg-color;
|
||||
mask: url("$(res)/img/feather-customised/user.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 36px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
|
||||
background-color: $settings-profile-placeholder-bg-color;
|
||||
}
|
||||
@@ -38,91 +38,6 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
margin-left: 13px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar > * {
|
||||
display: block;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
|
||||
background-color: $settings-profile-placeholder-bg-color;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
|
||||
display: inline-block;
|
||||
opacity: 0.5 !important;
|
||||
color: $settings-profile-overlay-fg-color !important;
|
||||
background-color: $settings-profile-overlay-bg-color !important;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarOverlay_show {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: $settings-profile-overlay-placeholder-fg-color;
|
||||
background-color: $settings-profile-overlay-placeholder-bg-color;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarOverlayText {
|
||||
display: block;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_noAvatarText {
|
||||
display: block;
|
||||
margin: 34px auto auto;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarOverlayImgContainer {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarOverlayImg::before {
|
||||
background-color: $settings-profile-overlay-placeholder-fg-color;
|
||||
mask: url("$(res)/img/feather-customised/upload.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 14px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
|
||||
background-color: $settings-profile-overlay-fg-color !important;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_avatarUpload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 5.487504 5.7341776"
|
||||
height="5.7341776mm"
|
||||
width="5.487504mm">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(14.166523,-96.032669)"
|
||||
id="layer1">
|
||||
<rect
|
||||
y="99.461258"
|
||||
x="-10.861272"
|
||||
height="2.0555882"
|
||||
width="1.9322528"
|
||||
id="rect831-6"
|
||||
style="fill:none;stroke:#b8bec9;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<path
|
||||
id="path883"
|
||||
d="m -11.98427,98.338257 1.122998,1.122998"
|
||||
style="fill:#b8bec9;fill-opacity:1;stroke:#b8bec9;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<rect
|
||||
transform="scale(-1)"
|
||||
y="-98.338257"
|
||||
x="11.98427"
|
||||
height="2.0555882"
|
||||
width="1.9322529"
|
||||
id="rect831-6-7"
|
||||
style="fill:none;stroke:#b8bec9;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8C6 6.89543 6.89543 6 8 6H40C41.1046 6 42 6.89543 42 8V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8Z" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 20C18.6569 20 20 18.6569 20 17C20 15.3431 18.6569 14 17 14C15.3431 14 14 15.3431 14 17C14 18.6569 15.3431 20 17 20Z" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M42 30L32 20L10 42" stroke="#61708B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 721 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 5V19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 12H19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 311 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="65.631" height="67.981"><defs><filter x="-.059" y="-.079" width="1.118" height="1.158" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="matrix(3.40907 0 0 3.40907 -1493.716 -795.144)" fill="none" fill-rule="evenodd" stroke="#368bd6" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(441.5 237.5)"><circle r="2.286" cy="5.714" cx="6.286"/><path d="M8.571 3.429v2.857a1.714 1.714 0 103.429 0v-.572a5.714 5.714 0 10-2.24 4.537"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 918 B |
@@ -0,0 +1 @@
|
||||
<svg width="58" height="60" viewBox="26 25 6 6" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-5.9%" y="-7.9%" width="111.8%" height="115.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-406 -215)" stroke="#61708B"><path d="M438 240l-6 6M432 240l6 6"/></g></svg>
|
||||
|
After Width: | Height: | Size: 693 B |
@@ -16,6 +16,7 @@ $room-highlight-color: #343a46;
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: $text-primary-color;
|
||||
$primary-bg-color: $bg-color;
|
||||
$muted-fg-color: $header-panel-text-primary-color;
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: $header-panel-text-secondary-color;
|
||||
@@ -172,6 +173,8 @@ $interactive-tooltip-fg-color: #ffffff;
|
||||
|
||||
$breadcrumb-placeholder-bg-color: #272c35;
|
||||
|
||||
$user-tile-hover-bg-color: $header-panel-bg-color;
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
@@ -243,3 +246,13 @@ $breadcrumb-placeholder-bg-color: #272c35;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// diff highlight colors
|
||||
// intentionally swapped to avoid inversion
|
||||
.hljs-addition {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,7 @@ $header-panel-bg-color: #f3f8fd;
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #2e2f32;
|
||||
$primary-bg-color: #ffffff;
|
||||
$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
@@ -293,6 +294,8 @@ $interactive-tooltip-fg-color: #ffffff;
|
||||
|
||||
$breadcrumb-placeholder-bg-color: #e8eef5;
|
||||
|
||||
$user-tile-hover-bg-color: $header-panel-bg-color;
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
@@ -338,3 +341,12 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
|
||||
color: $accent-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// diff highlight colors
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user