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

Merge branch 'develop' into 19245-improve-styling-of-search-initialization-errors

Browse source
This commit is contained in:
Travis Ralston 2022-05-09 19:32:43 -06:00
commit 401e124df6
90 changed files with 562 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

13
res/css/_common.scss
View file

@ -385,15 +385,22 @@ legend {
color: $alert;
}
.mx_Dialog_cancelButton {
@define-mixin customisedCancelButton {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: unset;
width: unset;
height: unset;
}
.mx_Dialog_cancelButton {
@mixin customisedCancelButton;
width: 14px;
height: 14px;
position: absolute;
top: 10px;
right: 0;

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

@ -34,14 +34,9 @@ limitations under the License.
}
.mx_CompleteSecurity_skip {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
@mixin customisedCancelButton;
width: 18px;
height: 18px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
right: 24px;
}

2
res/css/views/beta/_BetaCard.scss
View file

@ -119,7 +119,7 @@ limitations under the License.
font-size: 12px;
font-weight: $font-semi-bold;
line-height: 15px;
color: #FFFFFF;
color: $button-primary-fg-color;
display: inline-block;
vertical-align: text-bottom;
word-break: keep-all; // avoid multiple lines on CJK language

7
res/css/views/dialogs/_CompoundDialog.scss
View file

@ -38,14 +38,9 @@ limitations under the License.
}
.mx_CompoundDialog_cancelButton {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
@mixin customisedCancelButton;
width: 20px;
height: 20px;
background-color: $dialog-close-fg-color;
cursor: pointer;
// Align with middle of title, 34px from right edge
position: absolute;

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

@ -25,14 +25,12 @@ limitations under the License.
}
.mx_EditableItem_delete {
@mixin customisedCancelButton;
order: 3;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
width: 14px;
height: 14px;
mask-image: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
background-color: $alert;
mask-size: 100%;
}

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

@ -27,6 +27,7 @@ limitations under the License.
flex: 1 1 0;
height: 0;
border: none;
border-bottom: 1px solid $menu-selected-color;
}
.mx_DateSeparator > div {

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

@ -38,3 +38,7 @@ limitations under the License.
max-width: 100%;
width: 450px;
}
.mx_DisambiguatedProfile ~ .mx_MLocationBody {
margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442
}

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

@ -25,14 +25,10 @@ limitations under the License.
.mx_UserInfo {
.mx_EncryptionPanel_cancel {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
@mixin customisedCancelButton;
width: 14px;
height: 14px;
background-color: $settings-subsection-fg-color;
cursor: pointer;
position: absolute;
z-index: 100;
top: 14px;

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

@ -50,6 +50,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
&[data-layout=group] {
.mx_EventTile_line {
line-height: var(--GroupLayout-EventTile-line-height);
}
}
}
.mx_EventTile:not([data-layout=bubble]) {
@ -263,8 +269,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line {
padding-left: $left-gutter;
line-height: normal;
.mx_RedactedBody {
line-height: 1; // remove spacing between lines
}
}
}
.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
@ -842,12 +855,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-right: 0;
}
.mx_ReplyChain {
.mx_MLocationBody {
margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442
}
}
&:not([data-layout=bubble]) {
padding-top: $spacing-16;
}

27
res/css/views/rooms/_GroupLayout.scss
View file

@ -18,6 +18,8 @@ limitations under the License.
$left-gutter: 64px;
.mx_GroupLayout {
--GroupLayout-EventTile-line-height: $font-22px;
.mx_EventTile {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
@ -33,10 +35,14 @@ $left-gutter: 64px;
position: absolute; // for modern layout
}
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
}
.mx_EventTile_reply {
line-height: var(--GroupLayout-EventTile-line-height);
}
}
}
@ -47,7 +53,8 @@ $left-gutter: 64px;
.mx_EventTile {
padding-top: 4px;
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
@ -56,9 +63,12 @@ $left-gutter: 64px;
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
}
@ -71,10 +81,13 @@ $left-gutter: 64px;
&.mx_EventTile_emote {
// add a bit more space for emotes so that avatars don't collide
padding-top: 8px;
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
@ -82,7 +95,9 @@ $left-gutter: 64px;
&.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}

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

@ -178,12 +178,6 @@ limitations under the License.
}
}
.mx_ContextualMenu {
.mx_MessageComposer_button {
padding-left: calc(var(--size) + 6px);
}
}
.mx_MessageComposer_button {
--size: 26px;
position: relative;
@ -192,20 +186,16 @@ limitations under the License.
line-height: var(--size);
width: auto;
padding-left: var(--size);
border-radius: 50%;
margin-right: 6px;
&:not(.mx_CallContextMenu_item) {
border-radius: 50%;
margin-right: 6px;
&:last-child {
margin-right: auto;
}
&:last-child {
margin-right: auto;
}
&::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
height: 20px;
@ -399,18 +389,3 @@ limitations under the License.
left: 0;
}
}
.mx_MessageComposer_Menu .mx_CallContextMenu_item {
display: flex;
align-items: center;
max-width: unset;
margin: 7px 7px 7px 16px; // space out the buttons
}
.mx_MessageComposer_Menu .mx_ContextualMenu {
min-width: 150px;
width: max-content;
padding: 5px 10px 5px 0;
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}

13
res/css/views/rooms/_ReplyPreview.scss
View file

@ -16,12 +16,10 @@ limitations under the License.
.mx_ReplyPreview {
border: 1px solid $primary-hairline-color;
background: $background;
border-bottom: none;
border-radius: 8px 8px 0 0;
background: $background;
max-height: 50vh;
overflow: auto;
box-shadow: 0px -16px 32px $composer-shadow-color;
.mx_ReplyPreview_section {
border-bottom: 1px solid $primary-hairline-color;
@ -53,3 +51,12 @@ limitations under the License.
}
}
}
.mx_RoomView_body {
.mx_ReplyPreview {
// Add box-shadow to the reply preview on the main (left) panel only.
// It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
box-shadow: 0px -16px 32px $composer-shadow-color;
border-radius: 8px 8px 0 0;
}
}

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

@ -38,6 +38,10 @@ limitations under the License.
margin-right: 10px;
}
.mx_RoomTile_details {
min-width: 0;
}
.mx_RoomTile_titleContainer {
height: 32px;
min-width: 0;

7
res/css/views/voip/_DialPadContextMenu.scss
View file

@ -35,15 +35,10 @@ limitations under the License.
}
.mx_DialPadContextMenu_cancel {
@mixin customisedCancelButton;
float: right;
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
}
.mx_DialPadContextMenu_header:focus-within {

7
res/css/views/voip/_DialPadModal.scss
View file

@ -45,15 +45,10 @@ limitations under the License.
}
.mx_DialPadModal_cancel {
@mixin customisedCancelButton;
float: right;
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
margin-right: 16px;
}

55
res/themes/legacy-light/css/_fonts.scss
View file

@ -12,6 +12,11 @@
* and it's better to rely on the browser's built-in obliquing behaviour.
*/
// Grab the other fonts from the current theme, so we can override to Inter
// in custom fonts if needed.
@import "../../light/css/_fonts.scss";
// Nunito as the default, for old time's sake on legacy themes.
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
@ -32,53 +37,3 @@
font-weight: 700;
src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
}
/* latin-ext */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji
* taken from https://github.com/mozilla/twemoji-colr
* using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to
* work on macOS
*/
/*
// except we now load it dynamically via FontManager to handle browsers
// which can't render COLR/CPAL still
@font-face {
font-family: "Twemoji Mozilla";
src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2');
}
*/