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

Merge remote-tracking branch 'upstream/develop' into feature/copy-version/17603

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-20 13:19:31 +02:00
commit c16827272d
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
883 changed files with 21771 additions and 16535 deletions
Download patch file Download diff file Expand all files Collapse all files

18
res/css/_components.scss
View file

@ -37,6 +37,11 @@
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
@import "./views/audio_messages/_AudioPlayer.scss";
@import "./views/audio_messages/_PlayPauseButton.scss";
@import "./views/audio_messages/_PlaybackContainer.scss";
@import "./views/audio_messages/_SeekBar.scss";
@import "./views/audio_messages/_Waveform.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
@import "./views/auth/_AuthFooter.scss";
@ -52,7 +57,6 @@
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/avatars/_WidgetAvatar.scss";
@import "./views/beta/_BetaCard.scss";
@import "./views/context_menus/_CallContextMenu.scss";
@ -116,6 +120,7 @@
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_DialPadBackspaceButton.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@ -123,7 +128,6 @@
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InfoTooltip.scss";
@import "./views/elements/_InlineSpinner.scss";
@ -145,6 +149,7 @@
@import "./views/elements/_StyledCheckbox.scss";
@import "./views/elements/_StyledRadioButton.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TagComposer.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_Tooltip.scss";
@ -160,12 +165,14 @@
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@import "./views/messages/_MImageReplyBody.scss";
@import "./views/messages/_MJitsiWidgetEvent.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MVideoBody.scss";
@import "./views/messages/_MVoiceMessageBody.scss";
@import "./views/messages/_MediaBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_MjolnirBody.scss";
@ -194,9 +201,11 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_EventBubbleTile.scss";
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewGroup.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
@ -207,6 +216,7 @@
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_ReplyTile.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@ -254,10 +264,8 @@
@import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voice_messages/_PlayPauseButton.scss";
@import "./views/voice_messages/_PlaybackContainer.scss";
@import "./views/voice_messages/_Waveform.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallPreview.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_CallViewForRoom.scss";
@import "./views/voip/_DialPad.scss";

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

@ -323,7 +323,7 @@ limitations under the License.
}
.mx_GroupView_featuredThing .mx_BaseAvatar {
/* To prevent misalignment with mx_TintableSvg (in addButton) */
/* To prevent misalignment with img (in addButton) */
vertical-align: initial;
}

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

@ -111,6 +111,29 @@ $roomListCollapsedWidth: 68px;
}
}
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $roomlist-button-bg-color;
position: relative;
margin-left: 8px;
&::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
}
}
.mx_LeftPanel_exploreButton {
width: 32px;
height: 32px;
@ -185,6 +208,12 @@ $roomListCollapsedWidth: 68px;
flex-direction: column;
justify-content: center;
.mx_LeftPanel_dialPadButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
.mx_LeftPanel_exploreButton {
margin-left: 0;
margin-top: 8px;

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

@ -121,23 +121,51 @@ $pulse-color: $pinned-unread-color;
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_RightPanel_indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: rgba($pulse-color, 1);
}
}
}
@keyframes mx_RightPanel_indicator_pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}
@keyframes mx_RightPanel_indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}

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

@ -112,7 +112,7 @@ limitations under the License.
.mx_AccessibleButton {
padding: 5px 10px;
padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
display: inline-block;
position: relative;
@ -128,13 +128,14 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 18px;
height: 18px;
top: 50%; // text sizes are dynamic
transform: translateY(-50%);
}
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
width: 12px;
height: 16px;
top: calc(50% - 8px); // text sizes are dynamic
}
&.mx_RoomStatusBar_unsentResendAllBtn {
@ -142,9 +143,6 @@ limitations under the License.
&::before {
mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
top: calc(50% - 9px); // text sizes are dynamic
}
}
}

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

@ -57,14 +57,15 @@ limitations under the License.
@keyframes mx_RoomView_fileDropTarget_image_animation {
from {
width: 0px;
transform: scaleX(0);
}
to {
width: 32px;
transform: scaleX(1);
}
}
.mx_RoomView_fileDropTarget_image {
width: 32px;
animation: mx_RoomView_fileDropTarget_image_animation;
animation-duration: 0.5s;
margin-bottom: 16px;

7
res/css/structures/_SpacePanel.scss
View file

@ -31,7 +31,6 @@ $activeBorderColor: $secondary-fg-color;
// Create another flexbox so the Panel fills the container
display: flex;
flex-direction: column;
overflow-y: auto;
.mx_SpacePanel_spaceTreeWrapper {
flex: 1;
@ -69,6 +68,12 @@ $activeBorderColor: $secondary-fg-color;
cursor: pointer;
}
.mx_SpaceItem_dragging {
.mx_SpaceButton_toggleCollapse {
visibility: hidden;
}
}
.mx_SpaceTreeLevel {
display: flex;
flex-direction: column;

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

@ -1,6 +1,7 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector Ltd
Copyright 2021 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.
@ -20,7 +21,6 @@ limitations under the License.
padding: 0 0 0 16px;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
@ -28,11 +28,93 @@ limitations under the License.
margin-top: 8px;
}
.mx_TabbedView_tabsOnLeft {
flex-direction: column;
position: absolute;
.mx_TabbedView_tabLabels {
width: 170px;
max-width: 170px;
position: fixed;
}
.mx_TabbedView_tabPanel {
margin-left: 240px; // 170px sidebar + 70px padding
flex-direction: column;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_maskedIcon {
width: 16px;
height: 16px;
margin-left: 8px;
margin-right: 16px;
}
.mx_TabbedView_maskedIcon::before {
mask-size: 16px;
width: 16px;
height: 16px;
}
}
.mx_TabbedView_tabsOnTop {
flex-direction: column;
.mx_TabbedView_tabLabels {
display: flex;
margin-bottom: 8px;
}
.mx_TabbedView_tabLabel {
padding-left: 0px;
padding-right: 52px;
.mx_TabbedView_tabLabel_text {
font-size: 15px;
color: $tertiary-fg-color;
}
}
.mx_TabbedView_tabPanel {
flex-direction: row;
}
.mx_TabbedView_tabLabel_active {
color: $accent-color;
.mx_TabbedView_tabLabel_text {
color: $accent-color;
}
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
background-color: $accent-color;
}
.mx_TabbedView_maskedIcon {
width: 22px;
height: 22px;
margin-left: 0px;
margin-right: 8px;
}
.mx_TabbedView_maskedIcon::before {
mask-size: 22px;
width: inherit;
height: inherit;
}
}
.mx_TabbedView_tabLabels {
width: 170px;
max-width: 170px;
color: $tab-label-fg-color;
position: fixed;
}
.mx_TabbedView_tabLabel {
@ -46,43 +128,25 @@ limitations under the License.
position: relative;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_TabbedView_maskedIcon {
margin-left: 8px;
margin-right: 16px;
width: 16px;
height: 16px;
display: inline-block;
}
.mx_TabbedView_maskedIcon::before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
mask-position: center;
content: '';
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
margin-left: 240px; // 170px sidebar + 70px padding
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0; // firefox
}

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

@ -71,7 +71,7 @@ limitations under the License.
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-size: 90%;
mask-size: 80%;
}
&::after {
@ -135,10 +135,14 @@ limitations under the License.
float: right;
display: flex;
.mx_FormButton {
.mx_AccessibleButton {
min-width: 96px;
box-sizing: border-box;
}
.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: 5px;
}
}
.mx_Toast_description {

68
res/css/views/audio_messages/_AudioPlayer.scss Normal file
View file

@ -0,0 +1,68 @@
/*
Copyright 2021 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_AudioPlayer_container {
padding: 16px 12px 12px 12px;
max-width: 267px; // use max to make the control fit in the files/pinned panels
.mx_AudioPlayer_primaryContainer {
display: flex;
.mx_PlayPauseButton {
margin-right: 8px;
}
.mx_AudioPlayer_mediaInfo {
flex: 1;
overflow: hidden; // makes the ellipsis on the file name work
& > * {
display: block;
}
.mx_AudioPlayer_mediaName {
color: $primary-fg-color;
font-size: $font-15px;
line-height: $font-15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 4px; // mimics the line-height differences in the Figma
}
.mx_AudioPlayer_byline {
font-size: $font-12px;
line-height: $font-12px;
}
}
}
.mx_AudioPlayer_seek {
display: flex;
align-items: center;
.mx_SeekBar {
flex: 1;
}
.mx_Clock {
width: $font-42px; // we're not using a monospace font, so fake it
min-width: $font-42px; // for flexbox
padding-left: 4px; // isolate from seek bar
text-align: right;
}
}
}

2
res/css/views/voice_messages/_PlayPauseButton.scss → res/css/views/audio_messages/_PlayPauseButton.scss
View file

@ -18,6 +18,8 @@ limitations under the License.
position: relative;
width: 32px;
height: 32px;
min-width: 32px; // for when the button is used in a flexbox
min-height: 32px; // for when the button is used in a flexbox
border-radius: 32px;
background-color: $voice-playback-button-bg-color;

15
res/css/views/voice_messages/_PlaybackContainer.scss → res/css/views/audio_messages/_PlaybackContainer.scss
View file

@ -22,25 +22,24 @@ limitations under the License.
// 7px top and bottom for visual design. 12px left & right, but the waveform (right)
// has a 1px padding on it that we want to account for.
padding: 7px 12px 7px 11px;
background-color: $voice-record-waveform-bg-color;
border-radius: 12px;
// Cheat at alignment a bit
display: flex;
align-items: center;
color: $voice-record-waveform-fg-color;
font-size: $font-14px;
line-height: $font-24px;
contain: content;
.mx_Waveform {
.mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress
transition: background-color 250ms ease;
background-color: $voice-record-waveform-fg-color;
background-color: $message-body-panel-fg-color;
}
}
}
@ -50,4 +49,8 @@ limitations under the License.
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
padding-left: 8px; // isolate from recording circle / play control
}
&.mx_VoiceMessagePrimaryContainer_noWaveform {
max-width: 162px; // with all the padding this results in 185px wide
}
}

103
res/css/views/audio_messages/_SeekBar.scss Normal file
View file

@ -0,0 +1,103 @@
/*
Copyright 2021 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.
*/
// CSS inspiration from:
// * https://www.w3schools.com/howto/howto_js_rangeslider.asp
// * https://stackoverflow.com/a/28283806
// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
.mx_SeekBar {
// Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't
// need to support IE.
appearance: none; // default style override
width: 100%;
height: 1px;
background: $quaternary-fg-color;
outline: none; // remove blue selection border
position: relative; // for before+after pseudo elements later on
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none; // default style override
// Dev note: This needs to be duplicated with the -moz-range-thumb selector
// because otherwise Edge (webkit) will fail to see the styles and just refuse
// to apply them.
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-fg-color;
cursor: pointer;
}
&::-moz-range-thumb {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-fg-color;
cursor: pointer;
// Firefox adds a border on the thumb
border: none;
}
// This is for webkit support, but we can't limit the functionality of it to just webkit
// browsers. Firefox responds to webkit-prefixed values now, which means we can't use media
// or support queries to selectively apply the rule. An upside is that this CSS doesn't work
// in firefox, so it's just wasted CPU/GPU time.
&::before { // ::before to ensure it ends up under the thumb
content: '';
background-color: $tertiary-fg-color;
// Absolute positioning to ensure it overlaps with the existing bar
position: absolute;
top: 0;
left: 0;
// Sizing to match the bar
width: 100%;
height: 1px;
// And finally dynamic width without overly hurting the rendering engine.
transform-origin: 0 100%;
transform: scaleX(var(--fillTo));
}
// This is firefox's built-in support for the above, with 100% less hacks.
&::-moz-range-progress {
background-color: $tertiary-fg-color;
height: 1px;
}
&:disabled {
opacity: 0.5;
}
// Increase clickable area for the slider (approximately same size as browser default)
// We do it this way to keep the same padding and margins of the element, avoiding margin math.
// Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
&::after {
content: '';
position: absolute;
top: -6px;
bottom: -6px;
left: 0;
right: 0;
}
}

0
res/css/views/voice_messages/_Waveform.scss → res/css/views/audio_messages/_Waveform.scss
View file

1
res/css/views/avatars/_BaseAvatar.scss
View file

@ -27,6 +27,7 @@ limitations under the License.
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
user-select: none;
line-height: 1;
}
.mx_BaseAvatar_initial {

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

@ -19,49 +19,68 @@ limitations under the License.
padding: 24px;
background-color: $settings-profile-placeholder-bg-color;
border-radius: 8px;
display: flex;
box-sizing: border-box;
> div {
.mx_BetaCard_title {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
margin: 4px 0 14px;
.mx_BetaCard_columns {
display: flex;
.mx_BetaCard_betaPill {
margin-left: 12px;
> div {
.mx_BetaCard_title {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
margin: 4px 0 14px;
.mx_BetaCard_betaPill {
margin-left: 12px;
}
}
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
color: $secondary-fg-color;
margin-bottom: 20px;
}
.mx_BetaCard_buttons .mx_AccessibleButton {
display: block;
margin: 12px 0;
padding: 7px 40px;
width: auto;
}
.mx_BetaCard_disclaimer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
margin-top: 20px;
}
}
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
color: $secondary-fg-color;
margin-bottom: 20px;
}
.mx_AccessibleButton {
display: block;
margin: 12px 0;
padding: 7px 40px;
width: auto;
}
.mx_BetaCard_disclaimer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
margin-top: 20px;
> img {
margin: auto 0 auto 20px;
width: 300px;
object-fit: contain;
height: 100%;
}
}
> img {
margin: auto 0 auto 20px;
width: 300px;
object-fit: contain;
height: 100%;
.mx_BetaCard_relatedSettings {
.mx_SettingsFlag {
margin: 16px 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
}
}
}
}
@ -91,24 +110,52 @@ $dot-size: 12px;
width: $dot-size;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_Beta_bluePulse 2s infinite;
animation-iteration-count: 20;
position: relative;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Beta_bluePulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: rgba($pulse-color, 1);
}
}
@keyframes mx_Beta_bluePulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}
@keyframes mx_Beta_bluePulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}

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

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,16 +16,69 @@ limitations under the License.
*/
.mx_MessageContextMenu {
padding: 6px;
}
.mx_MessageContextMenu_field {
display: block;
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
font-weight: bold;
&::before {
content: '';
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_MessageContextMenu_iconCollapse::before {
mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
}
.mx_MessageContextMenu_iconReport::before {
mask-image: url('$(res)/img/element-icons/warning-badge.svg');
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url('$(res)/img/element-icons/link.svg');
}
.mx_MessageContextMenu_iconPermalink::before {
mask-image: url('$(res)/img/element-icons/room/share.svg');
}
.mx_MessageContextMenu_iconUnhidePreview::before {
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
}
.mx_MessageContextMenu_iconRedact::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}
.mx_MessageContextMenu_iconResend::before {
mask-image: url('$(res)/img/element-icons/retry.svg');
}
.mx_MessageContextMenu_iconSource::before {
mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
}
.mx_MessageContextMenu_iconQuote::before {
mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
}
.mx_MessageContextMenu_iconPin::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
.mx_MessageContextMenu_iconUnpin::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
}

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

@ -38,6 +38,15 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/view-community.svg');
}
.mx_TagTileContextMenu_moveUp::before {
transform: rotate(180deg);
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_TagTileContextMenu_moveDown::before {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_TagTileContextMenu_hideCommunity::before {
mask-image: url('$(res)/img/element-icons/hide.svg');
}

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

@ -34,7 +34,7 @@ limitations under the License.
> .mx_ForwardDialog_preview {
max-height: 30%;
flex-shrink: 0;
overflow: scroll;
overflow-y: auto;
div {
pointer-events: none;

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

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InviteDialog_transferWrapper .mx_Dialog {
padding-bottom: 16px;
}
.mx_InviteDialog_addressBar {
display: flex;
flex-direction: row;
@ -286,15 +290,41 @@ limitations under the License.
}
}
.mx_InviteDialog {
.mx_InviteDialog_other {
// Prevent the dialog from jumping around randomly when elements change.
height: 600px;
padding-left: 20px; // the design wants some padding on the left
display: flex;
.mx_InviteDialog_userSections {
height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
}
}
.mx_InviteDialog_content {
height: calc(100% - 36px); // full height minus the size of the header
overflow: hidden;
}
.mx_InviteDialog_transfer {
width: 496px;
height: 466px;
flex-direction: column;
.mx_InviteDialog_content {
overflow: hidden;
flex-direction: column;
.mx_TabbedView {
height: calc(100% - 60px);
}
overflow: visible;
}
.mx_InviteDialog_addressBar {
margin-top: 8px;
}
input[type="checkbox"] {
margin-right: 8px;
}
}
@ -302,7 +332,6 @@ limitations under the License.
margin-top: 4px;
overflow-y: auto;
padding: 0 45px 4px 0;
height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
}
.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
@ -316,3 +345,110 @@ limitations under the License.
.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
padding: 0;
}
.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
margin-top: 0;
border-color: $quaternary-fg-color;
input {
font-size: 18px;
font-weight: 600;
padding-top: 0;
}
}
.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
border-color: $accent-color;
}
.mx_InviteDialog_dialPadField .mx_Field_postfix {
/* Remove border separator between postfix and field content */
border-left: none;
}
.mx_InviteDialog_dialPad {
width: 224px;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
}
.mx_InviteDialog_dialPad .mx_DialPad {
row-gap: 16px;
column-gap: 48px;
margin-left: auto;
margin-right: auto;
}
.mx_InviteDialog_transferConsultConnect {
padding-top: 16px;
/* This wants a drop shadow the full width of the dialog, so relative-position it
* and make it wider, then compensate with padding
*/
position: relative;
width: 496px;
left: -24px;
padding-left: 24px;
padding-right: 24px;
border-top: 1px solid $message-body-panel-bg-color;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_InviteDialog_transferConsultConnect_pushRight {
margin-left: auto;
}
.mx_InviteDialog_userDirectoryIcon::before {
mask-image: url('$(res)/img/voip/tab-userdirectory.svg');
}
.mx_InviteDialog_dialPadIcon::before {
mask-image: url('$(res)/img/voip/tab-dialpad.svg');
}
.mx_InviteDialog_multiInviterError {
> h4 {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
font-weight: normal;
}
> div {
.mx_InviteDialog_multiInviterError_entry {
margin-bottom: 24px;
.mx_InviteDialog_multiInviterError_entry_userProfile {
.mx_InviteDialog_multiInviterError_entry_name {
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
}
.mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
}
}
.mx_InviteDialog_multiInviterError_entry_error {
margin-left: 32px;
font-size: $font-15px;
line-height: $font-24px;
color: $notice-primary-color;
}
}
}
}

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

@ -15,7 +15,7 @@ limitations under the License.
*/
// Not actually a component but things shared by settings components
.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog {
width: 90vw;
max-width: 1000px;
// set the height too since tabbed view scrolls itself.

51
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_SpaceSettingsDialog {
width: 480px;
color: $primary-fg-color;
.mx_SpaceSettings_errorText {
@ -32,8 +31,44 @@ limitations under the License.
margin-left: 16px;
}
.mx_AccessibleButton_kind_danger {
margin-top: 28px;
.mx_SettingsTab_section {
.mx_SettingsTab_section_caption {
margin-top: 12px;
margin-bottom: 20px;
}
& + .mx_SettingsTab_subheading {
border-top: 1px solid $message-body-panel-bg-color;
margin-top: 0;
padding-top: 24px;
}
.mx_RadioButton {
margin-top: 8px;
margin-bottom: 4px;
.mx_RadioButton_content {
font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-fg-color;
}
& + span {
font-size: $font-15px;
line-height: $font-18px;
color: $secondary-fg-color;
margin-left: 26px;
}
}
.mx_SettingsTab_showAdvanced {
margin: 16px 0;
padding: 0;
}
.mx_SettingsFlag {
margin-top: 24px;
}
}
.mx_SpaceSettingsDialog_buttons {
@ -52,4 +87,14 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
padding: 8px 22px;
}
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_SpaceSettingsDialog_visibilityIcon::before {
mask-image: url('$(res)/img/element-icons/eye.svg');
}
}
}

1
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -28,6 +28,7 @@ limitations under the License.
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {

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

@ -72,7 +72,7 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_outline {
color: $button-danger-bg-color;
background-color: $button-secondary-bg-color;
background-color: transparent;
border: 1px solid $button-danger-bg-color;
}

40
res/css/views/elements/_DialPadBackspaceButton.scss Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2021 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_DialPadBackspaceButton {
position: relative;
height: 28px;
width: 28px;
&::before {
/* force this element to appear on the DOM */
content: "";
background-color: #8D97A5;
width: inherit;
height: inherit;
top: 0px;
left: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
mask-image: url('$(res)/img/element-icons/call/delete.svg');
mask-position: 8px;
mask-size: 20px;
mask-repeat: no-repeat;
}
}

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

@ -1,42 +0,0 @@
/*
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_FormButton {
line-height: $font-16px;
padding: 5px 15px;
font-size: $font-12px;
height: min-content;
&:not(:last-child) {
margin-right: 8px;
}
&.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_AccessibleButton_kind_secondary {
color: $secondary-fg-color;
border: 1px solid $secondary-fg-color;
background-color: unset;
}
}

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

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
.mx_ImageView {
display: flex;
width: 100%;
@ -66,16 +70,17 @@ limitations under the License.
pointer-events: initial;
display: flex;
align-items: center;
gap: calc($button-gap - ($button-size - $icon-size));
}
.mx_ImageView_button {
margin-left: 24px;
padding: calc(($button-size - $icon-size) / 2);
display: block;
&::before {
content: '';
height: 22px;
width: 22px;
height: $icon-size;
width: $icon-size;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
@ -109,11 +114,12 @@ limitations under the License.
}
.mx_ImageView_button_close {
padding: calc($button-size - $button-size);
border-radius: 100%;
background: #21262c; // same on all themes
&::before {
width: 32px;
height: 32px;
width: $button-size;
height: $button-size;
mask-image: url('$(res)/img/image-view/close.svg');
mask-size: 40%;
}

55
res/css/views/elements/_ReplyThread.scss
View file

@ -16,22 +16,45 @@ limitations under the License.
.mx_ReplyThread {
margin-top: 0;
}
.mx_ReplyThread .mx_DateSeparator {
font-size: 1em !important;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}
.mx_ReplyThread_show {
cursor: pointer;
}
blockquote.mx_ReplyThread {
margin-left: 0;
margin-right: 0;
margin-bottom: 8px;
padding-left: 10px;
border-left: 4px solid $blockquote-bar-color;
border-left: 4px solid $button-bg-color;
.mx_ReplyThread_show {
cursor: pointer;
}
&.mx_ReplyThread_color1 {
border-left-color: $username-variant1-color;
}
&.mx_ReplyThread_color2 {
border-left-color: $username-variant2-color;
}
&.mx_ReplyThread_color3 {
border-left-color: $username-variant3-color;
}
&.mx_ReplyThread_color4 {
border-left-color: $username-variant4-color;
}
&.mx_ReplyThread_color5 {
border-left-color: $username-variant5-color;
}
&.mx_ReplyThread_color6 {
border-left-color: $username-variant6-color;
}
&.mx_ReplyThread_color7 {
border-left-color: $username-variant7-color;
}
&.mx_ReplyThread_color8 {
border-left-color: $username-variant8-color;
}
}

8
res/css/views/elements/_StyledRadioButton.scss
View file

@ -46,7 +46,7 @@ limitations under the License.
width: $font-16px;
}
> input[type=radio] {
input[type=radio] {
// Remove the OS's representation
margin: 0;
padding: 0;
@ -112,6 +112,12 @@ limitations under the License.
}
}
}
.mx_RadioButton_innerLabel {
display: flex;
position: relative;
top: 4px;
}
}
.mx_RadioButton_outlined {

77
res/css/views/elements/_TagComposer.scss Normal file
View file

@ -0,0 +1,77 @@
/*
Copyright 2021 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_TagComposer {
.mx_TagComposer_input {
display: flex;
.mx_Field {
flex: 1;
margin: 0; // override from field styles
}
.mx_AccessibleButton {
min-width: 70px;
padding: 0; // override from button styles
margin-left: 16px; // distance from <Field>
}
.mx_Field, .mx_Field input, .mx_AccessibleButton {
// So they look related to each other by feeling the same
border-radius: 8px;
}
}
.mx_TagComposer_tags {
display: flex;
flex-wrap: wrap;
margin-top: 12px; // this plus 12px from the tags makes 24px from the input
.mx_TagComposer_tag {
padding: 6px 8px 8px 12px;
position: relative;
margin-right: 12px;
margin-top: 12px;
// Cheaty way to get an opacified variable colour background
&::before {
content: '';
border-radius: 20px;
background-color: $tertiary-fg-color;
opacity: 0.15;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// Pass through the pointer otherwise we have effectively put a whole div
// on top of the component, which makes it hard to interact with buttons.
pointer-events: none;
}
}
.mx_AccessibleButton {
background-image: url('$(res)/img/subtract.svg');
width: 16px;
height: 16px;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
}
}

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

@ -83,12 +83,12 @@ limitations under the License.
mask-size: cover;
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
background-color: $message-body-panel-icon-fg-color;
width: 13px;
width: 15px;
height: 15px;
position: absolute;
top: 8px;
left: 9px;
left: 8px;
}
}

24
res/css/views/messages/_MImageBody.scss
View file

@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$timelineImageBorderRadius: 4px;
.mx_MImageBody {
display: block;
margin-right: 34px;
}
.mx_MImageBody_thumbnail {
@ -25,7 +26,15 @@ limitations under the License.
height: 100%;
left: 0;
top: 0;
border-radius: 4px;
border-radius: $timelineImageBorderRadius;
display: flex;
justify-content: center;
align-items: center;
> canvas {
border-radius: $timelineImageBorderRadius;
}
}
.mx_MImageBody_thumbnail_container {
@ -37,17 +46,6 @@ limitations under the License.
position: relative;
}
.mx_MImageBody_thumbnail_spinner {
position: absolute;
left: 50%;
top: 50%;
}
// Inner img and TintableSvg should be centered around 0, 0
.mx_MImageBody_thumbnail_spinner > * {
transform: translate(-50%, -50%);
}
.mx_MImageBody_gifLabel {
position: absolute;
display: block;

37
res/css/views/messages/_MImageReplyBody.scss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2020 Tulir Asokan <tulir@maunium.net>
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_MImageReplyBody {
display: flex;
.mx_MImageBody_thumbnail_container {
flex: 1;
margin-right: 4px;
}
.mx_MImageReplyBody_info {
flex: 1;
.mx_MImageReplyBody_sender {
grid-area: sender;
}
.mx_MImageReplyBody_filename {
grid-area: filename;
}
}
}

28
res/css/views/messages/_MediaBody.scss Normal file
View file

@ -0,0 +1,28 @@
/*
Copyright 2021 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.
*/
// A "media body" is any file upload looking thing, apart from images and videos (they
// have unique styles).
.mx_MediaBody {
background-color: $message-body-panel-bg-color;
border-radius: 12px;
color: $message-body-panel-fg-color;
font-size: $font-14px;
line-height: $font-24px;
}

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

@ -26,6 +26,7 @@ limitations under the License.
height: 24px;
vertical-align: middle;
margin-left: 4px;
margin-right: 4px;
&::before {
content: '';

5
res/css/views/messages/_TextualEvent.scss
View file

@ -17,4 +17,9 @@ limitations under the License.
.mx_TextualEvent {
opacity: 0.5;
overflow-y: hidden;
a {
color: $accent-color;
cursor: pointer;
}
}

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

@ -21,7 +21,7 @@ limitations under the License.
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
mask-size: 80%;
}
&.mx_cryptoEvent_icon::after {
@ -48,6 +48,7 @@ limitations under the License.
.mx_cryptoEvent_buttons {
align-items: center;
display: flex;
gap: 5px;
}
.mx_cryptoEvent_state {

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

@ -259,16 +259,6 @@ 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,

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

@ -58,7 +58,7 @@ limitations under the License.
}
.mx_VerificationPanel_reciprocate_section {
.mx_FormButton {
.mx_AccessibleButton {
width: 100%;
box-sizing: border-box;
padding: 10px;

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

@ -45,7 +45,7 @@ limitations under the License.
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
mask-size: 80%;
}
// transparent-looking border surrounding the shield for when overlain over avatars
@ -59,7 +59,7 @@ limitations under the License.
}
// shrink the infill of the badge
&::before {
mask-size: 65%;
mask-size: 60%;
}
}

323
res/css/views/rooms/_EventBubbleTile.scss Normal file
View file

@ -0,0 +1,323 @@
/*
Copyright 2021 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_EventTile[data-layout=bubble],
.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
--avatarSize: 32px;
--gutterSize: 11px;
--cornerRadius: 12px;
--maxWidth: 70%;
}
.mx_EventTile[data-layout=bubble] {
position: relative;
margin-top: var(--gutterSize);
margin-left: 50px;
margin-right: 100px;
&.mx_EventTile_continuation {
margin-top: 2px;
}
/* For replies */
.mx_EventTile {
padding-top: 0;
}
&:hover {
&::before {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -60px;
right: -60px;
z-index: -1;
background: $eventbubble-bg-hover;
border-radius: 4px;
}
.mx_EventTile_avatar {
img {
box-shadow: 0 0 0 3px $eventbubble-bg-hover;
}
}
}
.mx_SenderProfile,
.mx_EventTile_line {
width: fit-content;
max-width: 70%;
}
.mx_SenderProfile {
position: relative;
top: -2px;
left: 2px;
}
&[data-self=false] {
.mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
}
.mx_EventTile_avatar {
left: -34px;
}
.mx_MessageActionBar {
right: 0;
transform: translate3d(50%, 50%, 0);
}
--backgroundColor: $eventbubble-others-bg;
}
&[data-self=true] {
.mx_EventTile_line {
border-bottom-left-radius: var(--cornerRadius);
float: right;
> a {
left: auto;
right: -48px;
}
}
.mx_SenderProfile {
display: none;
}
.mx_ReactionsRow {
float: right;
clear: right;
display: flex;
/* Moving the "add reaction button" before the reactions */
> :last-child {
order: -1;
}
}
.mx_EventTile_avatar {
top: -19px; // height of the sender block
right: -35px;
}
--backgroundColor: $eventbubble-self-bg;
}
.mx_EventTile_line {
position: relative;
padding: var(--gutterSize);
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);
background: var(--backgroundColor);
display: flex;
gap: 5px;
margin: 0 -12px 0 -9px;
> a {
position: absolute;
left: -48px;
}
}
&.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
border-top-left-radius: 0;
}
&.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
border-bottom-left-radius: var(--cornerRadius);
}
&.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
border-top-right-radius: 0;
}
&.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
}
.mx_EventTile_avatar {
position: absolute;
top: 0;
line-height: 1;
img {
box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
border-radius: 50%;
}
}
&[data-has-reply=true] {
> .mx_EventTile_line {
flex-direction: column;
}
.mx_ReplyThread_show {
order: 99999;
}
.mx_ReplyThread {
margin: 0 calc(-1 * var(--gutterSize));
.mx_EventTile_reply {
max-width: 90%;
padding: 0;
> a {
display: none !important;
}
}
.mx_EventTile {
display: flex;
gap: var(--gutterSize);
.mx_EventTile_avatar {
position: static;
}
.mx_SenderProfile {
display: none;
}
}
}
}
.mx_EditMessageComposer_buttons {
position: static;
padding: 0;
margin: 0;
background: transparent;
}
.mx_ReactionsRow {
margin-right: -18px;
margin-left: -9px;
}
.mx_ReplyThread {
border-left-width: 2px;
border-left-color: $eventbubble-reply-color;
}
&.mx_EventTile_bubbleContainer,
&.mx_EventTile_info,
& ~ .mx_EventListSummary[data-expanded=false] {
--backgroundColor: transparent;
--gutterSize: 0;
display: flex;
align-items: center;
justify-content: center;
.mx_EventTile_avatar {
position: static;
order: -1;
margin-right: 5px;
}
}
& ~ .mx_EventListSummary {
--maxWidth: 80%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: calc(var(--gutterSize) + var(--avatarSize));
.mx_EventListSummary_toggle {
float: none;
margin: 0;
order: 9;
margin-left: 5px;
}
.mx_EventListSummary_avatars {
padding-top: 0;
}
&::after {
content: "";
clear: both;
}
.mx_EventTile {
margin: 0 6px;
}
.mx_EventTile_line {
margin: 0 5px;
> a {
left: auto;
right: 0;
transform: translateX(calc(100% + 5px));
}
}
.mx_MessageActionBar {
transform: translate3d(50%, 0, 0);
}
}
& ~ .mx_EventListSummary[data-expanded=false] {
padding: 0 34px;
}
/* events that do not require bubble layout */
& ~ .mx_EventListSummary,
&.mx_EventTile_bad {
.mx_EventTile_line {
background: transparent;
}
&:hover {
&::before {
background: transparent;
}
}
}
& + .mx_EventListSummary {
.mx_EventTile {
margin-top: 0;
padding: 0;
}
}
.mx_EventListSummary_toggle {
margin-right: 55px;
}
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
&.mx_EventTile_bad > .mx_EventTile_line {
display: grid;
grid-template:
"reply reply" auto
"shield body" auto
"shield link" auto
/ auto 1fr;
.mx_EventTile_e2eIcon {
grid-area: shield;
}
.mx_UnknownBody {
grid-area: body;
}
.mx_EventTile_keyRequestInfo {
grid-area: link;
}
.mx_ReplyThread_wrapper {
grid-area: reply;
}
}
.mx_EventTile_readAvatars {
position: absolute;
right: -110px;
bottom: 0;
top: auto;
}
.mx_MTextBody {
max-width: 100%;
}
}

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

@ -1,6 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2020-2021 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.
@ -18,102 +18,305 @@ limitations under the License.
$left-gutter: 64px;
$hover-select-border: 4px;
.mx_EventTile {
.mx_EventTile:not([data-layout=bubble]) {
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: $font-14px;
position: relative;
}
.mx_EventTile.mx_EventTile_info {
padding-top: 1px;
}
&.mx_EventTile_info {
padding-top: 1px;
}
.mx_EventTile_avatar {
top: 14px;
left: 8px;
cursor: pointer;
user-select: none;
}
.mx_EventTile_avatar {
top: 14px;
left: 8px;
cursor: pointer;
user-select: none;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-6px;
left: $left-gutter;
}
&.mx_EventTile_info .mx_EventTile_avatar {
top: $font-6px;
left: $left-gutter;
}
.mx_EventTile_continuation {
padding-top: 0px !important;
&.mx_EventTile_continuation {
padding-top: 0px !important;
&.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
}
&.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
background-color: $header-panel-bg-color;
}
}
.mx_EventTile_isEditing {
background-color: $header-panel-bg-color;
}
.mx_SenderProfile {
color: $primary-fg-color;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - $left-gutter);
}
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - $left-gutter);
}
.mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
vertical-align: top;
overflow: hidden;
user-select: none;
.mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
vertical-align: top;
overflow: hidden;
user-select: none;
img {
vertical-align: -2px;
margin-right: 2px;
border-radius: 8px;
}
}
img {
vertical-align: -2px;
margin-right: 2px;
&.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}
.mx_MessageTimestamp {
display: block;
white-space: nowrap;
left: 0px;
text-align: center;
user-select: none;
}
&.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
}
}
.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}
.mx_EventTile .mx_MessageTimestamp {
display: block;
white-space: nowrap;
left: 0px;
text-align: center;
user-select: none;
}
.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
}
.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 {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
.mx_EventTile_reply {
margin-right: 10px;
}
&.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
&.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid;
padding-left: calc($left-gutter - $hover-select-border);
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_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
}
&.mx_EventTile:hover .mx_EventTile_line,
&.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
&.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
.mx_EventTile_searchHighlight a {
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
// We don't use `position: relative` on the element because then it won't line
// up with the other read receipts
&::before {
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: 14px;
height: 14px;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
.mx_EventTile_receiptSent::before {
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
}
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
&.mx_EventTile_contextual {
opacity: 0.4;
}
.mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
width: 90px;
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
margin-right: 10px;
}
.mx_EventTile_msgOption a {
text-decoration: none;
}
/* all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
https://github.com/vector-im/vector-web/issues/1154
*/
.mx_EventTile_content {
display: block;
overflow-y: hidden;
overflow-x: hidden;
margin-right: 34px;
}
/* De-zalgoing */
.mx_EventTile_body {
overflow-y: hidden;
}
/* Spoiler stuff */
.mx_EventTile_spoiler {
cursor: pointer;
}
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
filter: none;
}
&:hover.mx_EventTile_verified .mx_EventTile_line,
&:hover.mx_EventTile_unverified .mx_EventTile_line,
&:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: calc($left-gutter - $hover-select-border);
}
&:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
}
&:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
}
&:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
}
&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
}
/* End to end encryption stuff */
&:hover .mx_EventTile_e2eIcon {
opacity: 1;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
&:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
&:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
&:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
&:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}
.mx_MImageBody {
margin-right: 34px;
}
.mx_EventTile_e2eIcon {
position: absolute;
top: 6px;
left: 44px;
bottom: 0;
right: 0;
}
.mx_ReactionsRow {
margin: 0;
padding: 6px 60px;
}
}
.mx_RoomView_timeline_rr_enabled {
.mx_EventTile:not([data-layout=bubble]) {
.mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
}
}
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
}
.mx_EventTile_bubbleContainer {
@ -132,121 +335,6 @@ $hover-select-border: 4px;
}
}
.mx_EventTile_reply {
margin-right: 10px;
}
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important;
line-height: 57px !important;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid;
padding-left: calc($left-gutter - $hover-select-border);
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_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
.mx_EventTile_searchHighlight a {
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
// We don't use `position: relative` on the element because then it won't line
// up with the other read receipts
&::before {
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: 14px;
height: 14px;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
.mx_EventTile_receiptSent::before {
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
}
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
.mx_EventTile_contextual {
opacity: 0.4;
}
.mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
width: 90px;
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
margin-right: 10px;
}
.mx_EventTile_msgOption a {
text-decoration: none;
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
@ -277,52 +365,27 @@ $hover-select-border: 4px;
position: absolute;
}
/* all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
https://github.com/vector-im/vector-web/issues/1154
*/
.mx_EventTile_content {
display: block;
overflow-y: hidden;
overflow-x: hidden;
margin-right: 34px;
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important;
line-height: 57px !important;
}
/* De-zalgoing */
.mx_EventTile_body {
overflow-y: hidden;
}
/* Spoiler stuff */
.mx_EventTile_spoiler {
.mx_EventTile_content .mx_EventTile_edited {
user-select: none;
font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
cursor: pointer;
}
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
filter: none;
}
.mx_EventTile_e2eIcon {
position: absolute;
top: 6px;
left: 44px;
position: relative;
width: 14px;
height: 14px;
display: block;
bottom: 0;
right: 0;
opacity: 0.2;
background-repeat: no-repeat;
background-size: contain;
@ -345,7 +408,7 @@ $hover-select-border: 4px;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
mask-size: 80%;
}
}
@ -381,87 +444,6 @@ $hover-select-border: 4px;
opacity: 1;
}
.mx_EventTile_keyRequestInfo {
font-size: $font-12px;
}
.mx_EventTile_keyRequestInfo_text {
opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color;
text-decoration: underline;
cursor: pointer;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p {
text-align: auto;
margin-left: 3px;
margin-right: 3px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
margin-top: 0px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
margin-bottom: 0px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: calc($left-gutter - $hover-select-border);
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width 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,
.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
}
/* 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)
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
}
// 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,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}
.mx_EventTile_content .mx_EventTile_edited {
user-select: none;
font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
cursor: pointer;
}
/* Various markdown overrides */
.mx_EventTile_body pre {
@ -477,8 +459,7 @@ $hover-select-border: 4px;
pre, code {
font-family: $monospace-font-family !important;
// deliberate constants as we're behind an invert filter
color: #333;
background-color: $header-panel-bg-color;
}
pre {
@ -488,11 +469,6 @@ $hover-select-border: 4px;
overflow-x: overlay;
overflow-y: visible;
}
code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
}
}
.mx_EventTile_lineNumbers {
@ -601,6 +577,35 @@ $hover-select-border: 4px;
/* end of overrides */
.mx_EventTile_keyRequestInfo {
font-size: $font-12px;
}
.mx_EventTile_keyRequestInfo_text {
opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color;
text-decoration: underline;
cursor: pointer;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p {
text-align: auto;
margin-left: 3px;
margin-right: 3px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
margin-top: 0px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
margin-bottom: 0px;
}
.mx_EventTile_tileError {
color: red;
text-align: center;
@ -621,6 +626,13 @@ $hover-select-border: 4px;
}
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}
@media only screen and (max-width: 480px) {
.mx_EventTile_line, .mx_EventTile_reply {
padding-left: 0;

55
res/css/views/rooms/_IRCLayout.scss
View file

@ -29,6 +29,7 @@ $irc-line-height: $font-18px;
// timestamps are links which shouldn't be underlined
> a {
text-decoration: none;
min-width: 45px;
}
display: flex;
@ -49,18 +50,6 @@ $irc-line-height: $font-18px;
}
}
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
width: var(--name-width);
text-overflow: ellipsis;
text-align: left;
display: flex;
align-items: center;
overflow: visible;
justify-content: flex-end;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding: 0;
display: flex;
@ -173,44 +162,46 @@ $irc-line-height: $font-18px;
border-left: 0;
}
.mx_SenderProfile_hover {
background-color: $primary-bg-color;
overflow: hidden;
.mx_SenderProfile {
width: var(--name-width);
display: flex;
order: 2;
flex-shrink: 0;
justify-content: flex-start;
align-items: center;
> .mx_SenderProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
> .mx_SenderProfile_mxid {
visibility: collapse;
}
}
.mx_SenderProfile:hover {
justify-content: flex-start;
}
.mx_SenderProfile_hover:hover {
overflow: visible;
width: max(auto, 100%);
z-index: 10;
> .mx_SenderProfile_displayName {
overflow: visible;
}
> .mx_SenderProfile_mxid {
visibility: visible;
}
}
.mx_ReplyThread {
margin: 0;
.mx_SenderProfile {
order: unset;
max-width: unset;
width: unset;
max-width: var(--name-width);
}
.mx_SenderProfile_hover {
background: transparent;
> span {
> .mx_SenderProfile_displayName {
min-width: inherit;
}
}
}
.mx_EventTile_emote {

38
res/css/views/rooms/_LinkPreviewGroup.scss Normal file
View file

@ -0,0 +1,38 @@
/*
Copyright 2021 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_LinkPreviewGroup {
.mx_LinkPreviewGroup_hide {
cursor: pointer;
width: 18px;
height: 18px;
img {
flex: 0 0 40px;
visibility: hidden;
}
}
&:hover .mx_LinkPreviewGroup_hide img,
.mx_LinkPreviewGroup_hide.focus-visible:focus img {
visibility: visible;
}
> .mx_AccessibleButton {
color: $accent-color;
text-align: center;
}
}

31
res/css/views/rooms/_LinkPreviewWidget.scss
View file

@ -33,38 +33,29 @@ limitations under the License.
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
flex: 1 1 auto;
overflow-x: hidden; // cause it to wrap rather than clip
}
.mx_LinkPreviewWidget_title {
display: inline;
font-weight: bold;
white-space: normal;
}
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
.mx_LinkPreviewWidget_siteName {
display: inline;
.mx_LinkPreviewWidget_siteName {
font-weight: normal;
}
}
.mx_LinkPreviewWidget_description {
margin-top: 8px;
white-space: normal;
word-wrap: break-word;
}
.mx_LinkPreviewWidget_cancel {
cursor: pointer;
width: 18px;
height: 18px;
img {
flex: 0 0 40px;
visibility: hidden;
}
}
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
visibility: visible;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.mx_MatrixChat_useCompactLayout {

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

@ -22,28 +22,34 @@ limitations under the License.
max-height: 50vh;
overflow: auto;
box-shadow: 0px -16px 32px $composer-shadow-color;
.mx_ReplyPreview_section {
border-bottom: 1px solid $primary-hairline-color;
.mx_ReplyPreview_header {
margin: 8px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
.mx_ReplyPreview_tile {
margin: 0 8px;
}
.mx_ReplyPreview_title {
float: left;
}
.mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
display: flex;
}
.mx_ReplyPreview_clear {
clear: both;
}
}
}
.mx_ReplyPreview_section {
border-bottom: 1px solid $primary-hairline-color;
}
.mx_ReplyPreview_header {
margin: 12px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
.mx_ReplyPreview_title {
float: left;
}
.mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
}
.mx_ReplyPreview_clear {
clear: both;
}

119
res/css/views/rooms/_ReplyTile.scss Normal file
View file

@ -0,0 +1,119 @@
/*
Copyright 2020 Tulir Asokan <tulir@maunium.net>
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_ReplyTile {
position: relative;
padding: 2px 0;
font-size: $font-14px;
line-height: $font-16px;
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/speaker.svg");
}
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
.mx_MFileBody {
.mx_MFileBody_info {
margin: 5px 0;
}
.mx_MFileBody_download {
display: none;
}
}
> a {
display: flex;
flex-direction: column;
text-decoration: none;
color: $primary-fg-color;
}
.mx_RedactedBody {
padding: 4px 0 2px 20px;
&::before {
height: 13px;
width: 13px;
top: 5px;
}
}
// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
.mx_EventTile_content {
$reply-lines: 2;
$line-height: $font-22px;
pointer-events: none;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $reply-lines;
line-height: $line-height;
.mx_EventTile_body.mx_EventTile_bigEmoji {
line-height: $line-height !important;
font-size: $font-14px !important; // Override the big emoji override
}
// Hide line numbers
.mx_EventTile_lineNumbers {
display: none;
}
// Hack to cut content in <pre> tags too
.mx_EventTile_pre_container > pre {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $reply-lines;
padding: 4px;
}
.markdown-body blockquote,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
margin-bottom: 4px;
}
}
&.mx_ReplyTile_info {
padding-top: 0;
}
.mx_SenderProfile {
font-size: $font-14px;
line-height: $font-17px;
display: inline-block; // anti-zalgo, with overflow hidden
padding: 0;
margin: 0;
// truncate long display names
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}

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

@ -193,6 +193,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomTile_iconCopyLink::before {
mask-image: url('$(res)/img/element-icons/link.svg');
}
.mx_RoomTile_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}

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

@ -36,10 +36,10 @@ limitations under the License.
}
.mx_VoiceRecordComposerTile_delete {
width: 14px; // w&h are size of icon
height: 18px;
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
background-color: $voice-record-icon-color;
mask-repeat: no-repeat;
mask-size: contain;

125
res/css/views/settings/_Notifications.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2015 - 2021 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.
@ -14,82 +14,79 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserNotifSettings_tableRow {
display: table-row;
}
.mx_UserNotifSettings {
color: $primary-fg-color; // override from default settings page styles
.mx_UserNotifSettings_inputCell {
display: table-cell;
padding-bottom: 8px;
padding-right: 8px;
width: 16px;
}
.mx_UserNotifSettings_pushRulesTable {
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
margin-top: 40px;
.mx_UserNotifSettings_labelCell {
padding-bottom: 8px;
width: 400px;
display: table-cell;
}
tr > th {
font-weight: $font-semi-bold;
}
.mx_UserNotifSettings_pushRulesTableWrapper {
padding-bottom: 8px;
}
tr > th:first-child {
text-align: left;
font-size: $font-18px;
}
.mx_UserNotifSettings_pushRulesTable {
width: 100%;
table-layout: fixed;
}
tr > th:nth-child(n + 2) {
color: $secondary-fg-color;
font-size: $font-12px;
vertical-align: middle;
width: 66px;
}
.mx_UserNotifSettings_pushRulesTable thead {
font-weight: bold;
}
tr > td:nth-child(n + 2) {
text-align: center;
}
.mx_UserNotifSettings_pushRulesTable tbody th {
font-weight: 400;
}
tr > td {
padding-top: 8px;
}
.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
text-align: left;
}
// Override StyledRadioButton default styles
.mx_RadioButton {
justify-content: center;
.mx_UserNotifSettings_keywords {
cursor: pointer;
color: $accent-color;
}
.mx_RadioButton_content {
display: none;
}
.mx_UserNotifSettings_devicesTable td {
padding-left: 20px;
padding-right: 20px;
}
.mx_RadioButton_spacer {
display: none;
}
}
}
.mx_UserNotifSettings_notifTable {
display: table;
position: relative;
}
.mx_UserNotifSettings_floatingSection {
margin-top: 40px;
.mx_UserNotifSettings_notifTable .mx_Spinner {
position: absolute;
}
& > div:first-child { // section header
font-size: $font-18px;
font-weight: $font-semi-bold;
}
.mx_NotificationSound_soundUpload {
display: none;
}
> table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 8px;
.mx_NotificationSound_browse {
color: $accent-color;
border: 1px solid $accent-color;
background-color: transparent;
}
tr > td:first-child {
// Just for a bit of spacing
padding-right: 8px;
}
}
}
.mx_NotificationSound_save {
margin-left: 5px;
color: white;
background-color: $accent-color;
}
.mx_UserNotifSettings_clearNotifsButton {
margin-top: 8px;
}
.mx_NotificationSound_resetSound {
margin-top: 5px;
color: white;
border: $warning-color;
background-color: $warning-color;
.mx_TagComposer {
margin-top: 35px; // lots of distance from the last line of the table
}
}

4
res/css/views/spaces/_SpaceBasicSettings.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_SpaceBasicSettings {
.mx_Field {
margin: 32px 0;
margin: 24px 0;
}
.mx_SpaceBasicSettings_avatarContainer {
@ -73,7 +73,7 @@ limitations under the License.
}
}
.mx_FormButton {
.mx_AccessibleButton_hasKind {
padding: 8px 22px;
margin-left: auto;
display: block;

4
res/css/views/voip/_CallContainer.scss
View file

@ -30,8 +30,8 @@ limitations under the License.
pointer-events: initial; // restore pointer events so the user can leave/interact
cursor: pointer;
.mx_CallView_video {
width: 350px;
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {

19
res/css/views/avatars/_PulsedAvatar.scss → res/css/views/voip/_CallPreview.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,17 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_PulsedAvatar {
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
}
100% {
box-shadow: 0 0 0 6px rgba($accent-color, 0);
}
}
img {
animation: shadow-pulse 1s infinite;
}
.mx_CallPreview {
position: fixed;
left: 0;
top: 0;
}

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

@ -39,7 +39,6 @@ limitations under the License.
.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
margin-top: 10px;
background-color: $voipcall-plinth-color;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
border-radius: 8px;

43
res/css/views/voip/_DialPad.scss
View file

@ -16,23 +16,42 @@ limitations under the License.
.mx_DialPad {
display: grid;
row-gap: 16px;
column-gap: 0px;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
/* squeeze the dial pad buttons together horizontally */
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.mx_DialPad_button {
display: flex;
flex-direction: column;
justify-content: center;
width: 40px;
height: 40px;
background-color: $theme-button-bg-color;
background-color: $dialpad-button-bg-color;
border-radius: 40px;
font-size: 18px;
font-weight: 600;
text-align: center;
vertical-align: middle;
line-height: 40px;
margin-left: auto;
margin-right: auto;
}
.mx_DialPad_deleteButton, .mx_DialPad_dialButton {
.mx_DialPad_button .mx_DialPad_buttonSubText {
font-size: 8px;
}
.mx_DialPad_dialButton {
/* Always show the dial button in the center grid column */
grid-column: 2;
background-color: $accent-color;
&::before {
content: '';
display: inline-block;
@ -42,21 +61,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $primary-bg-color;
}
}
.mx_DialPad_deleteButton {
background-color: $notice-primary-color;
&::before {
mask-image: url('$(res)/img/element-icons/call/delete.svg');
mask-position: 9px; // delete icon is right-heavy so have to be slightly to the left to look centered
}
}
.mx_DialPad_dialButton {
background-color: $accent-color;
&::before {
background-color: #FFF; // on all themes
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}

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

@ -14,10 +14,40 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DialPadContextMenu_dialPad .mx_DialPad {
row-gap: 16px;
column-gap: 32px;
}
.mx_DialPadContextMenuWrapper {
padding: 15px;
}
.mx_DialPadContextMenu_header {
margin-top: 12px;
margin-left: 12px;
margin-right: 12px;
border: none;
margin-top: 32px;
margin-left: 20px;
margin-right: 20px;
/* a separator between the input line and the dial buttons */
border-bottom: 1px solid $quaternary-fg-color;
transition: border-bottom 0.25s;
}
.mx_DialPadContextMenu_cancel {
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 {
border-bottom: 1px solid $accent-color;
}
.mx_DialPadContextMenu_title {
@ -27,21 +57,23 @@ limitations under the License.
}
.mx_DialPadContextMenu_dialled {
height: 1em;
height: 1.5em;
font-size: 18px;
font-weight: 600;
border: none;
margin: 0px;
}
.mx_DialPadContextMenu_dialled input {
font-size: 18px;
font-weight: 600;
overflow: hidden;
max-width: 185px;
text-align: left;
direction: rtl;
padding: 8px 0px;
background-color: rgb(0, 0, 0, 0);
}
.mx_DialPadContextMenu_dialPad {
margin: 16px;
}
.mx_DialPadContextMenu_horizSep {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
border-bottom: 1px solid $input-darker-bg-color;
}
}

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

@ -19,14 +19,23 @@ limitations under the License.
}
.mx_DialPadModal {
width: 192px;
height: 368px;
width: 292px;
height: 370px;
padding: 16px 0px 0px 0px;
}
.mx_DialPadModal_header {
margin-top: 12px;
margin-left: 12px;
margin-right: 12px;
margin-top: 32px;
margin-left: 40px;
margin-right: 40px;
/* a separator between the input line and the dial buttons */
border-bottom: 1px solid $quaternary-fg-color;
transition: border-bottom 0.25s;
}
.mx_DialPadModal_header:focus-within {
border-bottom: 1px solid $accent-color;
}
.mx_DialPadModal_title {
@ -45,11 +54,18 @@ limitations under the License.
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
margin-right: 16px;
}
.mx_DialPadModal_field {
border: none;
margin: 0px;
height: 30px;
}
.mx_DialPadModal_field .mx_Field_postfix {
/* Remove border separator between postfix and field content */
border-left: none;
}
.mx_DialPadModal_field input {
@ -62,13 +78,3 @@ limitations under the License.
margin-right: 16px;
margin-top: 16px;
}
.mx_DialPadModal_horizSep {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
border-bottom: 1px solid $input-darker-bg-color;
}
}

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

@ -15,8 +15,6 @@ limitations under the License.
*/
.mx_VideoFeed_voice {
// We don't want to collide with the call controls that have 52px of height
padding-bottom: 52px;
background-color: $inverted-bg-color;
}

3
res/img/element-icons/call/dialpad.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 14.25C5.175 14.25 4.5 14.925 4.5 15.75C4.5 16.575 5.175 17.25 6 17.25C6.825 17.25 7.5 16.575 7.5 15.75C7.5 14.925 6.825 14.25 6 14.25ZM1.5 0.75C0.675 0.75 0 1.425 0 2.25C0 3.075 0.675 3.75 1.5 3.75C2.325 3.75 3 3.075 3 2.25C3 1.425 2.325 0.75 1.5 0.75ZM1.5 5.25C0.675 5.25 0 5.925 0 6.75C0 7.575 0.675 8.25 1.5 8.25C2.325 8.25 3 7.575 3 6.75C3 5.925 2.325 5.25 1.5 5.25ZM1.5 9.75C0.675 9.75 0 10.425 0 11.25C0 12.075 0.675 12.75 1.5 12.75C2.325 12.75 3 12.075 3 11.25C3 10.425 2.325 9.75 1.5 9.75ZM10.5 3.75C11.325 3.75 12 3.075 12 2.25C12 1.425 11.325 0.75 10.5 0.75C9.675 0.75 9 1.425 9 2.25C9 3.075 9.675 3.75 10.5 3.75ZM6 9.75C5.175 9.75 4.5 10.425 4.5 11.25C4.5 12.075 5.175 12.75 6 12.75C6.825 12.75 7.5 12.075 7.5 11.25C7.5 10.425 6.825 9.75 6 9.75ZM10.5 9.75C9.675 9.75 9 10.425 9 11.25C9 12.075 9.675 12.75 10.5 12.75C11.325 12.75 12 12.075 12 11.25C12 10.425 11.325 9.75 10.5 9.75ZM10.5 5.25C9.675 5.25 9 5.925 9 6.75C9 7.575 9.675 8.25 10.5 8.25C11.325 8.25 12 7.575 12 6.75C12 5.925 11.325 5.25 10.5 5.25ZM6 5.25C5.175 5.25 4.5 5.925 4.5 6.75C4.5 7.575 5.175 8.25 6 8.25C6.825 8.25 7.5 7.575 7.5 6.75C7.5 5.925 6.825 5.25 6 5.25ZM6 0.75C5.175 0.75 4.5 1.425 4.5 2.25C4.5 3.075 5.175 3.75 6 3.75C6.825 3.75 7.5 3.075 7.5 2.25C7.5 1.425 6.825 0.75 6 0.75Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
res/img/element-icons/eye.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3094 5.96587C15.3206 7.15704 15.3417 8.85457 14.3412 10.0548C13.0889 11.5571 10.9822 13.3332 8.02104 13.3332C5.05992 13.3332 2.9532 11.5571 1.70087 10.0548C0.700398 8.85457 0.721506 7.15704 1.7327 5.96587C3.01174 4.45918 5.1391 2.6665 8.02104 2.6665C10.903 2.6665 13.0303 4.45918 14.3094 5.96587ZM11.5556 7.99984C11.5556 9.96352 9.96369 11.5554 8.00001 11.5554C6.03633 11.5554 4.44446 9.96352 4.44446 7.99984C4.44446 6.03616 6.03633 4.44428 8.00001 4.44428C9.96369 4.44428 11.5556 6.03616 11.5556 7.99984ZM8.00001 9.77761C8.98185 9.77761 9.77779 8.98168 9.77779 7.99984C9.77779 7.018 8.98185 6.22206 8.00001 6.22206C7.01817 6.22206 6.22224 7.018 6.22224 7.99984C6.22224 8.98168 7.01817 9.77761 8.00001 9.77761Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 887 B

1
res/img/element-icons/message/chevron-up.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
Side by side

After

Width:  |  Height:  |  Size: 268 B

1
res/img/element-icons/message/corner-up-right.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 316 B

3
res/img/element-icons/message/fwd.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 755 B

1
res/img/element-icons/message/link.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 371 B

1
res/img/element-icons/message/repeat.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 392 B

1
res/img/element-icons/message/share.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 364 B

5
res/img/element-icons/speaker.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="#737D8C"/>
<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="#737D8C"/>
<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

4
res/img/element-icons/trashcan.svg
View file

@ -1,3 +1,3 @@
<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="#8D99A5"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 679 B

After

Width:  |  Height:  |  Size: 397 B

Before After
Before After

35
res/img/element-icons/warning-badge.svg
View file

@ -1,5 +1,32 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" fill="#FF4B55"/>
<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24">
<metadata
id="metadata14">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs12" />
<path
id="path2"
d="M 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 z M 11.880859 5.5039062 C 12.720859 5.4439063 13.470547 6.0746875 13.560547 6.9296875 L 13.560547 7.1699219 L 13.080078 13.169922 C 13.035078 13.724922 12.570625 14.144531 12.015625 14.144531 L 11.925781 14.144531 C 11.400781 14.099531 10.996172 13.694922 10.951172 13.169922 L 10.470703 7.1699219 C 10.395703 6.3149219 11.025859 5.5639064 11.880859 5.5039062 z M 12 15.763672 C 12.729 15.763672 13.320312 16.354884 13.320312 17.083984 C 13.320313 17.812984 12.729 18.404297 12 18.404297 C 11.271 18.404297 10.679688 17.812984 10.679688 17.083984 C 10.679688 16.354884 11.271 15.763672 12 15.763672 z "
style="fill:#ff4b55;fill-opacity:1" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Before After
Before After

3
res/img/subtract.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58167 12.4183 0 8 0C3.58173 0 0 3.58167 0 8C0 12.4183 3.58173 16 8 16ZM3.96967 5.0304L6.93933 8L3.96967 10.9697L5.03033 12.0304L8 9.06067L10.9697 12.0304L12.0303 10.9697L9.06067 8L12.0303 5.0304L10.9697 3.96973L8 6.93945L5.03033 3.96973L3.96967 5.0304Z" fill="#8D97A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 461 B

3
res/img/voip/tab-dialpad.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 19C10.9 19 10 19.9 10 21C10 22.1 10.9 23 12 23C13.1 23 14 22.1 14 21C14 19.9 13.1 19 12 19ZM6 1C4.9 1 4 1.9 4 3C4 4.1 4.9 5 6 5C7.1 5 8 4.1 8 3C8 1.9 7.1 1 6 1ZM6 7C4.9 7 4 7.9 4 9C4 10.1 4.9 11 6 11C7.1 11 8 10.1 8 9C8 7.9 7.1 7 6 7ZM6 13C4.9 13 4 13.9 4 15C4 16.1 4.9 17 6 17C7.1 17 8 16.1 8 15C8 13.9 7.1 13 6 13ZM18 5C19.1 5 20 4.1 20 3C20 1.9 19.1 1 18 1C16.9 1 16 1.9 16 3C16 4.1 16.9 5 18 5ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13ZM18 13C16.9 13 16 13.9 16 15C16 16.1 16.9 17 18 17C19.1 17 20 16.1 20 15C20 13.9 19.1 13 18 13ZM18 7C16.9 7 16 7.9 16 9C16 10.1 16.9 11 18 11C19.1 11 20 10.1 20 9C20 7.9 19.1 7 18 7ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 1C10.9 1 10 1.9 10 3C10 4.1 10.9 5 12 5C13.1 5 14 4.1 14 3C14 1.9 13.1 1 12 1Z" fill="#8D97A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

7
res/img/voip/tab-userdirectory.svg Normal file
View file

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z" fill="#8D97A5"/>
<path d="M18.1502 21.1214L18.9339 22.2814L18.1502 21.1214ZM5.4 20.8008L4.55919 21.9202H4.55919L5.4 20.8008ZM18.1197 18.3237L19.0934 19.3296L19.7717 18.6731L19.4173 17.7981L18.1197 18.3237ZM5.88028 18.3237L4.58268 17.7981L4.22829 18.6731L4.90659 19.3296L5.88028 18.3237ZM12 24.4C14.5662 24.4 16.9541 23.619 18.9339 22.2814L17.3665 19.9613C15.835 20.9959 13.9902 21.6 12 21.6V24.4ZM4.55919 21.9202C6.63176 23.477 9.21011 24.4 12 24.4V21.6C9.83723 21.6 7.84514 20.8865 6.24081 19.6814L4.55919 21.9202ZM-0.399998 12C-0.399998 16.0577 1.55052 19.6603 4.55919 21.9202L6.24081 19.6814C3.90591 17.9276 2.4 15.1399 2.4 12H-0.399998ZM12 -0.399998C5.15167 -0.399998 -0.399998 5.15167 -0.399998 12H2.4C2.4 6.69807 6.69807 2.4 12 2.4V-0.399998ZM24.4 12C24.4 5.15167 18.8483 -0.399998 12 -0.399998V2.4C17.3019 2.4 21.6 6.69807 21.6 12H24.4ZM18.9339 22.2814C22.2288 20.0554 24.4 16.2815 24.4 12H21.6C21.6 15.3124 19.9236 18.2337 17.3665 19.9613L18.9339 22.2814ZM13.9 8.975C13.9 10.2838 12.9459 11.15 12 11.15V13.95C14.6991 13.95 16.7 11.615 16.7 8.975H13.9ZM12 6.8C12.9459 6.8 13.9 7.66616 13.9 8.975H16.7C16.7 6.335 14.6991 4 12 4V6.8ZM10.1 8.975C10.1 7.66616 11.0541 6.8 12 6.8V4C9.30086 4 7.3 6.335 7.3 8.975H10.1ZM12 11.15C11.0541 11.15 10.1 10.2838 10.1 8.975H7.3C7.3 11.615 9.30086 13.95 12 13.95V11.15ZM17.146 17.3178C15.8129 18.6081 14.0004 19.4 12 19.4V22.2C14.756 22.2 17.2591 21.1051 19.0934 19.3296L17.146 17.3178ZM12 15.6C14.1797 15.6 16.0494 16.9415 16.8221 18.8493L19.4173 17.7981C18.2312 14.8697 15.359 12.8 12 12.8V15.6ZM7.17788 18.8493C7.95058 16.9415 9.8203 15.6 12 15.6V12.8C8.64102 12.8 5.7688 14.8697 4.58268 17.7981L7.17788 18.8493ZM12 19.4C9.99963 19.4 8.18709 18.6081 6.85397 17.3178L4.90659 19.3296C6.74088 21.1051 9.24402 22.2 12 22.2V19.4Z" fill="#8D97A5" mask="url(#path-1-inside-1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

42
res/themes/dark/css/_dark.scss
View file

@ -118,6 +118,7 @@ $voipcall-plinth-color: #394049;
// ********************
$theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #394049;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $bg-color;
@ -212,8 +213,6 @@ $message-body-panel-icon-fg-color: #21262C; // "Separator"
$message-body-panel-icon-bg-color: $tertiary-fg-color;
$voice-record-stop-border-color: $quaternary-fg-color;
$voice-record-waveform-bg-color: $message-body-panel-bg-color;
$voice-record-waveform-fg-color: $message-body-panel-fg-color;
$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
$voice-record-icon-color: $quaternary-fg-color;
$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
@ -228,6 +227,13 @@ $groupFilterPanel-background-blur-amount: 30px;
$composer-shadow-color: rgba(0, 0, 0, 0.28);
// Bubble tiles
$eventbubble-self-bg: #143A34;
$eventbubble-others-bg: #394049;
$eventbubble-bg-hover: #433C23;
$eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD;
// ***** Mixins! *****
@define-mixin mx_DialogButton {
@ -273,24 +279,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
}
// markdown overrides:
.mx_EventTile_content .markdown-body pre:hover {
border-color: #808080 !important; // inverted due to rules below
scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // copied from light theme due to inversion below
// the code above works only in Firefox, this is for other browsers
// see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2); // copied from light theme due to inversion below
}
}
.mx_EventTile_content .markdown-body {
pre, code {
filter: invert(1);
}
pre code {
filter: none;
}
table {
tr {
background-color: #000000;
@ -300,18 +289,9 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
background-color: #080808;
}
}
blockquote {
color: #919191;
}
}
// diff highlight colors
// intentionally swapped to avoid inversion
.hljs-addition {
background: #fdd;
}
.hljs-deletion {
background: #dfd;
// highlight.js overrides
.hljs-tag {
color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
}

1
res/themes/dark/css/dark.scss
View file

@ -9,3 +9,4 @@
@import "_dark.scss";
@import "../../light/css/_mods.scss";
@import "../../../../res/css/_components.scss";
@import url("highlight.js/styles/atom-one-dark.css");

31
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -20,6 +20,9 @@ $tertiary-fg-color: $primary-fg-color;
$primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color;
// Legacy theme backports
$quaternary-fg-color: #6F7882;
// used for dialog box text
$light-fg-color: $header-panel-text-secondary-color;
@ -114,6 +117,8 @@ $voipcall-plinth-color: #394049;
// ********************
$theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #6F7882;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
@ -207,8 +212,6 @@ $message-body-panel-icon-bg-color: $secondary-fg-color;
// See non-legacy dark for variable information
$voice-record-stop-border-color: #6F7882;
$voice-record-waveform-bg-color: $message-body-panel-bg-color;
$voice-record-waveform-fg-color: $message-body-panel-fg-color;
$voice-record-waveform-incomplete-fg-color: #6F7882;
$voice-record-icon-color: #6F7882;
$voice-playback-button-bg-color: $tertiary-fg-color;
@ -246,7 +249,7 @@ $composer-shadow-color: tranparent;
@define-mixin mx_DialogButton_secondary {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color ! important;
border: 1px solid $accent-color !important;
color: $accent-color;
background-color: $button-secondary-bg-color;
}
@ -264,18 +267,7 @@ $composer-shadow-color: tranparent;
}
// markdown overrides:
.mx_EventTile_content .markdown-body pre:hover {
border-color: #808080 !important; // inverted due to rules below
}
.mx_EventTile_content .markdown-body {
pre, code {
filter: invert(1);
}
pre code {
filter: none;
}
table {
tr {
background-color: #000000;
@ -287,12 +279,7 @@ $composer-shadow-color: tranparent;
}
}
// diff highlight colors
// intentionally swapped to avoid inversion
.hljs-addition {
background: #fdd;
}
.hljs-deletion {
background: #dfd;
// highlight.js overrides:
.hljs-tag {
color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
}

1
res/themes/legacy-dark/css/legacy-dark.scss
View file

@ -4,3 +4,4 @@
@import "../../legacy-light/css/_legacy-light.scss";
@import "_legacy-dark.scss";
@import "../../../../res/css/_components.scss";
@import url("highlight.js/styles/atom-one-dark.css");

14
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -28,6 +28,9 @@ $tertiary-fg-color: $primary-fg-color;
$primary-bg-color: #ffffff;
$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
// Legacy theme backports
$quaternary-fg-color: #C1C6CD;
// used for dialog box text
$light-fg-color: #747474;
@ -181,6 +184,8 @@ $voipcall-plinth-color: #F4F6FA;
// ********************
$theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
@ -332,8 +337,6 @@ $message-body-panel-icon-bg-color: $primary-bg-color;
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #E3E8F0;
$voice-record-waveform-bg-color: $message-body-panel-bg-color;
$voice-record-waveform-fg-color: $message-body-panel-fg-color;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
@ -344,6 +347,13 @@ $appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;
// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: rgb(242, 242, 242);
$eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

1
res/themes/legacy-light/css/legacy-light.scss
View file

@ -3,3 +3,4 @@
@import "_fonts.scss";
@import "_legacy-light.scss";
@import "../../../../res/css/_components.scss";
@import url("highlight.js/styles/atom-one-light.css");

11
res/themes/light/css/_light.scss
View file

@ -173,6 +173,8 @@ $voipcall-plinth-color: #F4F6FA;
// ********************
$theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: #ffffff;
@ -333,8 +335,6 @@ $voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #E3E8F0; // "Separator"
$voice-record-waveform-bg-color: $message-body-panel-bg-color;
$voice-record-waveform-fg-color: $message-body-panel-fg-color;
$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
$voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
@ -349,6 +349,13 @@ $groupFilterPanel-background-blur-amount: 20px;
$composer-shadow-color: rgba(0, 0, 0, 0.04);
// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: #FEFCF5;
$eventbubble-avatar-outline: $primary-bg-color;
$eventbubble-reply-color: #C1C6CD;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

1
res/themes/light/css/light.scss
View file

@ -4,3 +4,4 @@
@import "_light.scss";
@import "_mods.scss";
@import "../../../../res/css/_components.scss";
@import url("highlight.js/styles/atom-one-light.css");