Merge branches 'develop' and 'devtools_serverlist' of github.com:matrix-org/matrix-react-sdk into devtools_serverlist

This commit is contained in:
Michael Telatynski
2019-05-09 22:27:37 +01:00
208 changed files with 10738 additions and 4783 deletions
+64 -12
View File
@@ -36,6 +36,12 @@ body {
color: $warning-color;
}
b {
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold
// effect since we only have specific weights of our fonts available.
font-weight: bold;
}
h2 {
color: $primary-fg-color;
font-weight: 400;
@@ -118,7 +124,7 @@ textarea {
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid #c1c1c1;
border: 1px solid $dialog-close-fg-color;
// these things should probably not be defined
// globally
margin: 9px;
@@ -267,14 +273,18 @@ textarea {
font-weight: 300;
font-size: 15px;
position: relative;
padding: 40px 58px 36px 58px;
width: 60%;
max-width: 704px;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
padding: 25px 30px 30px 30px;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 4px;
overflow-y: auto;
}
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
}
@@ -317,13 +327,13 @@ textarea {
.mx_Dialog_header {
position: relative;
margin-bottom: 20px;
}
.mx_Dialog_title {
font-weight: bold;
font-size: 22px;
line-height: 36px;
color: $primary-fg-color;
color: $dialog-title-fg-color;
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
@@ -338,13 +348,14 @@ textarea {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
width: 36px;
height: 36px;
background-color: $primary-fg-color;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
top: 4px;
right: 0px;
}
.mx_Dialog_content {
@@ -355,6 +366,7 @@ textarea {
}
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
}
@@ -370,6 +382,10 @@ textarea {
background-color: $button-secondary-bg-color;
}
.mx_Dialog button:last-child {
margin-right: 0px;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
@@ -381,6 +397,7 @@ textarea {
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent-color;
min-width: 156px;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
@@ -506,3 +523,38 @@ textarea {
opacity: 0;
cursor: pointer;
}
// username colors
// used by SenderProfile & RoomPreviewBar
.mx_Username_color1 {
color: $username-variant1-color;
}
.mx_Username_color2 {
color: $username-variant2-color;
}
.mx_Username_color3 {
color: $username-variant3-color;
}
.mx_Username_color4 {
color: $username-variant4-color;
}
.mx_Username_color5 {
color: $username-variant5-color;
}
.mx_Username_color6 {
color: $username-variant6-color;
}
.mx_Username_color7 {
color: $username-variant7-color;
}
.mx_Username_color8 {
color: $username-variant8-color;
}
+10 -1
View File
@@ -6,6 +6,7 @@
@import "./structures/_CreateRoom.scss";
@import "./structures/_CustomRoomTagPanel.scss";
@import "./structures/_FilePanel.scss";
@import "./structures/_GenericErrorPage.scss";
@import "./structures/_GroupView.scss";
@import "./structures/_HeaderButtons.scss";
@import "./structures/_HomePage.scss";
@@ -19,6 +20,7 @@
@import "./structures/_RoomStatusBar.scss";
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@@ -46,11 +48,11 @@
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_ChatInviteDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";
@@ -69,7 +71,9 @@
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@@ -96,6 +100,7 @@
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_ToolTipButton.scss";
@import "./views/elements/_Tooltip.scss";
@import "./views/elements/_Validation.scss";
@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss";
@@ -108,7 +113,11 @@
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_ReactionDimension.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@import "./views/messages/_TextualEvent.scss";
+8 -2
View File
@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* This file has CSS for both native and non-native scrollbars in an
* order that's fairly logic to read but violates stylelints descending
* specificity rule, so turn it off for this file. It also duplicates
* a selector to separate the hiding/showing from the sizing.
*/
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
@@ -59,8 +66,7 @@ body.mx_scrollbar_nooverlay {
*/
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
{
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
margin-right: calc(-1 * var(--scrollbar-width));
}
}
+1 -1
View File
@@ -16,4 +16,4 @@
border: 1px solid;
padding: 10px;
background-color: #fcc;
}
}
+13 -13
View File
@@ -35,7 +35,7 @@ limitations under the License.
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
font-size: 14px;
font-size: 14px;
z-index: 5001;
}
@@ -54,14 +54,14 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after {
content:'';
.mx_ContextualMenu_chevron_right::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
position: absolute;
top: -7px;
right: 1px;
}
@@ -81,14 +81,14 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left:after{
content:'';
.mx_ContextualMenu_chevron_left::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
position: absolute;
top: -7px;
left: 1px;
}
@@ -108,14 +108,14 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top:after{
content:'';
.mx_ContextualMenu_chevron_top::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position:absolute;
position: absolute;
left: -7px;
top: 1px;
}
@@ -135,14 +135,14 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom:after{
content:'';
.mx_ContextualMenu_chevron_bottom::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position:absolute;
position: absolute;
left: -7px;
bottom: 1px;
}
+1 -1
View File
@@ -22,7 +22,7 @@ limitations under the License.
}
.mx_CreateRoom input,
.mx_CreateRoom textarea {
.mx_CreateRoom textarea {
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
+4 -4
View File
@@ -101,10 +101,10 @@ limitations under the License.
padding-left: 0px;
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
+19
View File
@@ -0,0 +1,19 @@
.mx_GenericErrorPage {
width: 100%;
height: 100%;
background-color: #fff;
}
.mx_GenericErrorPage_box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #f22;
padding: 10px;
background-color: #fcc;
}
+5 -5
View File
@@ -67,13 +67,13 @@ limitations under the License.
}
.mx_GroupView_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
border-bottom: 1px solid $strong-input-border-color !important;
min-width: 150px;
cursor: text;
}
.mx_GroupView_editable:focus {
border-bottom: 1px solid $accent-color ! important;
border-bottom: 1px solid $accent-color !important;
outline: none;
box-shadow: none;
}
@@ -95,7 +95,7 @@ limitations under the License.
.mx_GroupView_avatarPicker .mx_Spinner {
width: 48px;
height: 48px ! important;
height: 48px !important;
}
.mx_GroupView_header_leftCol {
@@ -176,7 +176,7 @@ limitations under the License.
flex: 1;
}
.mx_GroupView_body {
.mx_GroupView_body {
flex-grow: 1;
}
@@ -333,7 +333,7 @@ limitations under the License.
display: none;
}
.mx_GroupView_body .gm-scroll-view > *{
.mx_GroupView_body .gm-scroll-view > * {
margin: 11px 50px 0px 68px;
}
+5 -5
View File
@@ -67,11 +67,6 @@ limitations under the License.
z-index: 6;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
order: 3;
@@ -82,6 +77,11 @@ limitations under the License.
z-index: 1;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
}
+6
View File
@@ -19,3 +19,9 @@ limitations under the License.
flex-direction: row;
min-width: 0;
}
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
}
+3 -7
View File
@@ -52,7 +52,7 @@ limitations under the License.
background-color: $roomheader-addroom-bg-color;
position: relative;
&:before {
&::before {
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat;
@@ -113,8 +113,7 @@ limitations under the License.
overflow-x: hidden;
display: flex;
flex-direction: row;
flex-flow: wrap;
flex-flow: row wrap;
align-content: flex-start;
}
@@ -153,6 +152,7 @@ limitations under the License.
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 13px;
opacity: 0.7;
}
.mx_GroupTile_profile .mx_GroupTile_desc {
@@ -163,7 +163,3 @@ limitations under the License.
max-height: 36px;
overflow: hidden;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
opacity: 0.7;
}
+5 -5
View File
@@ -66,7 +66,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_roomName a,
.mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none ! important;
text-decoration: none !important;
}
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
@@ -83,14 +83,14 @@ limitations under the License.
padding-right: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color;
}
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
+8 -8
View File
@@ -40,12 +40,12 @@ limitations under the License.
opacity: 0.5;
position: relative;
top: -4px;
/*
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
animation-iteration-count: infinite;
*/
*/
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -138,8 +138,8 @@ limitations under the License.
}
.mx_RoomStatusBar_resend_link {
color: $primary-fg-color ! important;
text-decoration: underline ! important;
color: $primary-fg-color !important;
text-decoration: underline !important;
cursor: pointer;
}
@@ -173,12 +173,12 @@ limitations under the License.
}
.mx_RoomStatusBar_callBar {
height: 40px;
line-height: 40px;
height: 40px;
line-height: 40px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 40px;
height: 40px;
line-height: 40px;
}
}
+23 -24
View File
@@ -89,7 +89,7 @@ limitations under the License.
flex: 0 0 16px;
position: relative;
&:before {
&::before {
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-room-add.svg');
mask-repeat: no-repeat;
@@ -137,6 +137,26 @@ limitations under the License.
padding: 0 8px;
}
.collapsed {
.mx_RoomSubList_scroll {
padding: 0;
}
.mx_RoomSubList_labelContainer {
margin-right: 14px;
margin-left: 2px;
}
.mx_RoomSubList_addRoom {
margin-left: 3px;
margin-right: 10px;
}
.mx_RoomSubList_label > span {
display: none;
}
}
// overflow indicators
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before,
@@ -164,7 +184,7 @@ limitations under the License.
background: linear-gradient(to top, $panel-gradient);
}
/*
/*
// for now, we remove the bottomOverflow entirely as we don't want to
// lose the screen real-estate due to a bg-colored gradient, but we also
// don't want to use drop shadows and risk a confusing hierarchy of cards.
@@ -175,26 +195,5 @@ limitations under the License.
margin: 0px -8px;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
}
*/
}
.collapsed {
.mx_RoomSubList_scroll {
padding: 0;
}
.mx_RoomSubList_labelContainer {
margin-right: 14px;
margin-left: 2px;
}
.mx_RoomSubList_addRoom {
margin-left: 3px;
margin-right: 10px;
}
.mx_RoomSubList_label > span {
display: none;
}
*/
}
+59 -59
View File
@@ -70,8 +70,15 @@ limitations under the License.
background-color: $primary-bg-color;
}
.mx_RoomView_auxPanel_hiddenHighlights {
border-bottom: 1px solid $primary-hairline-color;
padding: 10px 26px;
color: $warning-color;
cursor: pointer;
}
.mx_RoomView_auxPanel_apps {
max-width: 1920px ! important;
max-width: 1920px !important;
}
@@ -79,38 +86,11 @@ limitations under the License.
flex: 1 1 0;
}
.mx_RoomView_body {
position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex;
flex-direction: column;
flex: 1;
}
.mx_RoomView_body .mx_RoomView_timeline {
/* offset parent for mx_RoomView_topUnreadMessagesBar */
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
.mx_RoomView_body {
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
order: 2;
}
}
.mx_RoomView_body .mx_RoomView_statusArea {
order: 3;
}
.mx_RoomView_body .mx_MessageComposer {
order: 4;
}
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
flex: 1 1 0;
overflow-anchor: none;
}
.mx_RoomView_messagePanelSearchSpinner {
@@ -122,7 +102,7 @@ limitations under the License.
position: relative;
}
.mx_RoomView_messagePanelSearchSpinner:before {
.mx_RoomView_messagePanelSearchSpinner::before {
background-color: $greyed-fg-color;
mask: url('$(res)/img/feather-customised/search-input.svg');
mask-repeat: no-repeat;
@@ -136,6 +116,53 @@ limitations under the License.
height: 50px;
}
.mx_RoomView_body {
position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
}
.mx_RoomView_body .mx_RoomView_timeline {
/* offset parent for mx_RoomView_topUnreadMessagesBar */
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
.mx_RoomView_statusArea {
width: 100%;
flex: 0 0 auto;
max-height: 0px;
background-color: $primary-bg-color;
z-index: 1000;
overflow: hidden;
transition: all .2s ease-out;
}
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
.mx_RoomView_statusAreaBox {
margin: auto;
min-height: 50px;
}
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid $primary-hairline-color;
height: 1px;
}
.mx_RoomView_messageListWrapper {
min-height: 100%;
@@ -196,33 +223,6 @@ hr.mx_RoomView_myReadMarker {
z-index: 1;
}
.mx_RoomView_statusArea {
width: 100%;
flex: 0 0 auto;
max-height: 0px;
background-color: $primary-bg-color;
z-index: 1000;
overflow: hidden;
transition: all .2s ease-out;
}
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
.mx_RoomView_statusAreaBox {
margin: auto;
min-height: 50px;
}
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid $primary-hairline-color;
height: 1px;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: $primary-bg-color;
}
@@ -283,7 +283,7 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_ongoingConfCallNotification a {
color: $accent-fg-color ! important;
color: $accent-fg-color !important;
}
.mx_MatrixChat_useCompactLayout {
+26
View File
@@ -0,0 +1,26 @@
/*
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_ScrollPanel {
.mx_RoomView_MessageList {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow-y: hidden;
}
}
+4 -4
View File
@@ -50,7 +50,7 @@ limitations under the License.
color: $tab-label-active-fg-color;
}
.mx_TabbedView_maskedIcon {;
.mx_TabbedView_maskedIcon {
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
@@ -59,7 +59,7 @@ limitations under the License.
display: inline-block;
}
.mx_TabbedView_maskedIcon:before {
.mx_TabbedView_maskedIcon::before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
@@ -71,7 +71,7 @@ limitations under the License.
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
background-color: $tab-label-active-icon-bg-color;
}
@@ -91,4 +91,4 @@ limitations under the License.
flex-grow: 1;
overflow: auto;
min-height: 0; // firefox
}
}
+2 -3
View File
@@ -36,7 +36,6 @@ limitations under the License.
flex: none;
display: flex;
justify-content: center;
align-items: flex-start;
@@ -75,13 +74,13 @@ limitations under the License.
.mx_TagPanel .mx_TagTile {
margin: 9px 0;
// opacity: 0.5;
// opacity: 0.5;
position: relative;
}
.mx_TagPanel .mx_TagTile:focus,
.mx_TagPanel .mx_TagTile:hover,
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
// opacity: 1;
// opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
+3 -3
View File
@@ -23,12 +23,12 @@ limitations under the License.
padding: 17px 0 3px 0;
}
.mx_TagPanelButtons > .mx_GroupsButton:before {
.mx_TagPanelButtons > .mx_GroupsButton::before {
mask: url('$(res)/img/feather-customised/users.svg');
mask-position: center 11px;
}
.mx_TagPanelButtons > .mx_TagPanelButtons_report:before {
.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
mask: url('$(res)/img/feather-customised/life-buoy.svg');
mask-position: center 9px;
}
@@ -43,7 +43,7 @@ limitations under the License.
/* overwrite mx_RoleButton inline-block */
display: block !important;
&:before {
&::before {
background-color: $tagpanel-bg-color;
mask-repeat: no-repeat;
content: '';
+24
View File
@@ -130,3 +130,27 @@ limitations under the License.
.mx_AuthBody_spinner {
margin: 1em 0;
}
.mx_AuthBody_passwordScore {
width: 100%;
appearance: none;
height: 4px;
border: 0;
border-radius: 2px;
position: absolute;
top: -12px;
&::-moz-progress-bar {
border-radius: 2px;
background-color: $accent-color;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: 2px;
}
&::-webkit-progress-value {
background-color: $accent-color;
}
}
+1
View File
@@ -26,6 +26,7 @@ limitations under the License.
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
user-select: none;
}
.mx_BaseAvatar_initial {
@@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
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.
@@ -15,8 +16,8 @@ limitations under the License.
*/
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input,
.mx_ChatInviteDialog_input:focus
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus
{
height: 26px;
font-size: 14px;
@@ -34,11 +35,11 @@ limitations under the License.
word-wrap: nowrap;
}
.mx_ChatInviteDialog .mx_Dialog_content {
.mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px
}
.mx_ChatInviteDialog_inputContainer {
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
@@ -51,19 +52,19 @@ limitations under the License.
overflow-y: auto;
}
.mx_ChatInviteDialog_error {
.mx_AddressPickerDialog_error {
margin-top: 10px;
color: $warning-color;
}
.mx_ChatInviteDialog_cancel {
.mx_AddressPickerDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_ChatInviteDialog_cancel object {
.mx_AddressPickerDialog_cancel object {
pointer-events: none;
}
+5 -32
View File
@@ -14,39 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BugReportDialog_field_container {
display: flex;
}
.mx_BugReportDialog_field_label {
flex-basis: 150px;
text-align: right;
padding-top: 9px;
padding-right: 4px;
line-height: 18px;
.mx_BugReportDialog .mx_Field {
flex: 1;
}
.mx_BugReportDialog_field_input {
flex-grow: 1;
/* taken from mx_ChatInviteDialog_inputContainer */
border-radius: 3px;
border: solid 1px $input-border-color;
font-size: 14px;
padding-left: 4px;
padding-right: 4px;
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 4px;
}
.mx_BugReportDialog_field_input[type="text" i] {
padding-top: 9px;
padding-bottom: 9px;
// TODO: We should really apply this to all .mx_Field inputs.
// See https://github.com/vector-im/riot-web/issues/9344.
flex: 1;
}
+20 -25
View File
@@ -14,34 +14,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SettingsDialog {
.mx_Dialog {
max-width: 1000px;
width: 90%;
height: 80%;
border-radius: 4px;
padding-top: 0;
padding-right: 0;
padding-left: 0;
// Not actually a component but things shared by settings components
.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
width: 90vw;
max-width: 1000px;
// set the height too since tabbed view scrolls itself.
height: 80vh;
.mx_TabbedView {
top: 65px;
}
.mx_TabbedView {
top: 65px;
}
.mx_TabbedView .mx_SettingsTab {
box-sizing: border-box;
min-width: 580px;
padding-right: 130px;
.mx_TabbedView .mx_SettingsTab {
box-sizing: border-box;
min-width: 580px;
padding-right: 100px;
// Put some padding on the bottom to avoid the settings tab from
// colliding harshly with the dialog when scrolled down.
padding-bottom: 100px;
}
// Put some padding on the bottom to avoid the settings tab from
// colliding harshly with the dialog when scrolled down.
padding-bottom: 100px;
}
.mx_Dialog_title {
text-align: center;
margin-top: 16px;
margin-bottom: 24px;
}
.mx_Dialog_title {
text-align: center;
margin-bottom: 24px;
}
}
@@ -0,0 +1,35 @@
/*
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_UploadConfirmDialog_fileIcon {
margin-right: 5px;
}
.mx_UploadConfirmDialog_previewOuter {
text-align: center;
}
.mx_UploadConfirmDialog_previewInner {
display: inline-block;
text-align: left;
}
.mx_UploadConfirmDialog_imagePreview {
max-height: 300px;
max-width: 100%;
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
}
@@ -0,0 +1,28 @@
/*
Copyright 2019 Travis Ralston
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_WidgetOpenIDPermissionsDialog .mx_SettingsFlag {
.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
}
@@ -37,6 +37,12 @@ limitations under the License.
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
font-weight: 600;
}
.mx_AccessibleButton_kind_secondary {
color: $accent-color;
font-weight: 600;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
+1
View File
@@ -168,6 +168,7 @@ limitations under the License.
.mx_Field_tooltip {
margin-top: -12px;
margin-left: 4px;
width: 200px;
}
.mx_Field_tooltip.mx_Field_valid {
+18 -1
View File
@@ -80,7 +80,24 @@ limitations under the License.
// hack for mx_Dialog having a top padding of 40px
top: 40px;
right: 0px;
padding: 35px;
padding-top: 35px;
padding-right: 35px;
cursor: pointer;
}
.mx_ImageView_rotateClockwise {
position: absolute;
top: 40px;
right: 70px;
padding-top: 35px;
cursor: pointer;
}
.mx_ImageView_rotateCounterClockwise {
position: absolute;
top: 40px;
right: 105px;
padding-top: 35px;
cursor: pointer;
}
+9 -2
View File
@@ -50,11 +50,10 @@ limitations under the License.
.mx_Tooltip {
display: none;
animation: mx_fadein 0.2s;
position: fixed;
border: 1px solid $menu-border-color;
border-radius: 4px;
box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
z-index: 2000;
padding: 10px;
@@ -66,4 +65,12 @@ limitations under the License.
max-width: 200px;
word-break: break-word;
margin-right: 50px;
&.mx_Tooltip_visible {
animation: mx_fadein 0.2s forwards;
}
&.mx_Tooltip_invisible {
animation: mx_fadeout 0.1s forwards;
}
}
+69
View File
@@ -0,0 +1,69 @@
/*
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_Validation {
position: relative;
}
.mx_Validation_details {
padding-left: 20px;
margin: 0;
}
.mx_Validation_description + .mx_Validation_details {
margin: 1em 0 0;
}
.mx_Validation_detail {
position: relative;
font-weight: normal;
list-style: none;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
&::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
top: 0;
left: -18px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&.mx_Validation_valid {
color: $input-valid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color;
}
}
&.mx_Validation_invalid {
color: $input-invalid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color;
}
}
}
@@ -0,0 +1,74 @@
/*
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_MessageActionBar {
position: absolute;
visibility: hidden;
cursor: pointer;
display: flex;
height: 24px;
line-height: 24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
top: -13px;
right: 8px;
user-select: none;
> * {
display: inline-block;
position: relative;
width: 27px;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
&:hover {
border-color: $message-action-bar-hover-border-color;
z-index: 1;
}
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
}
}
.mx_MessageActionBar_maskButton::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $message-action-bar-fg-color;
}
.mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/reply.svg');
}
.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg');
}
@@ -0,0 +1,25 @@
/*
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_ReactionDimension {
width: 42px;
display: flex;
justify-content: space-evenly;
}
.mx_ReactionDimension_disabled {
opacity: 0.4;
}
+19
View File
@@ -0,0 +1,19 @@
/*
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_ReactionsRow {
margin: 6px 0;
}
@@ -0,0 +1,36 @@
/*
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_ReactionsRowButton {
display: inline-block;
height: 20px;
line-height: 21px;
margin-right: 6px;
padding: 0 6px;
border: 1px solid $reaction-row-button-border-color;
border-radius: 10px;
background-color: $reaction-row-button-bg-color;
cursor: pointer;
&:hover {
border-color: $reaction-row-button-hover-border-color;
}
&.mx_ReactionsRowButton_selected {
background-color: $reaction-row-button-selected-bg-color;
border-color: $reaction-row-button-selected-border-color;
}
}
@@ -18,36 +18,3 @@ limitations under the License.
font-weight: 600;
}
.mx_SenderProfile_color1 {
color: $username-variant1-color;
}
.mx_SenderProfile_color2 {
color: $username-variant2-color;
}
.mx_SenderProfile_color3 {
color: $username-variant3-color;
}
.mx_SenderProfile_color4 {
color: $username-variant4-color;
}
.mx_SenderProfile_color5 {
color: $username-variant5-color;
}
.mx_SenderProfile_color6 {
color: $username-variant6-color;
}
.mx_SenderProfile_color7 {
color: $username-variant7-color;
}
.mx_SenderProfile_color8 {
color: $username-variant8-color;
}
+8 -24
View File
@@ -31,6 +31,7 @@ limitations under the License.
top: 14px;
left: 8px;
cursor: pointer;
user-select: none;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
@@ -62,6 +63,7 @@ limitations under the License.
vertical-align: top;
height: 16px;
overflow: hidden;
user-select: none;
img {
vertical-align: -2px;
@@ -80,6 +82,7 @@ limitations under the License.
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
position: absolute;
user-select: none;
}
.mx_EventTile_line, .mx_EventTile_reply {
@@ -118,7 +121,7 @@ limitations under the License.
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
{
background-color: $event-selected-color;
}
@@ -203,7 +206,7 @@ limitations under the License.
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.menu > div > a > .mx_MessageTimestamp {
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
visibility: visible;
}
@@ -216,24 +219,8 @@ limitations under the License.
width: auto;
}
.mx_EventTile_editButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url($edit-button-url);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_EventTile:hover .mx_EventTile_editButton,
.mx_EventTile.menu .mx_EventTile_editButton {
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
visibility: visible;
}
@@ -243,6 +230,7 @@ limitations under the License.
width: 14px;
height: 14px;
top: 29px;
user-select: none;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
@@ -550,10 +538,6 @@ limitations under the License.
top: 3px;
}
.mx_EventTile_editButton {
top: 3px;
}
.mx_EventTile_readAvatars {
top: 27px;
}
+5
View File
@@ -20,6 +20,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
.mx_Spinner {
flex: 1 0 auto;
@@ -35,6 +36,10 @@ limitations under the License.
margin-top: 8px;
margin-bottom: 4px;
}
.mx_AutoHideScrollbar {
flex: 1 1 0;
}
}
.mx_MemberList_chevron {
+62 -16
View File
@@ -15,33 +15,47 @@ limitations under the License.
*/
.mx_RoomBreadcrumbs {
overflow-x: auto;
position: relative;
height: 32px;
margin: 8px;
margin-bottom: 0;
overflow-x: hidden;
height: 42px;
padding: 8px;
padding-bottom: 0;
display: flex;
flex-direction: row;
> * {
margin-left: 4px;
// Autohide the scrollbar
overflow-x: hidden;
&:hover {
overflow-x: visible;
}
&::after {
content: "";
position: absolute;
width: 15px;
top: 0;
right: 0;
.mx_AutoHideScrollbar_offset {
display: flex;
flex-direction: row;
height: 100%;
background: linear-gradient(to right, $panel-gradient);
}
.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;
transition: transform 0.3s, width 0.3s;
width: 32px;
transform: scale(1);
}
@@ -50,5 +64,37 @@ limitations under the License.
width: 0;
transform: scale(0);
}
.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_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_IndicatorScrollbar_leftOverflowIndicator {
background: linear-gradient(to left, $panel-gradient);
}
.mx_IndicatorScrollbar_rightOverflowIndicator {
background: linear-gradient(to right, $panel-gradient);
}
}
+91 -27
View File
@@ -15,48 +15,112 @@ limitations under the License.
*/
.mx_RoomPreviewBar {
text-align: center;
height: 176px;
background-color: $event-selected-color;
flex: 0 0 auto;
align-items: center;
flex-direction: column;
justify-content: center;
display: flex;
background-color: $preview-bar-bg-color;
-webkit-align-items: center;
h3 {
font-size: 18px;
font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle {
display: flex;
flex-direction: row;
align-items: center;
}
}
.mx_Spinner {
width: auto;
height: auto;
margin: 10px 10px 10px 0;
flex: 0 0 auto;
}
}
.mx_RoomPreviewBar_wrapper {
.mx_RoomPreviewBar_dark {
background-color: $tagpanel-bg-color;
color: $accent-fg-color;
}
.mx_RoomPreviewBar_invite_text {
color: $primary-fg-color;
.mx_RoomPreviewBar_actions {
display: flex;
}
.mx_RoomPreviewBar_join_text {
color: $warning-color;
.mx_RoomPreviewBar_message {
display: flex;
align-items: stretch;
p {
overflow-wrap: break-word;
}
}
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
color: $settings-grey-fg-color;
.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
border-top: 1px solid $panel-divider-color;
flex-direction: row;
.mx_RoomPreviewBar_actions {
flex: 0 0 auto;
flex-direction: row;
padding: 3px 8px;
&>* {
margin-left: 12px;
}
}
.mx_RoomPreviewBar_message {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
&>* {
margin: 4px;
}
}
}
.mx_RoomPreviewBar_join_text a {
.mx_RoomPreviewBar_dialog {
margin: auto;
box-sizing: content;
width: 400px;
border-radius: 4px;
flex-direction: column;
padding: 20px;
text-align: center;
.mx_RoomPreviewBar_message {
flex-direction: column;
&>* {
margin: 5px 0 20px 0;
}
}
.mx_RoomPreviewBar_actions {
flex-direction: column-reverse;
.mx_AccessibleButton {
padding: 7px 50px;//extra wide
}
&>* {
margin-top: 12px;
}
}
}
.mx_RoomPreviewBar_inviter {
font-weight: 600;
}
a.mx_RoomPreviewBar_inviter {
text-decoration: underline;
cursor: pointer;
}
.mx_RoomPreviewBar_warning {
display: flex;
align-items: center;
padding: 8px;
}
.mx_RoomPreviewBar_warningIcon {
padding: 12px;
}
.mx_RoomPreviewBar_spinnerIntro {
margin-top: 50px;
}
+5 -2
View File
@@ -144,11 +144,14 @@ limitations under the License.
font-size: 12px;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
background-color: $roomtile-name-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
.mx_RoomTile_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed
{
background-color: $warning-color;
}
@@ -16,7 +16,7 @@ limitations under the License.
.mx_RoomUpgradeWarningBar {
text-align: center;
height: 176px;
height: 235px;
background-color: $event-selected-color;
align-items: center;
flex-direction: column;
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SettingsTab_warningText {
color: $warning-color;
}
.mx_SettingsTab_heading {
font-size: 20px;
font-weight: 600;
@@ -68,3 +72,7 @@ limitations under the License.
// give them more visual distinction between the sections.
margin-top: 30px;
}
.mx_SettingsTab a {
color: $accent-color-alt;
}