Merge branches 'develop' and 'devtools_serverlist' of github.com:matrix-org/matrix-react-sdk into devtools_serverlist
This commit is contained in:
+64
-12
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,4 +16,4 @@
|
||||
border: 1px solid;
|
||||
padding: 10px;
|
||||
background-color: #fcc;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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: '';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+8
-7
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user