imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/experimental' into travis/develop-for-real

Browse source
This commit is contained in:
Travis Ralston 2019-01-03 16:00:23 -07:00
commit 8017f0a4a1
164 changed files with 4652 additions and 2772 deletions
Download patch file Download diff file Expand all files Collapse all files

17
res/css/_common.scss
View file

@ -30,8 +30,6 @@ body {
color: $primary-fg-color;
border: 0px;
margin: 0px;
/* This should render the fonts the same accross browsers */
-webkit-font-smoothing: subpixel-antialiased;
}
.error, .warning {
@ -49,20 +47,14 @@ h2 {
a:hover,
a:link,
a:visited {
color: $accent-color;
color: $accent-color-alt;
}
input[type=text], input[type=password], textarea {
background-color: transparent;
color: $primary-fg-color;
}
input[type=text].error, input[type=password].error {
border: 1px solid $warning-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@ -83,11 +75,6 @@ textarea {
transition: opacity 0.2s ease-in-out;
}
.mx_fadable.mx_fadable_faded {
opacity: 0.3;
pointer-events: none;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
Stop the scrollbar view from pushing out the container's overall sizing, which causes
flexbox to adapt to the new size and cause the view to keep growing.
@ -314,7 +301,7 @@ textarea {
}
.mx_textButton {
@mixin mx_DialogButton_small;
@mixin mx_DialogButton_small;
}
.mx_textButton:hover {

6
res/css/_components.scss
View file

@ -1,6 +1,6 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
@import "./_fonts.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@import "./structures/_CreateRoom.scss";
@ -19,6 +19,7 @@
@import "./structures/_RoomView.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss";
@ -29,6 +30,7 @@
@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@ -62,6 +64,7 @@
@import "./views/elements/_MemberEventListSummary.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_ReplyThread.scss";
@import "./views/elements/_ResizeHandle.scss";
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_Spinner.scss";
@ -112,6 +115,7 @@
@import "./views/rooms/_SearchableEntityList.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";

67
res/css/_fonts.scss
View file

@ -1,67 +0,0 @@
/*
* Open Sans
* Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
/*
* Fira Mono
* Used for monospace copy, i.e. code
*/
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

66
res/css/structures/_AutoHideScrollbar.scss Normal file
View file

@ -0,0 +1,66 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
/*
2. webkit also supports overflow:overlay where the scrollbars don't take any space
in the layout but they don't autohide, so do that only on hover
*/
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
overflow-y: hidden;
}
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
overflow-y: overlay;
}
/*
3. as a last fallback, compensate for the scrollbar taking up space in the layout
by having giving the child element (.mx_AutoHideScrollbar_offset) a
negative right margin of the width of the scrollbar when the container
is overflowing. This is what Firefox ends up using. Overflow is detected
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
This only works in Firefox, which should be fine as this fallback is only needed there.
*/
body.mx_scrollbar_nooverlay {
.mx_AutoHideScrollbar {
overflow-y: hidden;
}
.mx_AutoHideScrollbar:hover {
overflow-y: auto;
}
/*
offset scrollbar width with negative margin-right
include before and after psuedo-elements here so they can
be used to do something interesting like scroll-indicating
gradients (see IndicatorScrollBar)
*/
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
{
margin-right: calc(-1 * var(--scrollbar-width));
}
}

17
res/css/structures/_ContextualMenu.scss
View file

@ -30,12 +30,11 @@ limitations under the License.
}
.mx_ContextualMenu {
border: solid 1px $menu-border-color;
border-radius: 4px;
border-radius: 2px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
padding: 6px;
font-size: 14px;
z-index: 5001;
}
@ -44,6 +43,10 @@ limitations under the License.
right: 8px;
}
.mx_ContextualMenu_noChevron {
border-radius: unset !important;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
@ -51,7 +54,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid $menu-border-color;
border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -78,7 +81,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -105,7 +108,7 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $menu-border-color;
border-bottom: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}
@ -132,7 +135,7 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $menu-border-color;
border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}

4
res/css/structures/_FilePanel.scss
View file

@ -16,11 +16,7 @@ limitations under the License.
.mx_FilePanel {
order: 2;
flex: 1 1 0;
width: 100%;
overflow-y: auto;
}

12
res/css/structures/_GroupView.scss
View file

@ -15,10 +15,6 @@ limitations under the License.
*/
.mx_GroupView {
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
overflow: hidden;
@ -29,7 +25,6 @@ limitations under the License.
}
.mx_GroupView_header {
max-width: 960px;
min-height: 70px;
align-items: center;
display: flex;
@ -39,6 +34,8 @@ limitations under the License.
.mx_GroupView_header_view {
border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px;
padding-left: 8px;
padding-right: 8px;
}
.mx_GroupView_header_avatar, .mx_GroupView_header_info {
@ -162,6 +159,11 @@ limitations under the License.
line-height: 2em;
}
.mx_GroupView > .mx_MainSplit {
flex: 1;
display: flex;
}
.mx_GroupView_body {
flex-grow: 1;
}

50
res/css/structures/_LeftPanel.scss
View file

@ -15,32 +15,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LeftPanel {
position: relative;
display: flex;
flex-direction: column;
}
.mx_LeftPanel_container {
display: flex;
/* LeftPanel 235px */
flex: 0 0 235px;
/* LeftPanel 260px */
min-width: 260px;
flex: 0 0 auto;
}
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + LeftPanel 235px */
flex: 0 0 295px;
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 70px */
flex: 0 0 70px;
}
.mx_LeftPanel_container_collapsed {
/* Collapsed LeftPanel 60px */
flex: 0 0 60px;
}
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + Collapsed LeftPanel 60px */
flex: 0 0 120px;
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 140px;
}
.mx_LeftPanel_hideButton {
@ -55,6 +45,14 @@ limitations under the License.
}
.mx_LeftPanel {
flex: 1;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.mx_LeftPanel .mx_AppTile_mini {
height: 132px;
}
@ -68,7 +66,7 @@ limitations under the License.
z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
@ -91,12 +89,6 @@ limitations under the License.
pointer-events: none;
}
.collapsed .mx_RoleButton {
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_BottomLeftMenu_options > div {
display: inline-block;
}
@ -115,7 +107,7 @@ limitations under the License.
margin-right: 0px;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
@ -124,7 +116,7 @@ limitations under the License.
flex: 0 0 50px;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
}

32
res/css/structures/_MatrixChat.scss
View file

@ -54,6 +54,7 @@ limitations under the License.
order: 2;
flex: 1;
min-height: 0;
}
.mx_MatrixChat_syncError {
@ -68,23 +69,8 @@ limitations under the License.
transform: translateX(-50%);
}
.mx_MatrixChat .mx_LeftPanel {
order: 1;
background-color: $secondary-accent-color;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
order: 2;
padding-left: 20px;
padding-right: 22px;
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
background-color: $primary-bg-color;
flex: 1;
@ -96,21 +82,9 @@ limitations under the License.
*/
overflow-x: auto;
display: flex;
/* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
height: 100%;
}
.mx_MatrixChat .mx_RightPanel {
order: 3;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_RightPanel.collapsed {
flex: 0 0 122px;
}

36
res/css/structures/_MyGroups.scss
View file

@ -15,10 +15,6 @@ limitations under the License.
*/
.mx_MyGroups {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
@ -34,6 +30,11 @@ limitations under the License.
flex-wrap: wrap;
}
.mx_MyGroups > :not(.mx_RoomHeader) {
max-width: 960px;
margin: 40px;
}
.mx_MyGroups_headerCard {
flex: 1 0 50%;
margin-bottom: 30px;
@ -43,14 +44,31 @@ limitations under the License.
}
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
flex: 0 0 auto;
margin-right: 13px;
height: 50px;
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
position: relative;
&:before {
background-color: $accent-fg-color;
mask: url('../../img/icons-create-room.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
.mx_MyGroups_headerCard_button object {
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
pointer-events: none;
}
.mx_MyGroups_headerCard_header {
font-weight: bold;

6
res/css/structures/_NotificationPanel.scss
View file

@ -16,11 +16,7 @@ limitations under the License.
.mx_NotificationPanel {
order: 2;
flex: 1 1 0;
width: 100%;
overflow-y: auto;
}
@ -97,4 +93,4 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
}

81
res/css/structures/_RightPanel.scss
View file

@ -15,8 +15,10 @@ limitations under the License.
*/
.mx_RightPanel {
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
min-width: 250px;
display: flex;
flex-direction: column;
}
@ -25,55 +27,57 @@ limitations under the License.
order: 1;
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 70px;
flex: 0 0 52px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
height: 100%;
display: flex;
width: 100%;
background-color: $primary-bg-color;
margin-left: 0px;
padding: 0 9px;
align-items: center;
}
.mx_RightPanel_headerButton {
cursor: pointer;
flex: 0 0 auto;
vertical-align: top;
padding-left: 4px;
margin-top: 4px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_highlight {
width: 25px;
height: 5px;
border-radius: 5px;
background-color: $accent-color;
opacity: 0.2;
border-color: $button-bg-color;
}
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: $accent-color;
font-size: 8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
position: absolute;
top: -4px;
left: 20px;
padding: 2px 4px;
}
.mx_RightPanel_collapsebutton {
flex: 1;
text-align: right;
margin-top: 20px;
height: 16px;
border: none;
}
.mx_RightPanel .mx_MemberList,
@ -88,46 +92,3 @@ limitations under the License.
order: 2;
margin: auto;
}
.mx_RightPanel_footer {
order: 3;
border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
font-size: 14px;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout {
.mx_RightPanel_footer {
flex: 0 0 50px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 25px;
padding-top: 8px;
}
}

329
res/css/structures/_RoomSubList.scss
View file

@ -14,235 +14,188 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomSubList {
display: table;
table-layout: fixed;
width: 100%;
/* a word of explanation about the flex-shrink values employed here:
there are 3 priotized categories of screen real-estate grabbing,
each with a flex-shrink difference of 4 order of magnitude,
so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
flex-shrink: 10000000
distribute size of items within the same categery by their size
middle category: .mx_RoomSubList.resized-sized
flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,
to limit the size
highest category: .mx_RoomSubList.resized-all
flex-shrink: 1
small flex-shrink value (1), is only added if you can drag the resizer so far
so in practice you can only assign this category if there is enough space.
*/
background-color: $roomsublist-background;
.mx_RoomSubList {
min-height: 31px;
flex: 0 100000000 auto;
display: flex;
flex-direction: column;
}
.mx_RoomSubList_nonEmpty {
min-height: 70px;
.mx_AutoHideScrollbar_offset {
padding-bottom: 4px;
}
}
.mx_RoomSubList_hidden {
flex: none !important;
}
.mx_RoomSubList.resized-all {
flex: 0 1 auto;
}
.mx_RoomSubList.resized-sized {
/* resizer set max-height on resized-sized,
so that limits the height and hence
needs a very small flex-shrink */
flex: 0 10000 auto;
}
.mx_RoomSubList_labelContainer {
height: 31px; /* mx_RoomSubList_label height including border */
width: 235px; /* LHS Panel width */
position: relative;
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin: 0 16px;
height: 36px;
}
.mx_RoomSubList_label {
position: relative;
flex: 1;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 6px;
}
.mx_RoomSubList_label > span {
flex: 1 1 auto;
text-transform: uppercase;
color: $roomsublist-label-fg-color;
font-weight: 600;
font-weight: 700;
font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: $secondary-accent-color;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 5;
/* pointer-events: none; */
}
.collapsed .mx_RoomSubList_label {
height: 17px;
width: 28px; /* collapsed LHS Panel width */
}
.collapsed .mx_RoomSubList_labelContainer {
width: 28px; /* collapsed LHS Panel width */
}
.mx_RoomSubList_roomCount {
display: inline-block;
font-size: 12px;
font-weight: normal;
color: $accent-color;
padding-left: 5px;
text-transform: none;
}
.collapsed .mx_RoomSubList_roomCount {
display: none;
margin-left: 8px;
}
.mx_RoomSubList_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 7px;
flex: 0 0 auto;
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
background-color: $accent-color;
font-size: 12px;
padding: 0 5px;
background-color: $roomtile-name-color;
}
.mx_RoomSubList_label .mx_RoomSubList_badge:hover {
filter: brightness($focus-brightness);
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
margin-left: 7px;
}
/*
.collapsed .mx_RoomSubList_badge {
display: none;
.mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-color;
color: $roomsublist-background;
background-image: url('../../img/icons-room-add.svg');
background-repeat: no-repeat;
background-position: center;
border-radius: 10px; // 16/2 + 2 padding
height: 16px;
flex: 0 0 16px;
background-clip: content-box;
}
*/
.mx_RoomSubList_badgeHighlight {
background-color: $warning-color;
}
/* This is the bottom of the speech bubble */
.mx_RoomSubList_badgeHighlight:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomSubList_badgeHighlight:after {
display: none;
}
.mx_RoomSubList_chevron {
pointer-events: none;
position: absolute;
right: 41px;
top: 11px;
background-image: url('../../img/topleft-chevron.svg');
background-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
height: 10px;
background-position: center;
margin-left: 2px;
}
.mx_RoomSubList_chevronDown {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid $roomsublist-chevron-color;
transform: rotateZ(0deg);
}
.mx_RoomSubList_chevronUp {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid $roomsublist-chevron-color;
transform: rotateZ(180deg);
}
.mx_RoomSubList_chevronRight {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid $roomsublist-chevron-color;
border-bottom: 5px solid transparent;
transform: rotateZ(-90deg);
}
/* The overflow section */
.mx_RoomSubList_ellipsis {
display: block;
line-height: 11px;
height: 18px;
position: relative;
cursor: pointer;
font-size: 13px;
background-color: $secondary-accent-color;
.mx_RoomSubList_scroll {
/* let rooms list grab as much space as it needs (auto),
potentially overflowing and showing a scrollbar */
flex: 0 1 auto;
padding: 0 8px;
}
.collapsed .mx_RoomSubList_ellipsis {
height: 20px;
// overflow indicators
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before,
&.mx_IndicatorScrollbar_bottomOverflow::after {
position: sticky;
left: 0;
right: 0;
height: 30px;
content: "";
display: block;
z-index: 100;
pointer-events: none;
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -30px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -30px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
}
&.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
background: linear-gradient(to bottom, rgba(242,245,248,0), rgba(242,245,248,1));
}
}
.mx_RoomSubList_line {
display: inline-block;
width: 159px;
border-top: dotted 2px $accent-color;
vertical-align: middle;
.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;
}
}
.collapsed .mx_RoomSubList_line {
display: none;
}
.mx_RoomSubList_more {
display: inline-block;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
text-align: left;
color: $accent-color;
padding-left: 7px;
padding-right: 7px;
padding-left: 7px;
vertical-align: middle;
}
.collapsed .mx_RoomSubList_more {
display: none;
}
.mx_RoomSubList_moreBadge {
display: inline-block;
min-width: 15px;
height: 13px;
position: absolute;
right: 8px; /*gutter */
top: -2px;
border-radius: 8px;
border: solid 1px $accent-color;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 3px;
padding-right: 3px;
background-color: $primary-bg-color;
vertical-align: middle;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: $accent-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: $warning-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.collapsed .mx_RoomSubList_moreBadge {
position: static;
margin-left: 16px;
margin-top: 2px;
}
.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
position: relative;
top: 4px;
left: 2px;
}

55
res/css/structures/_RoomView.scss
View file

@ -16,23 +16,12 @@ limitations under the License.
.mx_RoomView {
word-wrap: break-word;
position: relative;
display: flex;
width: 100%;
flex-direction: column;
}
.mx_RoomView .mx_RoomHeader {
order: 1;
flex: 0 0 70px;
}
.mx_RoomView_fileDropTarget {
min-width: 0px;
max-width: 960px;
width: 100%;
font-size: 18px;
text-align: center;
@ -50,7 +39,7 @@ limitations under the License.
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 70px;
top: 52px;
bottom: 0px;
z-index: 3000;
}
@ -63,33 +52,47 @@ limitations under the License.
}
.mx_RoomView_auxPanel {
order: 2;
min-width: 0px;
max-width: 960px;
width: 100%;
margin: 0px auto;
overflow: auto;
border-bottom: 1px solid $primary-hairline-color;
flex: 0 0 auto;
}
.mx_RoomView_auxPanel_fullHeight {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3000;
background-color: $primary-bg-color;
}
.mx_RoomView_auxPanel_apps {
max-width: 1920px ! important;
}
.mx_RoomView_body {
order: 3;
.mx_RoomView .mx_MainSplit {
flex: 1 1 0;
flex-direction: column;
display: flex;
}
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
order: 1;
.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 {
@ -98,7 +101,6 @@ limitations under the License.
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
order: 2;
margin: auto;
}
.mx_RoomView_body .mx_RoomView_statusArea {
@ -115,9 +117,6 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
max-width: 960px;
margin: auto;
min-height: 100%;
display: flex;
@ -142,9 +141,8 @@ limitations under the License.
}
.mx_RoomView_MessageList {
width: 100%;
list-style-type: none;
padding: 0px;
padding: 18px;
}
.mx_RoomView_MessageList li {
@ -184,7 +182,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto;
min-height: 50px;
}

55
res/css/structures/_SearchBox.scss
View file

@ -14,55 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SearchBox {
height: 24px;
margin-left: 16px;
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid $panel-divider-color;
display: flex;
}
.mx_SearchBox_searchButton {
margin-right: 10px;
margin-top: 5px;
pointer-events: none;
}
.mx_SearchBox_closeButton {
cursor: pointer;
margin-top: -5px;
}
.mx_SearchBox_search {
flex: 1 1 auto;
width: 0px;
font-family: $font-family;
font-size: 12px;
margin-top: -2px;
height: 24px;
border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
border: 0px;
}
.mx_SearchBox_minimise,
.mx_SearchBox_maximise {
margin-top: 3px;
cursor: pointer;
}
.mx_SearchBox_minimise {
margin-left: 10px;
}
.mx_SearchBox_maximise {
margin-left: 9px;
}
.mx_SearchBox object {
pointer-events: none;
background-image: url('../../img/icons-close.svg');
background-repeat: no-repeat;
width: 16px;
height: 16px;
background-position: center;
padding: 9px;
}

59
res/css/structures/_TagPanel.scss
View file

@ -15,8 +15,9 @@ limitations under the License.
*/
.mx_TagPanel {
flex: 0 0 60px;
background-color: $tertiary-accent-color;
flex: 0 0 70px;
background-color: $tagpanel-bg-color;
cursor: pointer;
display: flex;
flex-direction: column;
@ -38,6 +39,8 @@ limitations under the License.
display: flex;
justify-content: center;
align-items: flex-start;
display: none;
}
.mx_TagPanel .mx_TagPanel_clearButton object {
@ -50,6 +53,7 @@ limitations under the License.
height: 0px;
width: 42px;
border-bottom: 1px solid $panel-divider-color;
display: none;
}
.mx_TagPanel .mx_TagPanel_scroller {
@ -60,19 +64,21 @@ limitations under the License.
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
height: 100%;
}
.mx_TagPanel .mx_TagTile {
padding: 6px 3px;
opacity: 0.5;
padding-top: 9px;
padding-bottom: 9px;
// 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 {
@ -83,12 +89,12 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
border: 3px solid $accent-color;
background-color: $accent-color;
border-radius: 60px;
border-radius: 40px;
/* In case this is a "initial" avatar */
display: block;
height: 35px;
width: 35px;
height: 40px;
width: 40px;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@ -119,11 +125,38 @@ limitations under the License.
}
.mx_TagPanel_groupsButton {
margin-bottom: 17px;
margin-top: 18px;
height: 25px;
flex: 0;
margin: 17px 0 3px 0;
}
.mx_TagPanel_groupsButton object {
pointer-events: none;
.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
mask: url('../../img/feather-icons/users.svg');
mask-position: center 11px;
}
.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
mask: url('../../img/feather-icons/life-buoy.svg');
mask-position: center 9px;
}
.mx_TagPanel_groupsButton > .mx_AccessibleButton {
margin-bottom: 12px;
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
position: relative;
/* overwrite mx_RoleButton inline-block */
display: block !important;
&:before {
background-color: $tagpanel-bg-color;
mask-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

44
res/css/structures/_TopLeftMenuButton.scss Normal file
View file

@ -0,0 +1,44 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_TopLeftMenuButton {
flex: 0 0 52px;
border-bottom: 1px solid $panel-divider-color;
color: $topleftmenu-color;
background-color: $primary-bg-color;
display: flex;
align-items: center;
min-width: 0;
padding: 0 7px;
overflow: hidden;
}
.mx_TopLeftMenuButton .mx_BaseAvatar {
margin: 0 7px;
}
.mx_TopLeftMenuButton_name {
margin: 0 7px;
font-size: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
}
.mx_TopLeftMenuButton_chevron {
margin: 0 7px;
}

4
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MessageContextMenu {
padding: 6px;
}
.mx_MessageContextMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;

4
res/css/views/context_menus/_RoomTileContextMenu.scss
View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomTileContextMenu {
padding: 6px;
}
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px;
padding-right: 20px;

39
res/css/views/context_menus/_TopLeftMenu.scss Normal file
View file

@ -0,0 +1,39 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_TopLeftMenu {
min-width: 180px;
.mx_TopLeftMenu_section:not(:last-child) {
border-bottom: 1px solid $menu-border-color;
}
.mx_TopLeftMenu_section {
list-style: none;
margin: 5px 0;
padding: 0;
li {
white-space: nowrap;
padding: 5px 20px;
}
li:hover {
background-color: $menu-selected-color;
}
}
}

3
res/css/views/elements/_AccessibleButton.scss
View file

@ -16,9 +16,8 @@ limitations under the License.
.mx_AccessibleButton:focus {
outline: 0;
filter: brightness($focus-brightness);
}
.mx_AccessibleButton {
cursor: pointer;
}
}

46
res/css/views/elements/_ResizeHandle.scss Normal file
View file

@ -0,0 +1,46 @@
/*
Copyright 2018 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ResizeHandle {
cursor: row-resize;
flex: 0 0 auto;
z-index: 100;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical {
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
.mx_ResizeHandle > div {
background: $panel-divider-color;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
height: 1px;
}

6
res/css/views/groups/_GroupRoomList.scss
View file

@ -18,4 +18,10 @@ limitations under the License.
position: relative;
color: $primary-fg-color;
cursor: pointer;
display: flex;
align-items: center;
}
.mx_GroupRoomList_wrapper {
padding: 10px;
}

21
res/css/views/messages/_DateSeparator.scss
View file

@ -16,10 +16,21 @@ limitations under the License.
.mx_DateSeparator {
clear: both;
margin-top: 32px;
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid $primary-hairline-color;
margin: 4px 0;
display: flex;
align-items: center;
font-size: 14px;
color: $roomtopic-color;
}
.mx_DateSeparator > hr {
flex: 1 1 0;
height: 0;
border: none;
border-bottom: 1px solid $panel-divider-color;
}
.mx_DateSeparator > date {
margin: 0 25px;
flex: 0 0 auto;
}

38
res/css/views/messages/_SenderProfile.scss
View file

@ -13,3 +13,41 @@ 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_SenderProfile_name {
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;
}

32
res/css/views/rooms/_EntityTile.scss
View file

@ -15,12 +15,19 @@ limitations under the License.
*/
.mx_EntityTile {
display: table-row;
position: relative;
display: flex;
align-items: center;
color: $primary-fg-color;
cursor: pointer;
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
flex: 1 1 0;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
display: table-cell;
padding-right: 14px;
vertical-align: middle;
overflow: hidden;
}
.mx_EntityTile_name_hover {
font-size: 13px;
}
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
@ -87,6 +81,7 @@ limitations under the License.
color: $primary-fg-color;
}
/*
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
@ -110,6 +105,7 @@ limitations under the License.
{
opacity: 0.25;
}
*/
.mx_EntityTile_subtext {
font-size: 11px;
@ -118,5 +114,3 @@ limitations under the License.
white-space: nowrap;
text-overflow: clip;
}

7
res/css/views/rooms/_EventTile.scss
View file

@ -55,11 +55,6 @@ limitations under the License.
line-height: 22px;
}
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
opacity: 0.5;
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
@ -450,7 +445,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
color: $accent-color;
color: $accent-color-alt;
}
.mx_EventTile_content .markdown-body .hljs {

47
res/css/views/rooms/_MemberInfo.scss
View file

@ -15,14 +15,35 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
padding-right: 20px;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.mx_MemberInfo_name {
align-items: center;
display: flex;
}
.mx_MemberInfo_cancel {
height: 16px;
padding: 10px 15px;
cursor: pointer;
}
.mx_MemberInfo_name h2 {
flex: 1;
}
.mx_MemberInfo h2 {
margin-top: 6px;
font-size: 18px;
font-weight: 600;
margin: 16px 0;
}
.mx_MemberInfo_container {
padding: 8px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
@ -37,14 +58,16 @@ limitations under the License.
width: 160px;
}
.mx_MemberInfo_cancel {
float: right;
margin-right: 10px;
cursor: pointer;
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
}
.mx_MemberInfo_avatar {
clear: both;
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
@ -70,7 +93,6 @@ limitations under the License.
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@ -117,3 +139,6 @@ limitations under the License.
white-space: nowrap;
text-overflow: clip;
}
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
flex: 1;
}

108
res/css/views/rooms/_MemberList.scss
View file

@ -17,20 +17,24 @@ limitations under the License.
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.mx_MemberList .mx_Spinner {
flex: 0 0 auto;
.mx_Spinner {
flex: 1 0 auto;
}
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
}
.mx_MemberList_chevron {
@ -49,65 +53,39 @@ limitations under the License.
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
flex: 1 1 0;
}
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
overflow-y: auto;
}
/*
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_GroupMemberList_invited h2,
.mx_MemberList_invited h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
/* we have to have display: table in order for the horizontal wrapping to work */
.mx_MemberList_wrapper {
display: table;
table-layout: fixed;
width: 100%;
padding: 10px;
}
.mx_MemberList_invite,
.mx_RightPanel_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
border-radius: 4px;
padding: 8px;
margin: 9px;
display: flex;
color: $button-fg-color;
font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
}
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('../../img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
}

15
res/css/views/rooms/_MessageComposer.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
*/
.mx_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid $primary-hairline-color;
@ -58,26 +57,25 @@ limitations under the License.
width: 100%;
}
.mx_MessageComposer_row > div:last-child{
padding-right: 0;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
padding-left: 10px;
padding-right: 28px;
padding: 0 28px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}
.mx_MessageComposer .mx_AccessibleButton {
padding: 0 12px 0 0;
}
.mx_MessageComposer_composecontrols {
width: 100%;
}
.mx_MessageComposer_e2eIcon {
position: absolute;
left: 44px;
left: 60px;
}
.mx_MessageComposer_noperm_error {
@ -216,7 +214,6 @@ limitations under the License.
.mx_MessageComposer_formatbar {
margin: auto;
max-width: 960px;
display: flex;
height: 30px;

97
res/css/views/rooms/_RoomHeader.scss
View file

@ -14,29 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* add 20px to the height of the header when editing */
.mx_RoomHeader_editing {
flex: 0 0 93px ! important;
.mx_RoomHeader {
flex: 0 0 52px;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 70px;
height: 52px;
align-items: center;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
order: 1;
flex: 1;
overflow: hidden;
align-items: center;
min-width: 0;
padding: 0 10px 0 19px;
}
.mx_RoomHeader_spinner {
flex: 1;
height: 36px;
order: 2;
padding-left: 12px;
padding-right: 12px;
}
@ -45,7 +40,6 @@ limitations under the License.
@mixin mx_DialogButton;
margin-right: 8px;
margin-top: -5px;
order: 2;
}
.mx_RoomHeader_textButton:hover {
@ -57,31 +51,29 @@ limitations under the License.
}
.mx_RoomHeader_cancelButton {
order: 2;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: $primary-bg-color;
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
order: 3;
background-color: $primary-bg-color;
padding-right: 5px;
}
.mx_RoomHeader_info {
display: table-cell;
width: 100%;
vertical-align: middle;
display: flex;
flex: 1;
align-items: center;
}
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: $primary-fg-color;
font-size: 22px;
font-weight: bold;
line-height: 52px;
color: $roomheader-color;
font-size: 18px;
font-weight: 600;
overflow: hidden;
margin-left: 63px;
text-overflow: ellipsis;
@ -99,22 +91,19 @@ limitations under the License.
}
.mx_RoomHeader_name {
vertical-align: middle;
width: 100%;
height: 31px;
flex: 0 1 auto;
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
color: $roomheader-color;
font-weight: 600;
font-size: 18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_nametext {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mx_RoomHeader_settingsHint {
@ -166,25 +155,23 @@ limitations under the License.
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: $settings-grey-fg-color;
font-weight: 300;
flex: 1;
color: $roomtopic-color;
font-weight: 400;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
margin: 0 7px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
column-width: 960px;
line-height: 1.2em;
max-height: 2.4em;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
flex: 0;
width: 28px;
height: 28px;
margin: 0 7px;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
@ -192,13 +179,13 @@ limitations under the License.
}
.mx_RoomHeader_avatarPicker {
margin-top: 23px;
position: relative;
}
.mx_RoomHeader_avatarPicker_edit {
margin-left: 16px;
margin-top: 4px;
position: absolute;
left: 16px;
top: 18px;
}
.mx_RoomHeader_avatarPicker_edit > label {
@ -210,7 +197,7 @@ limitations under the License.
}
.mx_RoomHeader_button {
margin-left: 12px;
margin-left: 10px;
cursor: pointer;
}
@ -218,6 +205,10 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}

30
res/css/views/rooms/_RoomList.scss
View file

@ -16,8 +16,21 @@ limitations under the License.
*/
.mx_RoomList {
padding-bottom: 12px;
min-height: 400px;
/* take up remaining space below TopLeftMenu */
flex: 1 1 auto;
/* use flexbox to layout sublists */
display: flex;
flex-direction: column;
min-height: 0;
}
.mx_SearchBox {
flex: none;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
}
.mx_RoomList_expandButton {
@ -27,20 +40,7 @@ limitations under the License.
padding-right: 12px;
}
/* Evil hacky override until Chrome fixes drop and drag table cells
and we can correctly fix horizontal wrapping in the sidebar again */
.mx_RoomList_scrollbar .gm-scroll-view {
overflow-x: hidden ! important;
overflow-y: scroll ! important;
}
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 6;
}
.mx_RoomList_emptySubListTip_container {
background-color: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;

3
res/css/views/rooms/_RoomSettings.scss
View file

@ -16,8 +16,7 @@ limitations under the License.
*/
.mx_RoomSettings {
margin-left: 65px;
margin-bottom: 20px;
margin: 40px;
}
.mx_RoomSettings_upgradeButton,

136
res/css/views/rooms/_RoomTile.scss
View file

@ -15,13 +15,30 @@ limitations under the License.
*/
.mx_RoomTile {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
font-size: 13px;
display: block;
height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
}
background-color: $secondary-accent-color;
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
// toggle menuButton and badge on hover/menu displayed
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
.mx_RoomTile_menuButton {
display: block;
}
}
.mx_RoomTile_tooltip {
@ -38,6 +55,11 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomTile_avatar {
flex: 0;
padding: 4px;
}
.mx_RoomTile_subtext {
display: inline-block;
font-size: 11px;
@ -78,87 +100,53 @@ limitations under the License.
}
.mx_RoomTile_name {
display: inline-block;
position: relative;
width: 165px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
flex: 1 5 auto;
font-size: 14px;
font-weight: 600;
padding: 6px;
color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_invite {
/* color: rgba(69, 69, 69, 0.5); */
}
.collapsed {
.mx_RoomTile {
margin: 0 2px;
padding: 0 2px;
position: relative;
justify-content: center;
}
.collapsed .mx_RoomTile_nameContainer {
width: 60px; /* colapsed panel width */
}
.mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile_name {
display: none;
}
.mx_RoomTile_badge {
position: absolute;
right: 6px;
top: 0px;
border-radius: 16px;
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.collapsed .mx_RoomTile_badge {
top: 0px;
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 3;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
display: none;
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
.mx_RoomTile_menuButton {
display: none; //no design for this for now
}
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
flex: 0 1 content;
border-radius: 0.8em;
padding: 0 0.4em;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: $neutral-badge-color;
font-size: 12px;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color;
background-color: $roomtile-name-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
@ -167,9 +155,14 @@ limitations under the License.
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800;
.mx_RoomTile_name {
color: $roomtile-selected-color;
}
}
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
}
@ -187,10 +180,6 @@ limitations under the License.
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;
@ -203,4 +192,3 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
}

4
res/css/views/rooms/_RoomTooltip.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -40,8 +40,8 @@ limitations under the License.
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid $menu-border-color;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $primary-bg-color;
z-index: 2000;
padding: 5px;

66
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -14,40 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@charset "utf-8";
.mx_TopUnreadMessagesBar {
margin: auto; /* centre horizontally */
max-width: 960px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid $primary-hairline-color;
z-index: 1000;
position: absolute;
top: 24px;
right: 24px;
width: 38px;
}
.mx_TopUnreadMessagesBar:after {
content: "·";
position: absolute;
top: -8px;
left: 11px;
width: 16px;
height: 16px;
border-radius: 16px;
font-weight: 600;
font-size: 30px;
line-height: 14px;
text-align: center;
color: $secondary-accent-color;
background-color: $accent-color;
}
.mx_TopUnreadMessagesBar_scrollUp {
display: inline;
cursor: pointer;
text-decoration: underline;
}
.mx_TopUnreadMessagesBar_scrollUp img {
padding-left: 10px;
padding-right: 31px;
vertical-align: middle;
}
.mx_TopUnreadMessagesBar_scrollUp span {
opacity: 0.5;
}
.mx_TopUnreadMessagesBar_close {
float: right;
padding-right: 14px;
padding-top: 3px;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
cursor: pointer;
}
.mx_MatrixChat_useCompactLayout {
.mx_TopUnreadMessagesBar {
padding-top: 4px;
padding-bottom: 4px;
}
.mx_TopUnreadMessagesBar_scrollUp:before {
content: "";
position: absolute;
width: 38px;
height: 38px;
mask: url('../../img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
}

77
res/css/views/rooms/_WhoIsTypingTile.scss Normal file
View file

@ -0,0 +1,77 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_WhoIsTypingTile {
margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
padding-top: 18px;
display: flex;
align-items: center;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_avatars {
flex: 0 0 83px; // 18 + 65
text-align: center;
}
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $primary-bg-color;
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
}
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-weight: 600;
color: $eventtile-meta-color;
}
.mx_WhoIsTypingTile_label > span {
background-image: url('../../img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 15px;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_WhoIsTypingTile {
padding-top: 4px;
}
}