Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into soru/spoilers
This commit is contained in:
Sorunome
commit
fe9ae46ffb
389 changed files with 23061 additions and 5544 deletions
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2019 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.
|
||||
|
|
@ -42,7 +43,6 @@ $AppsDrawerBodyHeight: 273px;
|
|||
.mx_AddWidget_button {
|
||||
order: 2;
|
||||
cursor: pointer;
|
||||
padding-right: 12px;
|
||||
padding: 0;
|
||||
margin: 5px auto 5px auto;
|
||||
color: $accent-color;
|
||||
|
|
@ -198,7 +198,7 @@ $AppsDrawerBodyHeight: 273px;
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mx_AppTileBody{
|
||||
.mx_AppTileBody {
|
||||
height: $AppsDrawerBodyHeight;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -234,7 +234,7 @@ $AppsDrawerBodyHeight: 273px;
|
|||
background-color: $lightbox-bg-color;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
width: 200px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
margin: 5px;
|
||||
|
|
@ -248,7 +248,7 @@ $AppsDrawerBodyHeight: 273px;
|
|||
|
||||
.mx_AppIconTile:hover {
|
||||
border: 1px solid $accent-color;
|
||||
box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
|
||||
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
|
||||
}
|
||||
|
||||
.mx_AppIconTile_content {
|
||||
|
|
@ -270,9 +270,8 @@ $AppsDrawerBodyHeight: 273px;
|
|||
|
||||
.mx_AppIconTile_image {
|
||||
padding: 10px;
|
||||
width: 75%;
|
||||
max-width:100px;
|
||||
max-height:100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -312,7 +311,7 @@ form.mx_Custom_Widget_Form div {
|
|||
}
|
||||
|
||||
.mx_AppPermissionWarningText {
|
||||
max-width: 400px;
|
||||
max-width: 90%;
|
||||
margin: 10px auto 10px auto;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
|
@ -323,7 +322,12 @@ form.mx_Custom_Widget_Form div {
|
|||
}
|
||||
|
||||
.mx_AppPermissionWarningTextURL {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
color: $accent-color;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_AppPermissionButton {
|
||||
|
|
@ -361,11 +365,11 @@ form.mx_Custom_Widget_Form div {
|
|||
}
|
||||
|
||||
@keyframes mx_AppLoading_spinner_fadeIn_animation {
|
||||
from { opacity: 0 }
|
||||
to { opacity: 1 }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
.mx_AppLoading iframe {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,18 +8,13 @@
|
|||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* a "block" completion takes up a whole line */
|
||||
.mx_Autocomplete_Completion_block {
|
||||
height: 34px;
|
||||
|
|
@ -32,7 +27,7 @@
|
|||
}
|
||||
|
||||
.mx_Autocomplete_Completion_block * {
|
||||
margin: 0 3px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_pill {
|
||||
|
|
@ -50,11 +45,27 @@
|
|||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/* styling for common completion elements */
|
||||
.mx_Autocomplete_Completion_subtitle {
|
||||
font-style: italic;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_description {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_truncate {
|
||||
.mx_Autocomplete_Completion_title,
|
||||
.mx_Autocomplete_Completion_subtitle,
|
||||
.mx_Autocomplete_Completion_description {
|
||||
/* Ellipsis for long names/subtitles/descriptions*/
|
||||
/* Ellipsis for long names/subtitles/descriptions */
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -62,13 +73,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* container for pill-style completions */
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion.selected,
|
||||
.mx_Autocomplete_Completion:hover {
|
||||
background: $selected-color;
|
||||
|
|
@ -81,14 +85,3 @@
|
|||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* styling for common completion elements */
|
||||
.mx_Autocomplete_Completion_subtitle {
|
||||
font-style: italic;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_description {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
|
|
|||
74
res/css/views/rooms/_BasicMessageComposer.scss
Normal file
74
res/css/views/rooms/_BasicMessageComposer.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2019 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_BasicMessageComposer {
|
||||
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
|
||||
content: var(--placeholder);
|
||||
opacity: 0.333;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes visualbell {
|
||||
from { background-color: $visual-bell-bg-color; }
|
||||
to { background-color: $primary-bg-color; }
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_error {
|
||||
animation: 0.2s visualbell;
|
||||
}
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
outline: none;
|
||||
overflow-x: auto;
|
||||
|
||||
span.mx_UserPill, span.mx_RoomPill {
|
||||
padding-left: 21px;
|
||||
position: relative;
|
||||
|
||||
// avatar psuedo element
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
content: var(--avatar-letter);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--avatar-background), $avatar-bg-color;
|
||||
color: $avatar-initial-color;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
font-size: 10.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BasicMessageComposer_AutoCompleteWrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
63
res/css/views/rooms/_EditMessageComposer.scss
Normal file
63
res/css/views/rooms/_EditMessageComposer.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2019 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_EditMessageComposer {
|
||||
|
||||
padding: 3px;
|
||||
// this is to try not make the text move but still have some
|
||||
// padding around and in the editor.
|
||||
// Actual values from fiddling around in inspector
|
||||
margin: -7px -10px -5px -10px;
|
||||
overflow: visible !important; // override mx_EventTile_content
|
||||
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
border-radius: 4px;
|
||||
border: solid 1px $primary-hairline-color;
|
||||
background-color: $primary-bg-color;
|
||||
max-height: 200px;
|
||||
padding: 3px 6px;
|
||||
|
||||
&:focus {
|
||||
border-color: $accent-color-50pct;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EditMessageComposer_buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $header-panel-bg-color;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
margin: 0 -110px 0 0;
|
||||
padding-right: 147px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 5px;
|
||||
padding: 5px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_last .mx_EditMessageComposer_buttons {
|
||||
position: static;
|
||||
margin-right: -147px;
|
||||
}
|
||||
|
|
@ -85,10 +85,6 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mx_EntityTile_ellipsis .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
color: $primary-fg-color;
|
||||
|
|
@ -102,23 +98,24 @@ limitations under the License.
|
|||
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
|
||||
.mx_EntityTile_unavailable .mx_EntityTile_name,
|
||||
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
|
||||
.mx_EntityTile_offline_beenactive .mx_EntityTile_name
|
||||
{
|
||||
.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
|
||||
.mx_EntityTile_offline_neveractive .mx_EntityTile_name
|
||||
{
|
||||
.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.mx_EntityTile_unknown .mx_EntityTile_avatar,
|
||||
.mx_EntityTile_unknown .mx_EntityTile_name
|
||||
{
|
||||
.mx_EntityTile_unknown .mx_EntityTile_name {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mx_EntityTile_subtext {
|
||||
font-size: 11px;
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
|
|
@ -56,13 +56,17 @@ limitations under the License.
|
|||
color: $primary-fg-color;
|
||||
font-size: 14px;
|
||||
display: inline-block; /* anti-zalgo, with overflow hidden */
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
margin: 0px;
|
||||
line-height: 17px;
|
||||
/* the next three lines, along with overflow hidden, truncate long display names */
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 65px);
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile .mx_Flair {
|
||||
|
|
@ -89,8 +93,6 @@ limitations under the License.
|
|||
display: block;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
color: $event-timestamp-color;
|
||||
font-size: 10px;
|
||||
left: 0px;
|
||||
width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
text-align: center;
|
||||
|
|
@ -120,8 +122,29 @@ limitations under the License.
|
|||
|
||||
/* HACK to override line-height which is already marked important elsewhere */
|
||||
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
|
||||
font-size: 48px ! important;
|
||||
line-height: 52px ! important;
|
||||
font-size: 48px !important;
|
||||
line-height: 57px !important;
|
||||
}
|
||||
|
||||
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
|
||||
left: 3px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_MessageActionBar,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* this is used for the tile for the event which is selected via the URL.
|
||||
|
|
@ -133,9 +156,17 @@ limitations under the License.
|
|||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_highlight,
|
||||
.mx_EventTile_highlight .markdown-body {
|
||||
color: $event-highlight-fg-color;
|
||||
|
||||
.mx_EventTile_line {
|
||||
background-color: $event-highlight-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_line,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
|
||||
{
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +185,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_encrypting {
|
||||
color: $event-encrypting-color ! important;
|
||||
color: $event-encrypting-color !important;
|
||||
}
|
||||
|
||||
.mx_EventTile_sending {
|
||||
|
|
@ -172,25 +203,30 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
|
||||
.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
|
||||
--lozenge-color: $event-redacted-fg-color;
|
||||
--lozenge-border-color: $event-redacted-border-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
width: 250px;
|
||||
border-radius: 11px;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
$event-redacted-fg-color,
|
||||
$event-redacted-fg-color 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
);
|
||||
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--lozenge-color),
|
||||
var(--lozenge-color) 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
);
|
||||
box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
|
||||
}
|
||||
|
||||
.mx_EventTile_highlight,
|
||||
.mx_EventTile_highlight .markdown-body
|
||||
{
|
||||
color: $warning-color;
|
||||
.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
|
||||
--lozenge-color: $event-notsent-color;
|
||||
--lozenge-border-color: $event-notsent-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_contextual {
|
||||
|
|
@ -215,27 +251,6 @@ limitations under the License.
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
|
||||
left: 3px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_MessageActionBar,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -243,6 +258,7 @@ limitations under the License.
|
|||
height: 14px;
|
||||
top: 29px;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_continuation .mx_EventTile_readAvatars,
|
||||
|
|
@ -299,11 +315,6 @@ limitations under the License.
|
|||
filter: none;
|
||||
}
|
||||
|
||||
/* End to end encryption stuff */
|
||||
.mx_EventTile:hover .mx_EventTile_e2eIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -370,22 +381,31 @@ limitations under the License.
|
|||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: 78px;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
border-left: $e2e-verified-color 5px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
border-left: $e2e-unverified-color 5px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: 78px;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
border-left: $e2e-verified-color 5px solid;
|
||||
}
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
border-left: $e2e-unverified-color 5px solid;
|
||||
/* End to end encryption stuff */
|
||||
.mx_EventTile:hover .mx_EventTile_e2eIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
|
|
@ -395,12 +415,6 @@ limitations under the License.
|
|||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_EventTile_verified .mx_EventTile_e2eIcon {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
|
||||
|
|
@ -414,39 +428,45 @@ limitations under the License.
|
|||
color: $roomtopic-color;
|
||||
display: inline-block;
|
||||
margin-left: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Various markdown overrides */
|
||||
|
||||
.mx_EventTile_body pre {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
font-family: inherit ! important;
|
||||
white-space: normal ! important;
|
||||
line-height: inherit ! important;
|
||||
font-family: inherit !important;
|
||||
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;
|
||||
}
|
||||
|
||||
/* have to use overlay rather than auto otherwise Linux and Windows
|
||||
Chrome gets very confused about vertical spacing:
|
||||
https://github.com/vector-im/vector-web/issues/754
|
||||
*/
|
||||
.mx_EventTile_content .markdown-body pre {
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
pre, code {
|
||||
font-family: $monospace-font-family ! important;
|
||||
font-family: $monospace-font-family !important;
|
||||
// deliberate constants as we're behind an invert filter
|
||||
color: #333;
|
||||
}
|
||||
|
||||
pre {
|
||||
// have to use overlay rather than auto otherwise Linux and Windows
|
||||
// Chrome gets very confused about vertical spacing:
|
||||
// https://github.com/vector-im/vector-web/issues/754
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_body pre {
|
||||
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
|
||||
}
|
||||
|
||||
.mx_EventTile_pre_container {
|
||||
|
|
@ -467,17 +487,7 @@ limitations under the License.
|
|||
background-image: url($copy-button-url);
|
||||
}
|
||||
|
||||
.mx_EventTile_body pre {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_body pre
|
||||
{
|
||||
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
|
||||
}
|
||||
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
|
||||
{
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -486,19 +496,17 @@ limitations under the License.
|
|||
.mx_EventTile_content .markdown-body h3,
|
||||
.mx_EventTile_content .markdown-body h4,
|
||||
.mx_EventTile_content .markdown-body h5,
|
||||
.mx_EventTile_content .markdown-body h6
|
||||
{
|
||||
font-family: inherit ! important;
|
||||
.mx_EventTile_content .markdown-body h6 {
|
||||
font-family: inherit !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Make h1 and h2 the same size as h3. */
|
||||
.mx_EventTile_content .markdown-body h1,
|
||||
.mx_EventTile_content .markdown-body h2
|
||||
{
|
||||
.mx_EventTile_content .markdown-body h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: none ! important; // override GFM
|
||||
border-bottom: none !important; // override GFM
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body a {
|
||||
|
|
@ -507,7 +515,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body .hljs {
|
||||
display: inline ! important;
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -524,6 +532,9 @@ limitations under the License.
|
|||
|
||||
/* end of overrides */
|
||||
|
||||
/* Ordering this block by specificity would require breaking it up into several
|
||||
chunks, which seems like it would be more confusing to read. */
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventTile {
|
||||
padding-top: 4px;
|
||||
|
|
@ -596,8 +607,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
p, ul, ol, dl, blockquote, pre, table {
|
||||
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
p, ul, ol, dl, blockquote, pre, table {
|
||||
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_scrollDown:before {
|
||||
.mx_JumpToBottomButton_scrollDown::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceId {
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo_name h2 {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo h2 {
|
||||
|
|
@ -80,9 +82,6 @@ limitations under the License.
|
|||
display: block;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar .mx_BaseAvatar {
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
|
@ -124,7 +123,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberInfo_createRoom_label {
|
||||
width: initial ! important;
|
||||
width: initial !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_invite.mx_AccessibleButton_disabled {
|
||||
background-color: $greyed-fg-color;;
|
||||
background-color: $greyed-fg-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -97,5 +97,4 @@ limitations under the License.
|
|||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 25px;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,16 +122,15 @@ limitations under the License.
|
|||
// FIXME: rather unpleasant hack to get rid of <p/> margins.
|
||||
// really we should be mixing in markdown-body from gfm.css instead
|
||||
.mx_MessageComposer_editor > :first-child {
|
||||
margin-top: 0 ! important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.mx_MessageComposer_editor > :last-child {
|
||||
margin-bottom: 0 ! important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@keyframes visualbell
|
||||
{
|
||||
from { background-color: #faa }
|
||||
to { background-color: $primary-bg-color }
|
||||
@keyframes visualbell {
|
||||
from { background-color: $visual-bell-bg-color; }
|
||||
to { background-color: $primary-bg-color; }
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_error {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,12 @@ limitations under the License.
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_actions {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -52,12 +58,6 @@ limitations under the License.
|
|||
display: block;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_actions {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
|
@ -74,4 +74,4 @@ limitations under the License.
|
|||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,4 +17,4 @@ limitations under the License.
|
|||
.mx_PresenceLabel {
|
||||
font-size: 11px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
|
|
|
|||
|
|
@ -78,6 +78,14 @@ limitations under the License.
|
|||
display: none;
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator {
|
||||
background: linear-gradient(to left, $panel-gradient);
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
background: linear-gradient(to right, $panel-gradient);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
|
||||
&.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
position: absolute;
|
||||
|
|
@ -88,13 +96,4 @@ limitations under the License.
|
|||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_leftOverflowIndicator {
|
||||
background: linear-gradient(to left, $panel-gradient);
|
||||
}
|
||||
|
||||
.mx_IndicatorScrollbar_rightOverflowIndicator {
|
||||
background: linear-gradient(to right, $panel-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ limitations under the License.
|
|||
.mx_RoomHeader_wrapper {
|
||||
margin: auto;
|
||||
height: 52px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
|
@ -107,7 +106,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_settingsHint {
|
||||
color: $settings-grey-fg-color ! important;
|
||||
color: $settings-grey-fg-color !important;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchStatus {
|
||||
|
|
@ -134,17 +133,17 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_placeholder {
|
||||
color: $settings-grey-fg-color ! important;
|
||||
color: $settings-grey-fg-color !important;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_editable {
|
||||
border-bottom: 1px solid $strong-input-border-color ! important;
|
||||
border-bottom: 1px solid $strong-input-border-color !important;
|
||||
min-width: 150px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_editable:focus {
|
||||
border-bottom: 1px solid $accent-color ! important;
|
||||
border-bottom: 1px solid $accent-color !important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
/* hide resize handles next to collapsed / empty sublists */
|
||||
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
|
||||
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,16 @@ limitations under the License.
|
|||
margin: 10px 10px 10px 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_footer {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
||||
.mx_Spinner {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_dark {
|
||||
|
|
@ -70,7 +80,7 @@ limitations under the License.
|
|||
flex-direction: row;
|
||||
padding: 3px 8px;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +91,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,7 +109,7 @@ limitations under the License.
|
|||
.mx_RoomPreviewBar_message {
|
||||
flex-direction: column;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
margin: 5px 0 20px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +120,7 @@ limitations under the License.
|
|||
padding: 7px 50px;//extra wide
|
||||
}
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,11 @@ limitations under the License.
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RoomTile:focus {
|
||||
filter: none !important;
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_menuButton {
|
||||
display: none;
|
||||
flex: 0 0 16px;
|
||||
|
|
@ -34,13 +39,6 @@ limitations under the License.
|
|||
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 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -48,7 +46,6 @@ limitations under the License.
|
|||
left: -12px;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomTile_nameContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -109,9 +106,18 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
flex: 0 1 content;
|
||||
border-radius: 0.8em;
|
||||
padding: 0 0.4em;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
.mx_RoomTile {
|
||||
margin: 0 2px;
|
||||
margin: 0 6px;
|
||||
padding: 0 2px;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
|
@ -135,13 +141,12 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
flex: 0 1 content;
|
||||
border-radius: 0.8em;
|
||||
padding: 0 0.4em;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
// toggle menuButton and badge on hover/menu displayed
|
||||
.mx_RoomTile_menuDisplayed,
|
||||
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
|
||||
.mx_RoomTile_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
|
||||
|
|
@ -150,8 +155,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_badge,
|
||||
.mx_RoomTile_badge.mx_RoomTile_badgeRed
|
||||
{
|
||||
.mx_RoomTile_badge.mx_RoomTile_badgeRed {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
|
|
@ -176,11 +180,6 @@ limitations under the License.
|
|||
transform: scale(1.05, 1.05);
|
||||
}
|
||||
|
||||
.mx_RoomTile:focus {
|
||||
filter: none !important;
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_arrow {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
|
|||
|
|
@ -15,17 +15,22 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomUpgradeWarningBar {
|
||||
max-height: 235px;
|
||||
background-color: $preview-bar-bg-color;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_wrapped {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
height: 235px;
|
||||
background-color: $event-selected-color;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
background-color: $preview-bar-bg-color;
|
||||
-webkit-align-items: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_header {
|
||||
|
|
|
|||
53
res/css/views/rooms/_SendMessageComposer.scss
Normal file
53
res/css/views/rooms/_SendMessageComposer.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
Copyright 2019 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_SendMessageComposer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
margin-right: 6px;
|
||||
// don't grow wider than available space
|
||||
min-width: 0;
|
||||
|
||||
.mx_BasicMessageComposer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// min-height at this level so the mx_BasicMessageComposer_input
|
||||
// still stays vertically centered when less than 50px
|
||||
min-height: 50px;
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
padding: 3px 0;
|
||||
// this will center the contenteditable
|
||||
// in it's parent vertically
|
||||
// while keeping the autocomplete at the top
|
||||
// of the composer. The parent needs to be a flex container for this to work.
|
||||
margin: auto 0;
|
||||
// max-height at this level so autocomplete doesn't get scrolled too
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SendMessageComposer_overlayWrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
width: 38px;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar:after {
|
||||
.mx_TopUnreadMessagesBar::after {
|
||||
content: "·";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp:before {
|
||||
.mx_TopUnreadMessagesBar_scrollUp::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 38px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue