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

Merge branch 'develop' into foldleft/better-errors

Browse source
This commit is contained in:
Zoe 2020-04-06 11:36:46 +01:00
commit 5ef06357f6
307 changed files with 2986 additions and 1615 deletions
Download patch file Download diff file Expand all files Collapse all files

22
res/css/_common.scss
View file

@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import "./_font-sizes.scss";
:root {
font-size: 15px;
}
html {
/* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */
@ -25,7 +31,7 @@ html {
body {
font-family: $font-family;
font-size: 15px;
font-size: $font-15px;
background-color: $primary-bg-color;
color: $primary-fg-color;
border: 0px;
@ -60,7 +66,7 @@ b {
h2 {
color: $primary-fg-color;
font-weight: 400;
font-size: 18px;
font-size: $font-18px;
margin-top: 16px;
margin-bottom: 16px;
}
@ -76,7 +82,7 @@ input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
font-size: 14px;
font-size: $font-14px;
font-weight: 600;
min-width: 0;
}
@ -253,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $light-fg-color;
z-index: 4012;
font-weight: 300;
font-size: 15px;
font-size: $font-15px;
position: relative;
padding: 25px 30px 30px 30px;
max-height: 80%;
@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_Dialog_title {
font-size: 22px;
line-height: 36px;
font-size: $font-22px;
line-height: $font-36px;
color: $dialog-title-fg-color;
}
@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: 14px;
font-size: $font-14px;
color: $primary-fg-color;
word-wrap: break-word;
}
@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_TextInputDialog_input {
font-size: 15px;
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;

2
res/css/_components.scss
View file

@ -1,5 +1,6 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
@import "./_font-sizes.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@ -186,6 +187,7 @@
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";

63
res/css/_font-sizes.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
$font-8px: 0.533rem;
$font-9px: 0.600rem;
$font-10px: 0.667rem;
$font-10-4px: 0.693rem;
$font-11px: 0.733rem;
$font-12px: 0.800rem;
$font-13px: 0.867rem;
$font-14px: 0.933rem;
$font-15px: 1.000rem;
$font-16px: 1.067rem;
$font-17px: 1.133rem;
$font-18px: 1.200rem;
$font-19px: 1.267rem;
$font-20px: 1.333rem;
$font-21px: 1.400rem;
$font-22px: 1.467rem;
$font-23px: 1.533rem;
$font-24px: 1.600rem;
$font-25px: 1.667rem;
$font-26px: 1.733rem;
$font-27px: 1.800rem;
$font-28px: 1.867rem;
$font-29px: 1.933rem;
$font-30px: 2.000rem;
$font-31px: 2.067rem;
$font-32px: 2.133rem;
$font-33px: 2.200rem;
$font-34px: 2.267rem;
$font-35px: 2.333rem;
$font-36px: 2.400rem;
$font-37px: 2.467rem;
$font-38px: 2.533rem;
$font-39px: 2.600rem;
$font-40px: 2.667rem;
$font-41px: 2.733rem;
$font-42px: 2.800rem;
$font-43px: 2.867rem;
$font-44px: 2.933rem;
$font-45px: 3.000rem;
$font-46px: 3.067rem;
$font-47px: 3.133rem;
$font-48px: 3.200rem;
$font-49px: 3.267rem;
$font-50px: 3.333rem;
$font-51px: 3.400rem;
$font-52px: 3.467rem;
$font-400px: 26.667rem;

100
res/css/structures/_AutoHideScrollbar.scss
View file

@ -14,69 +14,16 @@ 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 logical to read but duplicates a selector to separate the
* hiding/showing from the sizing.
*/
/* stylelint-disable no-duplicate-selectors */
/*
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));
}
}
// style the native scrollbars ...
// ... standard css scrollbars (firefox at time of writing)
.mx_AutoHideScrollbar {
// make any scrollbar grey and thin
html {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
}
// scrollbar-width is not inherited (but -color is, why?!),
// so declare it on every element
* {
scrollbar-width: thin;
}
// or fallback for webkit browsers
::-webkit-scrollbar {
width: 6px;
height: 6px;
@ -84,6 +31,37 @@ body.mx_scrollbar_nooverlay {
}
::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;
border-radius: 3px;
background-color: $scrollbar-thumb-color;
}
// make auto-hide scrollbars not transparent again on hover
.mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
&::-webkit-scrollbar {
background-color: $scrollbar-track-color;
}
&::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;
}
}
// make scrollbars transparent for autohide scrollbars
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay; // where supported
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
scrollbar-color: transparent transparent;
}

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

@ -36,7 +36,7 @@ limitations under the License.
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
font-size: 14px;
font-size: $font-14px;
z-index: 5001;
}

2
res/css/structures/_CreateRoom.scss
View file

@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
font-size: $font-13px;
padding: 9px;
margin-top: 6px;
}

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

@ -49,7 +49,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
display: flex;
font-size: 14px;
font-size: $font-14px;
color: $event-timestamp-color;
}
@ -60,7 +60,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: 11px;
font-size: $font-11px;
text-align: right;
white-space: nowrap;
}
@ -80,7 +80,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
font-size: 11px;
font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}
@ -90,7 +90,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
font-size: 11px;
font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}

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

@ -134,7 +134,7 @@ limitations under the License.
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
font-size: $font-22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
@ -148,7 +148,7 @@ limitations under the License.
max-height: 42px;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px;
font-size: $font-13px;
padding-left: 19px;
margin-right: 16px;
overflow: hidden;
@ -196,7 +196,7 @@ limitations under the License.
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
font-size: $font-13px;
margin-bottom: 10px;
}
@ -226,7 +226,7 @@ limitations under the License.
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
line-height: 24px;
line-height: $font-24px;
padding-left: 28px;
color: $accent-color;
}
@ -258,7 +258,7 @@ limitations under the License.
.mx_GroupView_membershipSection_description {
/* To match textButton */
line-height: 34px;
line-height: $font-34px;
}
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
@ -337,7 +337,7 @@ limitations under the License.
display: none;
}
.mx_GroupView_body .mx_AutoHideScrollbar_offset > * {
.mx_GroupView_body .mx_AutoHideScrollbar > * {
margin: 11px 50px 50px 68px;
}
@ -366,7 +366,7 @@ limitations under the License.
padding: 40px 20px;
}
.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar_offset > :not(.mx_MemberInfo_avatar) {
.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
padding-left: 16px;
padding-right: 16px;
}

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

@ -147,7 +147,7 @@ limitations under the License.
}
.mx_AccessibleButton {
font-size: 14px;
font-size: $font-14px;
margin: 4px 0 1px 9px;
padding: 9px;
padding-left: 42px;

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

@ -105,7 +105,7 @@ limitations under the License.
.mx_MyGroups_placeholder {
background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color;
line-height: 400px;
line-height: $font-400px;
border-radius: 10px;
text-align: center;
}
@ -149,11 +149,11 @@ limitations under the License.
.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0px;
font-size: 15px;
font-size: $font-15px;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 13px;
font-size: $font-13px;
opacity: 0.7;
}
@ -161,7 +161,7 @@ limitations under the License.
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
font-size: $font-13px;
max-height: 36px;
overflow: hidden;
}

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

@ -39,7 +39,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
font-size: 14px;
font-size: $font-14px;
}
.mx_NotificationPanel .mx_EventTile_roomName a {
@ -54,7 +54,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-fg-color;
font-size: 12px;
font-size: $font-12px;
display: inline;
padding-left: 0px;
}

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

@ -96,7 +96,7 @@ limitations under the License.
}
.mx_RightPanel_headerButton_badge {
font-size: 8px;
font-size: $font-8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;

10
res/css/structures/_RoomDirectory.scss
View file

@ -64,7 +64,7 @@ limitations under the License.
}
.mx_RoomDirectory_table {
font-size: 12px;
font-size: $font-12px;
color: $primary-fg-color;
width: 100%;
text-align: left;
@ -112,7 +112,7 @@ limitations under the License.
.mx_RoomDirectory_name {
display: inline-block;
font-size: 18px;
font-size: $font-18px;
font-weight: 600;
}
@ -124,7 +124,7 @@ limitations under the License.
border-radius: 10px;
display: inline-block;
height: 20px;
line-height: 20px;
line-height: $font-20px;
padding: 0 5px;
color: $accent-fg-color;
background-color: $rte-room-pill-color;
@ -136,7 +136,7 @@ limitations under the License.
}
.mx_RoomDirectory_alias {
font-size: 12px;
font-size: $font-12px;
color: $settings-grey-fg-color;
}
@ -150,7 +150,7 @@ limitations under the License.
}
.mx_RoomDirectory > span {
font-size: 15px;
font-size: $font-15px;
margin-top: 0;
.mx_AccessibleButton {

14
res/css/structures/_RoomStatusBar.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 50px;
line-height: 50px;
line-height: $font-50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color;
font-size: 13px;
font-size: $font-13px;
opacity: 0.5;
padding-bottom: 20px;
}
@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 50px;
line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: 50px;
line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 40px;
line-height: 40px;
line-height: $font-40px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 40px;
line-height: $font-40px;
}
}

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

@ -68,7 +68,7 @@ limitations under the License.
text-transform: uppercase;
color: $roomsublist-label-fg-color;
font-weight: 700;
font-size: 12px;
font-size: $font-12px;
margin-left: 8px;
}
@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
font-size: $font-12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
@ -166,41 +166,22 @@ limitations under the License.
// overflow indicators
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before,
&.mx_IndicatorScrollbar_bottomOverflow::after {
&.mx_IndicatorScrollbar_topOverflow::before {
position: sticky;
content: "";
top: 0;
left: 0;
right: 0;
height: 8px;
content: "";
display: block;
z-index: 100;
display: block;
pointer-events: none;
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -8px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -8px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
transition: background-image 0.1s ease-in;
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.
// so, instead, we hard-clip at the bottom but soft-clip at the top.
&.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
transition: background-image 0.1s ease-in;
margin: 0px -8px;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
&.mx_IndicatorScrollbar_topOverflow {
margin-top: -8px;
}
*/
}

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

@ -23,7 +23,7 @@ limitations under the License.
.mx_RoomView_fileDropTarget {
min-width: 0px;
width: 100%;
font-size: 18px;
font-size: $font-18px;
text-align: center;
pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty {
flex: 1 1 auto;
font-size: 13px;
font-size: $font-13px;
padding-left: 3em;
padding-right: 3em;
margin-right: 20px;

2
res/css/structures/_TabbedView.scss
View file

@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 14px;
font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;

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

@ -137,9 +137,9 @@ limitations under the License.
top: -8px;
border-radius: 8px;
background-color: $neutral-badge-color;
color: #ffffff;
color: #000;
font-weight: 600;
font-size: 10px;
font-size: $font-10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@ -157,7 +157,7 @@ limitations under the License.
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 14px;
font-size: $font-14px;
padding: 0 5px;
background-color: $roomtile-name-color;
}

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

@ -77,7 +77,7 @@ limitations under the License.
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: 15px;
font-size: $font-15px;
font-weight: 600;
}
@ -96,11 +96,11 @@ limitations under the License.
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: 12px;
font-size: $font-12px;
}
.mx_Toast_deviceID {
font-size: 10px;
font-size: $font-10px;
}
}
}

2
res/css/structures/_TopLeftMenuButton.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
.mx_TopLeftMenuButton_name {
margin: 0 7px;
font-size: 18px;
font-size: $font-18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

2
res/css/structures/_ViewSource.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
.mx_ViewSource pre {
text-align: left;
font-size: 12px;
font-size: $font-12px;
padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;

2
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
}
.mx_CompleteSecurity_body {
font-size: 15px;
font-size: $font-15px;
}
.mx_CompleteSecurity_waiting {

8
res/css/views/auth/_AuthBody.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthBody {
width: 500px;
font-size: 12px;
font-size: $font-12px;
color: $authpage-secondary-color;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
@ -25,14 +25,14 @@ limitations under the License.
box-sizing: border-box;
h2 {
font-size: 24px;
font-size: $font-24px;
font-weight: 600;
margin-top: 8px;
color: $authpage-primary-color;
}
h3 {
font-size: 14px;
font-size: $font-14px;
font-weight: 600;
color: $authpage-primary-color;
}
@ -98,7 +98,7 @@ limitations under the License.
.mx_AuthBody_editServerDetails {
padding-left: 1em;
font-size: 12px;
font-size: $font-12px;
font-weight: normal;
}

2
res/css/views/auth/_AuthButtons.scss
View file

@ -43,7 +43,7 @@ limitations under the License.
cursor: pointer;
font-size: 15px;
font-size: $font-15px;
padding: 0 11px;
word-break: break-word;
}

2
res/css/views/auth/_AuthFooter.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter {
text-align: center;
width: 100%;
font-size: 14px;
font-size: $font-14px;
opacity: 0.72;
padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

4
res/css/views/auth/_CompleteSecurityBody.scss
View file

@ -24,13 +24,13 @@ limitations under the License.
box-sizing: border-box;
h2 {
font-size: 24px;
font-size: $font-24px;
font-weight: 600;
margin-top: 0;
}
h3 {
font-size: 14px;
font-size: $font-14px;
font-weight: 600;
}

11
res/css/views/auth/_InteractiveAuthEntryComponents.scss
View file

@ -60,3 +60,14 @@ limitations under the License.
.mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px;
}
.mx_InteractiveAuthEntryComponents_sso_buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
.mx_AccessibleButton {
margin-left: 5px;
}
}

2
res/css/views/auth/_LanguageSelector.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: 14px;
font-size: $font-14px;
font-weight: 600;
color: $authpage-lang-color;
}

2
res/css/views/auth/_ServerTypeSelector.scss
View file

@ -65,5 +65,5 @@ limitations under the License.
}
.mx_ServerTypeSelector_description {
font-size: 10px;
font-size: $font-10px;
}

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

@ -38,7 +38,7 @@ limitations under the License.
white-space: nowrap;
display: flex;
align-items: center;
line-height: 16px;
line-height: $font-16px;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {

2
res/css/views/context_menus/_StatusMessageContextMenu.scss
View file

@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton;
align-self: start;
font-size: 12px;
font-size: $font-12px;
padding: 6px 1em;
border: 1px solid transparent;
margin-right: 10px;

2
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
white-space: nowrap;
display: flex;
align-items: center;
line-height: 16px;
line-height: $font-16px;
}
.mx_TagTileContextMenu_item object {

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

@ -19,12 +19,12 @@ limitations under the License.
border-radius: 4px;
.mx_TopLeftMenu_greyedText {
font-size: 12px;
font-size: $font-12px;
opacity: 0.5;
}
.mx_TopLeftMenu_upgradeLink {
font-size: 12px;
font-size: $font-12px;
img {
margin-left: 5px;

4
res/css/views/dialogs/_AddressPickerDialog.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus {
height: 26px;
font-size: 14px;
font-size: $font-14px;
font-family: $font-family;
padding-left: 12px;
padding-right: 12px;
@ -50,7 +50,7 @@ limitations under the License.
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
line-height: $font-36px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;

8
res/css/views/dialogs/_ConfirmUserActionDialog.scss
View file

@ -26,22 +26,22 @@ limitations under the License.
}
.mx_ConfirmUserActionDialog_name {
font-size: 18px;
font-size: $font-18px;
}
.mx_ConfirmUserActionDialog_userId {
font-size: 13px;
font-size: $font-13px;
}
.mx_ConfirmUserActionDialog_reasonField {
font-family: $font-family;
font-size: 14px;
font-size: $font-14px;
color: $primary-fg-color;
background-color: $primary-bg-color;
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
line-height: $font-36px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;

4
res/css/views/dialogs/_CreateGroupDialog.scss
View file

@ -25,7 +25,7 @@ limitations under the License.
}
.mx_CreateGroupDialog_input {
font-size: 15px;
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
@ -44,7 +44,7 @@ limitations under the License.
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
padding: 0px 5px;
line-height: 37px;
line-height: $font-37px;
background-color: $input-darker-bg-color;
border: 1px solid $input-border-color;
text-align: center;

2
res/css/views/dialogs/_CreateRoomDialog.scss
View file

@ -49,7 +49,7 @@ limitations under the License.
}
.mx_CreateRoomDialog_input {
font-size: 15px;
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;

4
res/css/views/dialogs/_DevtoolsDialog.scss
View file

@ -68,11 +68,11 @@ limitations under the License.
width: 240px;
color: $input-fg-color;
font-family: $font-family;
font-size: 16px;
font-size: $font-16px;
}
.mx_DevTools_textarea {
font-size: 12px;
font-size: $font-12px;
max-width: 684px;
min-height: 250px;
padding: 10px;

18
res/css/views/dialogs/_InviteDialog.scss
View file

@ -40,8 +40,8 @@ limitations under the License.
textarea,
textarea:focus {
height: 34px;
line-height: 34px;
font-size: 14px;
line-height: $font-34px;
font-size: $font-14px;
padding-left: 12px;
margin: 0 !important;
border: 0 !important;
@ -65,7 +65,7 @@ limitations under the License.
min-width: 48px;
margin-left: 10px;
height: 25px;
line-height: 25px;
line-height: $font-25px;
}
.mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
padding-bottom: 10px;
h3 {
font-size: 12px;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
@ -143,23 +143,23 @@ limitations under the License.
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: 14px;
font-size: $font-14px;
color: $primary-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_userId {
font-size: 12px;
font-size: $font-12px;
color: $muted-fg-color;
margin-left: 7px;
}
.mx_InviteDialog_roomTile_time {
text-align: right;
font-size: 12px;
font-size: $font-12px;
color: $muted-fg-color;
float: right;
line-height: 36px; // Height of the avatar to keep the time vertically aligned
line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
}
.mx_InviteDialog_roomTile_highlight {
@ -176,7 +176,7 @@ limitations under the License.
border-radius: 12px;
display: inline-block;
height: 24px;
line-height: 24px;
line-height: $font-24px;
padding-left: 8px;
padding-right: 8px;
color: #ffffff; // this is fine without a var because it's for both themes

4
res/css/views/dialogs/_MessageEditHistoryDialog.scss
View file

@ -35,7 +35,7 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: 14px;
font-size: $font-14px;
padding: 0;
color: $primary-fg-color;
@ -60,7 +60,7 @@ limitations under the License.
}
.mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px;
font-size: $font-10px;
padding: 0 8px;
}
}

2
res/css/views/dialogs/_NewSessionReviewDialog.scss
View file

@ -32,6 +32,6 @@ limitations under the License.
}
.mx_NewSessionReviewDialog_deviceID {
font-size: 12px;
font-size: $font-12px;
color: $notice-secondary-color;
}

4
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -29,6 +29,10 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
}
.mx_RoomSettingsDialog_notificationsIcon::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg');
}
.mx_RoomSettingsDialog_bridgesIcon::before {
// This icon is pants, please improve :)
mask-image: url('$(res)/img/feather-customised/bridge.svg');

2
res/css/views/dialogs/_SetEmailDialog.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
padding: 9px;
color: $input-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
font-size: $font-15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;

2
res/css/views/dialogs/_SetMxIdDialog.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
font-size: $font-15px;
width: 100%;
max-width: 280px;
}

2
res/css/views/dialogs/_SetPasswordDialog.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
font-size: $font-15px;
max-width: 280px;
margin-bottom: 10px;
}

2
res/css/views/dialogs/_TermsDialog.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
}
.mx_TermsDialog_termsTable {
font-size: 12px;
font-size: $font-12px;
width: 100%;
}

2
res/css/views/dialogs/_UnknownDeviceDialog.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
// userid
.mx_UnknownDeviceDialog p {
font-weight: bold;
font-size: 16px;
font-size: $font-16px;
}
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {

14
res/css/views/directory/_NetworkDropdown.scss
View file

@ -47,9 +47,9 @@ limitations under the License.
.mx_NetworkDropdown_server_title {
padding: 0 10px;
font-size: 15px;
font-size: $font-15px;
font-weight: 600;
line-height: 20px;
line-height: $font-20px;
margin-bottom: 4px;
// remove server button
@ -77,16 +77,16 @@ limitations under the License.
.mx_NetworkDropdown_server_subtitle {
padding: 0 10px;
font-size: 10px;
line-height: 14px;
font-size: $font-10px;
line-height: $font-14px;
margin-top: -4px;
margin-bottom: 4px;
color: $muted-fg-color;
}
.mx_NetworkDropdown_server_network {
font-size: 12px;
line-height: 16px;
font-size: $font-12px;
line-height: $font-16px;
padding: 4px 10px;
cursor: pointer;
position: relative;
@ -154,7 +154,7 @@ limitations under the License.
.mx_NetworkDropdown_handle_server {
color: $muted-fg-color;
font-size: 12px;
font-size: $font-12px;
}
}

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

@ -27,7 +27,7 @@ limitations under the License.
text-align: center;
border-radius: 4px;
display: inline-block;
font-size: 14px;
font-size: $font-14px;
}
.mx_AccessibleButton_kind_primary {
@ -36,12 +36,20 @@ limitations under the License.
font-weight: 600;
}
.mx_AccessibleButton_kind_primary_outline {
color: $button-primary-bg-color;
background-color: $button-secondary-bg-color;
border: 1px solid $button-primary-bg-color;
font-weight: 600;
}
.mx_AccessibleButton_kind_secondary {
color: $accent-color;
font-weight: 600;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
opacity: 0.4;
}
@ -60,7 +68,14 @@ limitations under the License.
background-color: $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
.mx_AccessibleButton_kind_danger_outline {
color: $button-danger-bg-color;
background-color: $button-secondary-bg-color;
border: 1px solid $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}

4
res/css/views/elements/_AddressTile.scss
View file

@ -19,9 +19,9 @@ limitations under the License.
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
line-height: 26px;
line-height: $font-26px;
color: $primary-fg-color;
font-size: 14px;
font-size: $font-14px;
font-weight: normal;
margin-right: 4px;
}

2
res/css/views/elements/_DirectorySearchBox.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
background-repeat: no-repeat;
text-indent: 18px;
font-weight: 600;
font-size: 12px;
font-size: $font-12px;
user-select: none;
cursor: pointer;
}

4
res/css/views/elements/_Dropdown.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-size: 12px;
font-size: $font-12px;
user-select: none;
}
@ -53,7 +53,7 @@ limitations under the License.
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
line-height: $font-35px;
padding-left: 8px;
padding-right: 8px;
}

14
res/css/views/elements/_EventListSummary.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 14px;
font-size: $font-14px;
display: inline-flex;
}
@ -27,7 +27,7 @@ limitations under the License.
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
line-height: $font-12px;
}
.mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
line-height: $font-30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_EventListSummary {
font-size: 13px;
font-size: $font-13px;
.mx_EventTile_line {
line-height: 20px;
line-height: $font-20px;
}
}
.mx_EventListSummary_line {
line-height: 22px;
line-height: $font-22px;
}
.mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 13px;
font-size: $font-13px;
}
}

6
res/css/views/elements/_Field.scss
View file

@ -40,7 +40,7 @@ limitations under the License.
.mx_Field textarea {
font-weight: normal;
font-family: $font-family;
font-size: 14px;
font-size: $font-14px;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
font-size: $font-14px;
position: absolute;
left: 0px;
top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
font-size: $font-10px;
top: -13px;
padding: 0 2px;
background-color: $field-focused-label-bg-color;

4
res/css/views/elements/_FormButton.scss
View file

@ -15,9 +15,9 @@ limitations under the License.
*/
.mx_FormButton {
line-height: 16px;
line-height: $font-16px;
padding: 5px 15px;
font-size: 12px;
font-size: $font-12px;
height: min-content;
&:not(:last-child) {

10
res/css/views/elements/_ImageView.scss
View file

@ -102,13 +102,13 @@ limitations under the License.
}
.mx_ImageView_name {
font-size: 18px;
font-size: $font-18px;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: 15px;
font-size: $font-15px;
opacity: 0.5;
}
@ -118,13 +118,13 @@ limitations under the License.
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: 14px;
font-size: $font-14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: 11px;
font-size: $font-11px;
}
.mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
}
.mx_ImageView_button {
font-size: 15px;
font-size: $font-15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;

2
res/css/views/elements/_InteractiveTooltip.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 10px;
font-size: $font-10px;
font-weight: 600;
padding: 6px;
z-index: 5001;

2
res/css/views/elements/_RichText.scss
View file

@ -9,7 +9,7 @@
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: 20px;
line-height: $font-20px;
padding-left: 5px;
}

6
res/css/views/elements/_Tooltip.scss
View file

@ -58,8 +58,8 @@ limitations under the License.
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
line-height: 14px;
font-size: 12px;
line-height: $font-14px;
font-size: $font-12px;
font-weight: 600;
color: $primary-fg-color;
max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
text-align: center;
border: none;
border-radius: 3px;
font-size: 14px;
font-size: $font-14px;
line-height: 1.2;
padding: 6px 8px;

2
res/css/views/elements/_TooltipButton.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
transition: opacity 0.2s ease-in;
opacity: 0.6;
line-height: 11px;
line-height: $font-11px;
text-align: center;
cursor: pointer;

8
res/css/views/emojipicker/_EmojiPicker.scss
View file

@ -163,7 +163,7 @@ limitations under the License.
.mx_EmojiPicker_item {
display: inline-block;
font-size: 20px;
font-size: $font-20px;
padding: 5px;
width: 100%;
height: 100%;
@ -183,7 +183,7 @@ limitations under the License.
}
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
font-size: 16px;
font-size: $font-16px;
font-weight: 600;
margin: 0;
}
@ -197,7 +197,7 @@ limitations under the License.
}
.mx_EmojiPicker_preview_emoji {
font-size: 32px;
font-size: $font-32px;
padding: 8px 16px;
}
@ -212,7 +212,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
font-size: 14px;
font-size: $font-14px;
&::before, &::after {
content: ":";

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

@ -19,7 +19,7 @@ limitations under the License.
margin: 4px 0;
display: flex;
align-items: center;
font-size: 14px;
font-size: $font-14px;
color: $roomtopic-color;
}

2
res/css/views/messages/_MessageActionBar.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
cursor: pointer;
display: flex;
height: 24px;
line-height: 24px;
line-height: $font-24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
top: -18px;

2
res/css/views/messages/_MessageTimestamp.scss
View file

@ -16,5 +16,5 @@ limitations under the License.
.mx_MessageTimestamp {
color: $event-timestamp-color;
font-size: 10px;
font-size: $font-10px;
}

2
res/css/views/messages/_ReactionsRow.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_ReactionsRow_showAll {
text-decoration: none;
font-size: 10px;
font-size: $font-10px;
font-weight: 600;
margin-left: 6px;
vertical-align: top;

2
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
height: 20px;
line-height: 21px;
line-height: $font-21px;
margin-right: 6px;
padding: 0 6px;
border: 1px solid $reaction-row-button-border-color;

2
res/css/views/messages/_ViewSourceEvent.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_EventTile_content.mx_ViewSourceEvent {
display: flex;
opacity: 0.6;
font-size: 12px;
font-size: $font-12px;
pre, code {
flex: 1;

4
res/css/views/messages/_common_CryptoEvent.scss
View file

@ -45,7 +45,7 @@ limitations under the License.
.mx_cryptoEvent_title {
font-weight: 600;
font-size: 15px;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
@ -56,7 +56,7 @@ limitations under the License.
}
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
font-size: 12px;
font-size: $font-12px;
}
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons {

63
res/css/views/right_panel/_UserInfo.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
font-size: 12px;
font-size: $font-12px;
.mx_UserInfo_cancel {
cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
}
h2 {
font-size: 18px;
font-size: $font-18px;
font-weight: 600;
margin: 18px 0 0 0;
}
@ -122,7 +122,7 @@ limitations under the License.
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
font-size: 12px;
font-size: $font-12px;
margin: 4px 0;
}
@ -134,24 +134,28 @@ limitations under the License.
text-align: center;
h2 {
font-size: 18px;
line-height: 25px;
display: flex;
font-size: $font-18px;
line-height: $font-25px;
flex: 1;
justify-content: center;
align-items: center;
// limit to 2 lines, show an ellipsis if it overflows
// this looks webkit specific but is supported by Firefox 68+
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
span {
// limit to 2 lines, show an ellipsis if it overflows
// this looks webkit specific but is supported by Firefox 68+
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
}
.mx_E2EIcon {
margin: 5px;
margin-top: 3px; // visual vertical centering to the top line of text
margin-right: 4px; // margin from displyname
min-width: 18px; // convince flexbox to not collapse it
}
}
@ -197,7 +201,7 @@ limitations under the License.
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
line-height: 16px;
line-height: $font-16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
@ -206,7 +210,7 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
font-size: 11px;
font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@ -266,12 +270,31 @@ limitations under the License.
}
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px;
&.mx_AccessibleButton_kind_primary {
color: $accent-color;
background-color: $accent-bg-color;
}
&.mx_AccessibleButton_kind_danger {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
}
.mx_VerificationShowSas .mx_AccessibleButton,
.mx_UserInfo_wideButton {
display: block;
margin: 16px 0;
margin: 16px 0 8px;
}
button.mx_UserInfo_wideButton {
width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
.mx_VerificationShowSas {
.mx_AccessibleButton + .mx_AccessibleButton {
margin: 8px 0; // space between buttons
}
}
}

68
res/css/views/right_panel/_VerificationPanel.scss
View file

@ -14,10 +14,30 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserInfo {
.mx_VerificationPanel_verified_section .mx_E2EIcon {
.mx_VerificationPanel_verified_section,
.mx_VerificationPanel_reciprocate_section {
// center the big shield icon
.mx_E2EIcon {
// Override general user info margin
margin: 0 auto !important;
margin: 20px auto !important;
}
}
.mx_UserInfo {
.mx_EncryptionPanel_cancel {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $settings-subsection-fg-color;
cursor: pointer;
position: absolute;
z-index: 100;
top: 14px;
right: 14px;
}
.mx_VerificationPanel_qrCode {
@ -36,6 +56,16 @@ limitations under the License.
max-width: 240px;
}
}
.mx_VerificationPanel_reciprocate_section {
.mx_FormButton {
width: 100%;
box-sizing: border-box;
padding: 10px;
display: block;
margin: 10px 0;
}
}
}
// Special case styling for EncryptionPanel in a Modal dialog
@ -45,6 +75,7 @@ limitations under the License.
margin-top: 10px;
margin-bottom: 10px;
align-items: stretch;
justify-content: center;
> .mx_VerificationPanel_QRPhase_betweenText {
width: 50px;
@ -60,10 +91,12 @@ limitations under the License.
border-radius: 10px;
flex: 1;
display: flex;
padding: 10px;
padding: 20px;
align-items: center;
flex-direction: column;
position: relative;
max-width: 310px;
justify-content: space-between;
canvas, .mx_VerificationPanel_QRPhase_noQR {
width: 220px !important;
@ -76,31 +109,36 @@ limitations under the License.
}
> p {
margin-top: 0;
font-weight: 700;
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: 14px;
margin-top: 71px;
font-size: $font-14px;
margin: 30px 0;
text-align: center;
}
.mx_AccessibleButton {
position: absolute;
bottom: 30px;
}
}
}
// EncryptionPanel when verification is done
.mx_VerificationPanel_verified_section {
// center the big shield icon
.mx_E2EIcon {
margin: 0 auto;
}
// right align the "Got it" button
.mx_AccessibleButton {
float: right;
}
}
.mx_VerificationPanel_reciprocate_section {
.mx_AccessibleButton {
margin-left: 10px;
padding: 7px 40px;
}
.mx_VerificationPanel_reciprocateButtons {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
}

10
res/css/views/rooms/_AppsDrawer.scss
View file

@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 0;
margin: 5px auto 5px auto;
color: $accent-color;
font-size: 12px;
font-size: $font-12px;
}
.mx_AddWidget_button_full_width {
@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
font-size: 15px;
font-size: $font-15px;
}
.mx_AppTile {
@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppTileMenuBar {
margin: 0;
font-size: 12px;
font-size: $font-12px;
background-color: $widget-menu-bar-bg-color;
display: flex;
flex-direction: row;
@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
font-size: $font-16px;
}
.mx_AppPermissionWarning_row {
@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
}
.mx_AppPermissionWarning_smallText {
font-size: 12px;
font-size: $font-12px;
}
.mx_AppPermissionWarning_bolder {

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

@ -63,8 +63,8 @@ limitations under the License.
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: 16px;
font-size: 10.4px;
line-height: $font-16px;
font-size: $font-10-4px;
}
}
}

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

@ -78,7 +78,7 @@ limitations under the License.
.mx_GroupRoomTile_name {
flex: 1 1 0;
overflow: hidden;
font-size: 14px;
font-size: $font-14px;
text-overflow: ellipsis;
white-space: nowrap;
}
@ -116,7 +116,7 @@ limitations under the License.
}
.mx_EntityTile_subtext {
font-size: 11px;
font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@ -125,7 +125,7 @@ limitations under the License.
.mx_EntityTile_power {
padding-inline-start: 6px;
font-size: 10px;
font-size: $font-10px;
color: $notice-secondary-color;
max-width: 6em;
overflow: hidden;

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

@ -19,7 +19,7 @@ limitations under the License.
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: 14px;
font-size: $font-14px;
position: relative;
}
@ -64,7 +64,7 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
font-size: 14px;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
@ -72,7 +72,7 @@ limitations under the License.
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
line-height: 17px;
line-height: $font-17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
@ -117,10 +117,12 @@ limitations under the License.
padding-bottom: 2px;
border-radius: 4px;
min-height: 24px;
line-height: 22px;
line-height: $font-22px;
}
.mx_RoomView_timeline_rr_enabled {
.mx_RoomView_timeline_rr_enabled,
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
.mx_EventListSummary {
.mx_EventTile_line, .mx_EventTile_reply {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
@ -312,7 +314,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_readAvatarRemainder {
color: $event-timestamp-color;
font-size: 11px;
font-size: $font-11px;
position: absolute;
}
@ -341,7 +343,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: 11px;
font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
@ -393,7 +395,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile_keyRequestInfo {
font-size: 12px;
font-size: $font-12px;
}
.mx_EventTile_keyRequestInfo_text {
@ -471,7 +473,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_content .mx_EventTile_edited {
user-select: none;
font-size: 12px;
font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
@ -489,7 +491,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
white-space: normal !important;
line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: 14px;
font-size: $font-14px;
pre, code {
font-family: $monospace-font-family !important;
@ -589,9 +591,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: 13px;
font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
line-height: 20px;
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
@ -599,7 +601,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile .mx_SenderProfile {
font-size: 13px;
font-size: $font-13px;
}
.mx_EventTile.mx_EventTile_emote {

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

@ -34,8 +34,8 @@ limitations under the License.
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-size: $font-12px;
line-height: $font-14px;
text-align: center;
// to be able to get it centered
// with text-align in parent

2
res/css/views/rooms/_MemberDeviceInfo.scss
View file

@ -59,7 +59,7 @@ limitations under the License.
.mx_MemberDeviceInfo_deviceId {
word-break: break-word;
font-size: 13px;
font-size: $font-13px;
}
.mx_MemberDeviceInfo_deviceInfo {

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

@ -48,7 +48,7 @@ limitations under the License.
}
.mx_MemberInfo h2 {
font-size: 18px;
font-size: $font-18px;
font-weight: 600;
margin: 16px 0 16px 15px;
}
@ -94,12 +94,12 @@ limitations under the License.
text-transform: uppercase;
color: $input-darker-fg-color;
font-weight: bold;
font-size: 12px;
font-size: $font-12px;
margin: 4px 0;
}
.mx_MemberInfo_profileField {
font-size: 15px;
font-size: $font-15px;
position: relative;
}
@ -109,10 +109,10 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 15px;
font-size: $font-15px;
color: $primary-fg-color;
margin-left: 8px;
line-height: 23px;
line-height: $font-23px;
}
.mx_MemberInfo_createRoom {
@ -128,7 +128,7 @@ limitations under the License.
}
.mx_MemberInfo label {
font-size: 13px;
font-size: $font-13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
@ -144,7 +144,7 @@ limitations under the License.
}
.mx_MemberInfo_statusMessage {
font-size: 11px;
font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;

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

@ -30,7 +30,7 @@ limitations under the License.
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
font-size: $font-13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;

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

@ -105,7 +105,7 @@ limitations under the License.
min-height: 60px;
justify-content: flex-start;
align-items: flex-start;
font-size: 14px;
font-size: $font-14px;
margin-right: 6px;
}
@ -161,7 +161,7 @@ limitations under the License.
box-shadow: none;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 14px;
font-size: $font-14px;
max-height: 120px;
overflow: auto;
/* needed for FF */
@ -242,7 +242,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
font-size: 10px;
font-size: $font-10px;
color: $greyed-fg-color;
}

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

@ -97,13 +97,13 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 13px;
font-size: $font-13px;
font-weight: 600;
min-width: 54px;
text-align: center;
.mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 9px;
font-size: $font-9px;
opacity: 0.7;
}
}

2
res/css/views/rooms/_PresenceLabel.scss
View file

@ -15,6 +15,6 @@ limitations under the License.
*/
.mx_PresenceLabel {
font-size: 11px;
font-size: $font-11px;
opacity: 0.5;
}

2
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -41,7 +41,7 @@ limitations under the License.
overflow-x: visible;
}
.mx_AutoHideScrollbar_offset {
.mx_AutoHideScrollbar {
display: flex;
flex-direction: row;
height: 100%;

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

@ -28,7 +28,7 @@ limitations under the License.
}
.mx_RoomDropTarget {
font-size: 13px;
font-size: $font-13px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed $accent-color;
@ -41,7 +41,7 @@ limitations under the License.
.mx_RoomDropTarget_label {
position: relative;
margin-top: 3px;
line-height: 21px;
line-height: $font-21px;
z-index: 1;
text-align: center;
}

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

@ -77,9 +77,9 @@ limitations under the License.
}
.mx_RoomHeader_simpleHeader {
line-height: 52px;
line-height: $font-52px;
color: $roomheader-color;
font-size: 18px;
font-size: $font-18px;
font-weight: 600;
overflow: hidden;
margin-left: 63px;
@ -102,7 +102,7 @@ limitations under the License.
overflow: hidden;
color: $roomheader-color;
font-weight: 600;
font-size: 18px;
font-size: $font-18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
display: flex;
@ -161,7 +161,7 @@ limitations under the License.
flex: 1;
color: $roomtopic-color;
font-weight: 400;
font-size: 13px;
font-size: $font-13px;
margin: 0 7px;
margin-top: 4px; // to align baseline of topic with room name
overflow: hidden;

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

@ -47,13 +47,13 @@ limitations under the License.
}
.mx_RoomList_emptySubListTip {
font-size: 13px;
font-size: $font-13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: 16px;
line-height: $font-16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {

6
res/css/views/rooms/_RoomPreviewBar.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
-webkit-align-items: center;
h3 {
font-size: 18px;
font-size: $font-18px;
font-weight: 600;
&.mx_RoomPreviewBar_spinnerTitle {
@ -48,8 +48,8 @@ limitations under the License.
}
.mx_RoomPreviewBar_footer {
font-size: 12px;
line-height: 20px;
font-size: $font-12px;
line-height: $font-20px;
.mx_Spinner {
vertical-align: middle;

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

@ -64,7 +64,7 @@ limitations under the License.
.mx_RoomTile_subtext {
display: inline-block;
font-size: 11px;
font-size: $font-11px;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
@ -112,7 +112,7 @@ limitations under the License.
}
.mx_RoomTile_name {
font-size: 14px;
font-size: $font-14px;
padding: 0 4px;
color: $roomtile-name-color;
white-space: nowrap;
@ -126,7 +126,7 @@ limitations under the License.
padding: 0 0.4em;
color: $roomtile-badge-fg-color;
font-weight: 600;
font-size: 12px;
font-size: $font-12px;
}
.collapsed {

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

@ -22,7 +22,7 @@ limitations under the License.
.mx_SearchBar_input {
// border: 1px solid $input-border-color;
// font-size: 15px;
// font-size: $font-15px;
flex: 1 1 0;
margin-left: 22px;
}
@ -45,7 +45,7 @@ limitations under the License.
border: 0;
margin: 0 0 0 22px;
padding: 5px;
font-size: 15px;
font-size: $font-15px;
cursor: pointer;
color: $primary-fg-color;
border-bottom: 2px solid $accent-color;

2
res/css/views/rooms/_SendMessageComposer.scss
View file

@ -18,7 +18,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
font-size: 14px;
font-size: $font-14px;
justify-content: center;
margin-right: 6px;
// don't grow wider than available space

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

@ -49,7 +49,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@ -57,7 +57,7 @@ limitations under the License.
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-size: $font-14px;
font-weight: 600;
color: $eventtile-meta-color;
}

20
res/css/views/settings/_E2eAdvancedPanel.scss Normal file
View file

@ -0,0 +1,20 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_E2eAdvancedPanel_settingLongDescription {
margin-right: 150px;
}

8
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
}
.mx_SettingsTab_heading {
font-size: 20px;
font-size: $font-20px;
font-weight: 600;
color: $primary-fg-color;
}
@ -29,7 +29,7 @@ limitations under the License.
}
.mx_SettingsTab_subheading {
font-size: 16px;
font-size: $font-16px;
display: block;
font-family: $font-family;
font-weight: 600;
@ -40,7 +40,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 14px;
font-size: $font-14px;
display: block;
margin: 10px 100px 10px 0; // Align with the rest of the view
}
@ -61,7 +61,7 @@ limitations under the License.
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
font-size: 14px;
font-size: $font-14px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;

2
res/css/views/terms/_InlineTermsAgreement.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
font-size: 14px;
font-size: $font-14px;
a {
color: $accent-color;

4
res/css/views/verification/_VerificationShowSas.scss
View file

@ -48,14 +48,14 @@ limitations under the License.
}
.mx_VerificationShowSas_emojiSas_emoji {
font-size: 32px;
font-size: $font-32px;
}
.mx_VerificationShowSas_emojiSas_label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
font-size: $font-12px;
}
.mx_VerificationShowSas_emojiSas_break {

2
res/css/views/voip/_CallView.scss
View file

@ -21,5 +21,5 @@ limitations under the License.
text-align: center;
padding: 6px;
font-weight: bold;
font-size: 13px;
font-size: $font-13px;
}

2
res/css/views/voip/_IncomingCallbox.scss
View file

@ -54,7 +54,7 @@ limitations under the License.
vertical-align: middle;
width: 80px;
height: 36px;
line-height: 36px;
line-height: $font-36px;
border-radius: 36px;
color: $accent-fg-color;
margin: auto;