Merge remote-tracking branch 'origin/develop' into jitsi-picture-in-picture
* origin/develop: (100 commits) Add comments to isRegionalIndicator Stop voice messages that are playing when starting a recording Properly set style attribute on shared usercontent iframe Fix in-call context menus when in PiP mode (#6552) Extract tooltipYOffset to a const Increase yOffset by 4px away i18n Post-merge conflict resolution and improve alignment of tooltips Fix image & blurhash info when skipping thumbnail due to thresholds Skip sending a thumbnail if it is not a sufficient saving over the original Null guard space inviter to prevent the app exploding Remove seams from pin icon Appease Jest Fix worklet reference for new webpack pipeline i18n Update copy Fix wrong cursor being used in PiP Fix voice feed cut-off Use flex-start as it has more universal support Wrap cases in {} ...
This commit is contained in:
Dariusz Niemczyk
commit
3b002c4c1f
66 changed files with 1762 additions and 537 deletions
|
|
@ -266,6 +266,7 @@
|
|||
@import "./views/spaces/_SpacePublicShare.scss";
|
||||
@import "./views/terms/_InlineTermsAgreement.scss";
|
||||
@import "./views/toasts/_AnalyticsToast.scss";
|
||||
@import "./views/toasts/_IncomingCallToast.scss";
|
||||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ limitations under the License.
|
|||
margin: 0 4px;
|
||||
grid-row: 2 / 4;
|
||||
grid-column: 1;
|
||||
background-color: $dark-panel-bg-color;
|
||||
background-color: $toast-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ limitations under the License.
|
|||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
color: $primary-fg-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
background-color: $toast-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ limitations under the License.
|
|||
.mx_InteractiveAuthEntryComponents_termsPolicy {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ limitations under the License.
|
|||
.mx_desktopCapturerSourcePicker_source_thumbnail {
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
width: 312px;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
border-style: solid;
|
||||
|
|
@ -53,6 +52,5 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ limitations under the License.
|
|||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 0;
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
|
|
|
|||
|
|
@ -310,14 +310,12 @@ $hover-select-border: 4px;
|
|||
}
|
||||
|
||||
.mx_RoomView_timeline_rr_enabled {
|
||||
|
||||
.mx_EventTile:not([data-layout=bubble]) {
|
||||
.mx_EventTile[data-layout=group] {
|
||||
.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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,21 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/element-icons/trashcan.svg');
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_uploadingState {
|
||||
margin-right: 10px;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_failedState {
|
||||
margin-right: 21px;
|
||||
|
||||
.mx_VoiceRecordComposerTile_uploadState_badge {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
|
||||
// Note: remaining class properties are in the PlayerContainer CSS.
|
||||
|
||||
|
|
@ -68,7 +83,7 @@ limitations under the License.
|
|||
height: 10px;
|
||||
position: absolute;
|
||||
left: 12px; // 12px from the left edge for container padding
|
||||
top: 18px; // vertically center (middle align with clock)
|
||||
top: 16px; // vertically center (middle align with clock)
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
149
res/css/views/toasts/_IncomingCallToast.scss
Normal file
149
res/css/views/toasts/_IncomingCallToast.scss
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
/*
|
||||
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.
|
||||
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_IncomingCallToast {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
pointer-events: initial; // restore pointer events so the user can accept/decline
|
||||
|
||||
.mx_IncomingCallToast_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
|
||||
.mx_CallEvent_caller {
|
||||
font-weight: bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mx_CallEvent_type {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $tertiary-fg-color;
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.mx_CallEvent_type_icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 6px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IncomingCallToast_content_voice {
|
||||
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
|
||||
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IncomingCallToast_content_video {
|
||||
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
|
||||
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_buttons {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
.mx_IncomingCallToast_button {
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 0;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
span {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IncomingCallToast_button_accept span::before {
|
||||
mask-size: 13px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
&.mx_IncomingCallToast_button_decline span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_iconButton {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_silence::before {
|
||||
mask-image: url('$(res)/img/voip/silence.svg');
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_unSilence::before {
|
||||
mask-image: url('$(res)/img/voip/un-silence.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +28,6 @@ limitations under the License.
|
|||
|
||||
.mx_CallPreview {
|
||||
pointer-events: initial; // restore pointer events so the user can leave/interact
|
||||
cursor: pointer;
|
||||
|
||||
.mx_VideoFeed_remote.mx_VideoFeed_voice {
|
||||
min-height: 150px;
|
||||
|
|
@ -43,84 +42,4 @@ limitations under the License.
|
|||
.mx_AppTile_persistedWrapper div {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox {
|
||||
min-width: 250px;
|
||||
background-color: $voipcall-plinth-color;
|
||||
padding: 8px;
|
||||
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
|
||||
pointer-events: initial; // restore pointer events so the user can accept/decline
|
||||
cursor: pointer;
|
||||
|
||||
.mx_IncomingCallBox_CallerInfo {
|
||||
display: flex;
|
||||
direction: row;
|
||||
|
||||
img, .mx_BaseAvatar_initial {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .mx_IncomingCallBox_spacer {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 0;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_iconButton {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_silence::before {
|
||||
mask-image: url('$(res)/img/voip/silence.svg');
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_unSilence::before {
|
||||
mask-image: url('$(res)/img/voip/un-silence.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
.mx_CallView_pip {
|
||||
width: 320px;
|
||||
padding-bottom: 8px;
|
||||
background-color: $voipcall-plinth-color;
|
||||
background-color: $toast-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 8px;
|
||||
|
||||
|
|
@ -75,8 +75,6 @@ limitations under the License.
|
|||
height: 100%;
|
||||
|
||||
&.mx_VideoFeed_voice {
|
||||
// We don't want to collide with the call controls that have 52px of height
|
||||
margin-bottom: 52px;
|
||||
background-color: $inverted-bg-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@ limitations under the License.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.mx_VideoFeed_video {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ limitations under the License.
|
|||
|
||||
&.mx_VideoFeed_voice {
|
||||
background-color: $inverted-bg-color;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.mx_VideoFeed_video {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5151 20.0831L15.6941 17.2621L17.2621 15.6941L20.0831 18.5151C21.5741 20.0061 22.1529 21.7793 21.9661 21.9661C21.7793 22.1529 20.0061 21.5741 18.5151 20.0831Z" fill="#737D8C"/>
|
||||
<path d="M7.46196 11.3821C7.07677 11.5059 5.49073 12.0989 3.63366 12.0744C1.77658 12.0499 1.67795 10.8941 2.46811 10.1039L6.28598 6.28602L9.42196 9.42203L7.46196 11.3821Z" fill="#737D8C"/>
|
||||
<path d="M11.3821 7.46202C11.5059 7.07682 12.0989 5.49077 12.0744 3.63368C12.0499 1.77658 10.8941 1.67795 10.1039 2.46812L6.28598 6.28602L9.42196 9.42203L11.3821 7.46202Z" fill="#737D8C"/>
|
||||
<path d="M7.40596 11.438L11.4379 7.40602L14.9099 10.206L10.2059 14.9101L7.40596 11.438Z" fill="#737D8C"/>
|
||||
<path d="M11.774 11.774C9.31114 14.2369 8.61779 17.7115 9.83827 20.3213C10.3104 21.3308 11.6288 21.3273 12.4169 20.5392L20.5391 12.4169C21.3271 11.6289 21.3307 10.3104 20.3212 9.83829C17.7114 8.61779 14.2369 9.31115 11.774 11.774Z" fill="#737D8C"/>
|
||||
<path d="m11.068 2c-0.32021 4.772e-4 -0.66852 0.17244-0.96484 0.46875-2.5464 2.5435-5.0905 5.0892-7.6348 7.6348-0.79016 0.7902-0.69302 1.9462 1.1641 1.9707 1.855 0.02447 3.4407-0.56671 3.8281-0.69141l2.4355 3.1445c-0.83503 1.9462-0.86902 4.062-0.058594 5.7949 0.47213 1.0095 1.79 1.0049 2.5781 0.2168l3.2773-3.2773 2.8223 2.8223c1.491 1.491 3.2644 2.0696 3.4512 1.8828s-0.39181-1.9602-1.8828-3.4512l-2.8223-2.8223 3.2773-3.2773c0.788-0.788 0.79075-2.106-0.21875-2.5781-1.733-0.81044-3.8468-0.77643-5.793 0.058594l-3.1445-2.4355c0.1247-0.38742 0.71588-1.9731 0.69141-3.8281-0.015311-1.1607-0.47217-1.6336-1.0059-1.6328z" fill="#737d8c"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 744 B |
|
|
@ -1,3 +1,6 @@
|
|||
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
|
||||
$system-dark: #21262C;
|
||||
|
||||
// unified palette
|
||||
// try to use these colors when possible
|
||||
$bg-color: #15191E;
|
||||
|
|
@ -47,7 +50,7 @@ $inverted-bg-color: $base-color;
|
|||
$selected-color: $room-highlight-color;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: #21262c;
|
||||
$event-selected-color: $system-dark;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: transparent;
|
||||
|
|
@ -91,7 +94,7 @@ $lightbox-background-bg-color: #000;
|
|||
$lightbox-background-bg-opacity: 0.85;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
$settings-profile-placeholder-bg-color: #21262c;
|
||||
$settings-profile-placeholder-bg-color: $system-dark;
|
||||
$settings-profile-overlay-placeholder-fg-color: #454545;
|
||||
$settings-profile-button-bg-color: #e7e7e7;
|
||||
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
|
||||
|
|
@ -112,8 +115,8 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$header-divider-color: $header-panel-text-primary-color;
|
||||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #394049;
|
||||
$quinary-content-color: #394049;
|
||||
$toast-bg-color: $quinary-content-color;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -175,7 +178,7 @@ $button-link-bg-color: transparent;
|
|||
$togglesw-off-color: $room-highlight-color;
|
||||
|
||||
$progressbar-fg-color: $accent-color;
|
||||
$progressbar-bg-color: #21262c;
|
||||
$progressbar-bg-color: $system-dark;
|
||||
|
||||
$visual-bell-bg-color: #800;
|
||||
|
||||
|
|
@ -210,7 +213,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
|
|||
$message-body-panel-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-bg-color: #394049; // "Dark Tile"
|
||||
$message-body-panel-icon-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-icon-bg-color: #21262C; // "System Dark"
|
||||
$message-body-panel-icon-bg-color: $system-dark; // "System Dark"
|
||||
|
||||
$voice-record-stop-border-color: $quaternary-fg-color;
|
||||
$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
|
||||
|
|
@ -228,9 +231,9 @@ $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-self-bg: #14322E;
|
||||
$eventbubble-others-bg: $event-selected-color;
|
||||
$eventbubble-bg-hover: #1C2026;
|
||||
$eventbubble-avatar-outline: $bg-color;
|
||||
$eventbubble-reply-color: #C1C6CD;
|
||||
|
||||
|
|
|
|||
|
|
@ -111,8 +111,8 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$header-divider-color: $header-panel-text-primary-color;
|
||||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #394049;
|
||||
$quinary-content-color: #394049;
|
||||
$toast-bg-color: $quinary-content-color;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
|
||||
digits in flowed text to stand out.
|
||||
TODO: Consider putting all emoji fonts to the end rather than the front. */
|
||||
$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
|
||||
$font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
|
||||
|
||||
$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
|
||||
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
|
||||
|
||||
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
|
||||
$system-light: #F4F6FA;
|
||||
|
||||
// unified palette
|
||||
// try to use these colors when possible
|
||||
|
|
@ -178,8 +181,8 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$composer-e2e-icon-color: #91a1c0;
|
||||
$header-divider-color: #91a1c0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #F4F6FA;
|
||||
$toast-bg-color: $system-light;
|
||||
$voipcall-plinth-color: $system-light;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -331,7 +334,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
|
|||
$message-body-panel-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-bg-color: #E3E8F0;
|
||||
$message-body-panel-icon-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-icon-bg-color: #F4F6FA;
|
||||
$message-body-panel-icon-bg-color: $system-light;
|
||||
|
||||
// See non-legacy _light for variable information
|
||||
$voice-record-stop-symbol-color: #ff4b55;
|
||||
|
|
@ -348,9 +351,9 @@ $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-self-bg: #F0FBF8;
|
||||
$eventbubble-others-bg: $system-light;
|
||||
$eventbubble-bg-hover: #FAFBFD;
|
||||
$eventbubble-avatar-outline: #fff;
|
||||
$eventbubble-reply-color: #C1C6CD;
|
||||
|
||||
|
|
@ -390,7 +393,7 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
@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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
|
||||
digits in flowed text to stand out.
|
||||
TODO: Consider putting all emoji fonts to the end rather than the front. */
|
||||
$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
|
||||
$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
|
||||
|
||||
$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
|
||||
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
|
||||
|
||||
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
|
||||
$system-light: #F4F6FA;
|
||||
|
||||
// unified palette
|
||||
// try to use these colors when possible
|
||||
|
|
@ -138,7 +141,7 @@ $blockquote-bar-color: #ddd;
|
|||
$blockquote-fg-color: #777;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
$settings-profile-placeholder-bg-color: #f4f6fa;
|
||||
$settings-profile-placeholder-bg-color: $system-light;
|
||||
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
|
||||
$settings-profile-button-bg-color: #e7e7e7;
|
||||
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
|
||||
|
|
@ -167,8 +170,8 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$composer-e2e-icon-color: #91A1C0;
|
||||
$header-divider-color: #91A1C0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #F4F6FA;
|
||||
$toast-bg-color: $system-light;
|
||||
$voipcall-plinth-color: $system-light;
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -327,7 +330,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
|
|||
$message-body-panel-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-bg-color: #E3E8F0; // "Separator"
|
||||
$message-body-panel-icon-fg-color: $secondary-fg-color;
|
||||
$message-body-panel-icon-bg-color: #F4F6FA;
|
||||
$message-body-panel-icon-bg-color: $system-light;
|
||||
|
||||
// These two don't change between themes. They are the $warning-color, but we don't
|
||||
// want custom themes to affect them by accident.
|
||||
|
|
@ -350,9 +353,9 @@ $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-self-bg: #F0FBF8;
|
||||
$eventbubble-others-bg: $system-light;
|
||||
$eventbubble-bg-hover: #FAFBFD;
|
||||
$eventbubble-avatar-outline: $primary-bg-color;
|
||||
$eventbubble-reply-color: #C1C6CD;
|
||||
|
||||
|
|
@ -392,7 +395,7 @@ $eventbubble-reply-color: #C1C6CD;
|
|||
@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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue