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

Merge branch 'develop' into travis/remove-skinning

Browse source
This commit is contained in:
Travis Ralston 2022-04-05 10:50:37 -06:00
commit 4057833036
74 changed files with 1412 additions and 1717 deletions
Download patch file Download diff file Expand all files Collapse all files

22
res/css/_common.scss
View file

@ -670,3 +670,25 @@ legend {
line-height: inherit;
cursor: pointer;
}
@define-mixin CallButton {
box-sizing: border-box;
font-weight: 600;
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
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;
}
}
}

1
res/css/_components.scss
View file

@ -314,4 +314,3 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VoiceChannelRadio.scss";

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

@ -93,7 +93,8 @@ limitations under the License.
mask-position: center;
}
$dot-size: 7px;
$dot-size: 8px;
$dot-offset: -3px;
$pulse-color: $alert;
.mx_RightPanel_pinnedMessagesButton {
@ -102,10 +103,11 @@ $pulse-color: $alert;
mask-position: center;
}
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
@ -117,17 +119,9 @@ $pulse-color: $alert;
.mx_RightPanel_headerButton_unreadIndicator {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&.mx_Indicator_red {
background: rgba($alert, 1);
@ -135,29 +129,13 @@ $pulse-color: $alert;
}
&.mx_Indicator_gray {
background: rgba($roomtile-default-badge-bg-color, 1);
box-shadow: rgba($roomtile-default-badge-bg-color, 1);
background: rgba($room-icon-unread-color, 1);
box-shadow: rgba($room-icon-unread-color, 1);
}
&.mx_Indicator_bold {
background: rgba($input-darker-fg-color, 1);
box-shadow: rgba($input-darker-fg-color, 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: inherit;
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
}
@ -197,7 +175,14 @@ $pulse-color: $alert;
}
}
.mx_RightPanel_headerButton_highlight {
.mx_RightPanel_headerButton_unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}
.mx_RightPanel_headerButton_highlight,
.mx_RightPanel_headerButton:hover {
&::before {
background-color: $accent !important;
}
@ -242,7 +227,8 @@ $pulse-color: $alert;
margin: 16px 0;
}
h2, p {
h2,
p {
font-size: $font-14px;
}

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

@ -105,7 +105,9 @@ limitations under the License.
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
.mx_RoomView_messagePanel,
.mx_RoomView_messagePanelSpinner,
.mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
}
@ -147,20 +149,17 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.mx_RoomView_searchResultsPanel {
.mx_RoomView_messageListWrapper {
justify-content: flex-start;
> .mx_RoomView_MessageList > li > ol {
>.mx_RoomView_MessageList > li > ol {
list-style-type: none;
}
}
@ -213,14 +212,20 @@ hr.mx_RoomView_myReadMarker {
}
// Immersive widgets
.mx_RoomView_body > .mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
height: 100%;
.mx_RoomView_immersive {
.mx_RoomHeader_wrapper {
border: unset;
}
background: none;
border: none;
.mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
height: 100%;
padding-top: 33px; // to match the right panel chat heading
border-radius: 8px;
}
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
@ -289,3 +294,62 @@ hr.mx_RoomView_myReadMarker {
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: 0;
top: 0;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_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_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

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

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;
> * + * {
> .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}

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

@ -76,7 +76,9 @@ a.mx_Pill {
}
.mx_Emoji {
font-size: 1.8rem;
// Should be 1.8rem for our default 1.4rem message bodies,
// and scale with the size of the surrounding text
font-size: calc(18 / 14 * 1em);
vertical-align: bottom;
}

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

@ -16,13 +16,23 @@ limitations under the License.
*/
@keyframes mx_fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mx_fadeout {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.mx_Tooltip_chevron {

28
res/css/views/messages/_CallEvent.scss
View file

@ -147,30 +147,18 @@ limitations under the License.
align-items: center;
color: $secondary-content;
margin-right: 16px;
gap: 8px;
gap: 12px; // See mx_IncomingCallToast_buttons
min-width: max-content;
.mx_CallEvent_content_button {
padding: 0px 12px;
@mixin CallButton;
padding: 0 12px;
span {
padding: 1px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
span::before {
mask-size: 16px;
width: 16px;
height: 16px;
flex-shrink: 0;
}
}

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

@ -48,7 +48,7 @@ limitations under the License.
cursor: initial;
}
> * {
>* {
white-space: nowrap;
display: inline-block;
position: relative;
@ -102,6 +102,11 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_MessageActionBar_threadButton .mx_Indicator {
background: $links;
animation-iteration-count: infinite;
}
.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}

64
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -17,17 +17,22 @@ limitations under the License.
.mx_ThreadPanel {
display: flex;
flex-direction: column;
height: 100px;
overflow: visible;
.mx_BaseCard_header {
margin-bottom: 12px;
.mx_BaseCard_close,
.mx_BaseCard_back {
width: 24px;
height: 24px;
}
.mx_BaseCard_back {
left: -4px;
}
.mx_BaseCard_close {
right: -4px;
}
@ -66,6 +71,7 @@ limitations under the License.
--size: 24px;
width: var(--size);
height: var(--size);
&::after {
mask-size: var(--size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
@ -99,11 +105,10 @@ limitations under the License.
}
.mx_AutoHideScrollbar {
background: #fff;
background-color: $background;
border-radius: 8px;
width: calc(100% - 16px);
padding-right: 16px;
width: calc(100% - 24px);
padding-right: 18px;
}
&.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
@ -125,13 +130,15 @@ limitations under the License.
padding-right: 0;
}
.mx_EventTile, .mx_GenericEventListSummary {
.mx_EventTile,
.mx_GenericEventListSummary {
// Account for scrollbar when hovering
padding-top: 0;
.mx_ThreadInfo {
position: relative;
padding-right: 11px;
&::after {
content: '';
display: block;
@ -157,6 +164,10 @@ limitations under the License.
.mx_EventTile_e2eIcon {
left: 8px;
}
&:hover .mx_EventTile_line {
box-shadow: unset !important; // don't show the verification left stroke in the thread list
}
}
.mx_MessageComposer {
@ -190,10 +201,6 @@ limitations under the License.
float: right;
}
.mx_ThreadPanel_dropdown[aria-expanded=true]::before {
transform: rotate(180deg);
}
.mx_MessageTimestamp {
font-size: $font-12px;
color: $secondary-content;
@ -220,6 +227,20 @@ limitations under the License.
display: none; // hide the hidden event expand button, not enough space, view source can still be used
}
}
.mx_BaseCard_footer {
text-align: left;
font-size: $font-12px;
align-items: center;
justify-content: end;
gap: 4px;
position: relative;
top: 2px;
.mx_AccessibleButton_kind_link_inline {
color: $secondary-content;
}
}
}
.mx_ThreadPanel_replies {
@ -264,27 +285,31 @@ limitations under the License.
align-items: center;
justify-content: center;
position: absolute;
top: 48px;
bottom: 8px;
left: 8px;
right: 8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
h2 {
color: $primary-content;
font-weight: 600;
font-weight: $font-semi-bold;
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
}
p {
font-size: $font-15px;
color: $secondary-content;
margin: 10px 0;
}
button {
border: none;
background: none;
color: $accent;
font-size: $font-15px;
&:hover,
&:active {
@ -292,6 +317,15 @@ limitations under the License.
cursor: pointer;
}
}
.mx_ThreadPanel_empty_tip {
font-size: $font-12px;
line-height: $font-15px;
>b {
font-weight: $font-semi-bold;
}
}
}
.mx_ThreadPanel_largeIcon {
@ -317,6 +351,7 @@ limitations under the License.
.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
.mx_ContextualMenu {
position: initial;
span:first-of-type {
font-weight: $font-semi-bold;
font-size: inherit;
@ -336,6 +371,7 @@ limitations under the License.
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
&::after {
content: "";
border: inherit;
@ -357,10 +393,12 @@ limitations under the License.
&:hover {
background-color: $event-selected-color;
}
&[aria-checked="true"] {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;

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

@ -148,8 +148,6 @@ $MinWidth: 240px;
width: 50%;
min-width: $MinWidth;
border: $container-border-width solid $widget-menu-bar-bg-color;
border-left-width: 5px;
border-right-width: 5px;
display: flex;
flex-direction: column;
box-sizing: border-box;

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

@ -43,9 +43,11 @@ $left-gutter: 64px;
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');
}
@ -61,16 +63,16 @@ $left-gutter: 64px;
&[data-shape=ThreadsList][data-notification]::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
right: -16px;
top: 6px;
right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
top: 4px;
left: auto;
}
&[data-shape=ThreadsList][data-notification=total]::before {
background-color: $roomtile-default-badge-bg-color;
background-color: $room-icon-unread-color;
}
&[data-shape=ThreadsList][data-notification=highlight]::before {
@ -79,7 +81,6 @@ $left-gutter: 64px;
.mx_ThreadInfo,
.mx_ThreadSummaryIcon {
margin-right: 110px;
margin-left: 64px;
}
@ -115,7 +116,8 @@ $left-gutter: 64px;
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
display: inline-block;
/* anti-zalgo, with overflow hidden */
overflow: hidden;
padding-bottom: 0px;
padding-top: 0px;
@ -142,7 +144,8 @@ $left-gutter: 64px;
clear: both;
}
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
@ -308,11 +311,19 @@ $left-gutter: 64px;
.mx_RoomView_timeline_rr_enabled {
.mx_EventTile[data-layout=group] {
.mx_ThreadInfo,
.mx_ThreadSummaryIcon,
.mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
}
.mx_ThreadInfo {
max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters
}
}
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
}
@ -408,7 +419,8 @@ $left-gutter: 64px;
background-repeat: no-repeat;
background-size: contain;
&::before, &::after {
&::before,
&::after {
content: "";
display: block;
position: absolute;
@ -433,6 +445,7 @@ $left-gutter: 64px;
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $alert;
}
opacity: 1;
}
@ -441,6 +454,7 @@ $left-gutter: 64px;
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-text-primary-color;
}
opacity: 1;
}
@ -479,7 +493,8 @@ $left-gutter: 64px;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: $font-14px;
pre, code {
pre,
code {
font-family: $monospace-font-family !important;
background-color: $codeblock-background-color;
}
@ -492,7 +507,7 @@ $left-gutter: 64px;
pre code {
white-space: pre; // we want code blocks to be scrollable and not wrap
> * {
>* {
display: inline;
}
}
@ -514,6 +529,7 @@ $left-gutter: 64px;
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
& span {
text-align: right;
display: block;
@ -547,18 +563,22 @@ $left-gutter: 64px;
height: 19px;
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_buttonBottom {
top: 33px;
}
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton {
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
.mx_EventTile_expandButton {
mask-size: 75%;
mask-position: center;
@ -674,10 +694,13 @@ $left-gutter: 64px;
}
@media only screen and (max-width: 480px) {
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-left: 0;
margin-right: 0;
}
.mx_EventTile_content {
margin-top: 10px;
margin-right: 0;
@ -692,23 +715,28 @@ $left-gutter: 64px;
mask-position: center;
height: 18px;
min-width: 18px;
background-color: $secondary-content;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_ThreadSummaryIcon {
display: inline-block;
font-size: $font-12px;
color: $secondary-content;
color: $secondary-content !important;
margin-top: 8px;
margin-bottom: 8px;
&::before {
vertical-align: middle;
margin-left: 8px;
margin-right: 8px;
margin-top: -2px;
}
}
.mx_ThreadInfo {
min-width: 267px;
max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters
max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
width: fit-content;
height: 40px;
position: relative;
@ -756,7 +784,8 @@ $left-gutter: 64px;
}
}
&:hover, &:focus {
&:hover,
&:focus {
cursor: pointer;
border-color: $quinary-content;
@ -782,6 +811,9 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_ThreadInfo_sender {
font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_ThreadInfo_content {
@ -792,6 +824,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
font-size: $font-12px;
line-height: $threadInfoLineHeight;
color: $secondary-content;
flex: 1;
}
.mx_ThreadInfo_avatar {
@ -810,9 +843,10 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile[data-shape=ThreadsList] {
--topOffset: 20px;
--leftOffset: 46px;
$borderRadius: 8px;
margin: var(--topOffset) 16px var(--topOffset) 0;
border-radius: 8px;
border-radius: $borderRadius;
display: flex;
flex-flow: wrap;
@ -847,6 +881,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
&::after {
content: unset;
}
margin-bottom: 0;
}
@ -857,7 +892,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
padding-top: 0;
.mx_EventTile_avatar {
top: -4px;
top: 0;
left: 0;
}
@ -892,7 +927,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
width: 100%;
box-sizing: border-box;
padding-left: var(--leftOffset) !important;
padding-bottom: 0;
border-radius: $borderRadius !important; // override 4px
}
.mx_MessageTimestamp {
@ -905,6 +940,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_ThreadView {
display: flex;
flex-direction: column;
max-height: 100%;
.mx_ThreadView_List {
flex: 1;
@ -918,7 +954,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile {
display: flex;
flex-direction: column;
padding-top: 0;
padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events
.mx_EventTile_line {
padding-left: 0;
@ -973,7 +1009,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_UnknownBody,
.mx_MPollBody,
.mx_ReplyChain_wrapper {
margin-left: 36px;
margin-left: 48px;
margin-right: 8px;
.mx_EventTile_content,
@ -997,16 +1033,17 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: calc(6px + $selected-message-border-width);
gap: calc(14px + $selected-message-border-width);
a {
flex: 1;
min-width: none;
min-width: unset;
max-width: 100%;
display: flex;
align-items: center;
.mx_DisambiguatedProfile {
margin-left: 8px;
flex: 1;
}
}
@ -1026,4 +1063,13 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_MessageComposer_sendMessage {
margin-right: 0;
}
.mx_EditMessageComposer {
margin-left: 30px !important; // align start of first letter with that of the event body
}
.mx_EditMessageComposer_buttons {
padding-right: 11px; // align with right edge of input
margin-right: 0; // align with right edge of background
}
}

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

@ -21,9 +21,12 @@ limitations under the License.
.mx_RoomList_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_RoomList_iconCreateNewRoom::before {
.mx_RoomList_iconNewRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomList_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomList_iconAddExistingRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');
}

5
res/css/views/rooms/_RoomListHeader.scss
View file

@ -103,9 +103,12 @@ limitations under the License.
.mx_RoomListHeader_iconStartChat::before {
mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
}
.mx_RoomListHeader_iconCreateRoom::before {
.mx_RoomListHeader_iconNewRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomListHeader_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomListHeader_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
}

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

@ -19,11 +19,12 @@ limitations under the License.
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex;
contain: content; // Not strict as it will break when resizing a sublist vertically
box-sizing: border-box;
// The tile is also a flexbox row itself
display: flex;
font-size: $font-13px;
&.mx_RoomTile_selected,
&:hover,
@ -37,163 +38,136 @@ limitations under the License.
margin-right: 10px;
}
.mx_RoomTile_details {
.mx_RoomTile_titleContainer {
height: 32px;
min-width: 0;
flex-basis: 0;
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the title parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_primaryDetails {
height: 32px;
display: flex;
flex-wrap: wrap;
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;
.mx_RoomTile_titleContainer {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; // spacing to buttons/badges
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
// Create a new column layout flexbox for the title parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile_subtitle {
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
}
.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
&.mx_RoomTile_voiceIndicator_active {
color: $accent;
&::before {
background-color: $accent;
}
}
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
&.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}
}
.mx_RoomTile_voiceChannel {
width: 100%;
display: flex;
align-items: center;
.mx_FacePile {
margin: 6px 0 4px;
}
.mx_RoomTile_connectVoiceButton {
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
.mx_RoomTile_subtitle {
line-height: $font-18px;
color: $secondary-content;
.mx_RoomTile_videoIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $accent;
mask-image: url('$(res)/img/voip/voice-room.svg');
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
&.mx_RoomTile_videoIndicator_active {
color: $accent;
&::before {
background-color: $accent;
}
}
}
.mx_RoomTile_videoParticipants::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/group-members.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 2px;
}
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile_minimized) {
@ -222,10 +196,6 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
.mx_RoomTile_details {
display: none;
}
}
}

15
res/css/views/toasts/_IncomingCallToast.scss
View file

@ -90,27 +90,14 @@ limitations under the License.
gap: 12px;
.mx_IncomingCallToast_button {
height: 24px;
@mixin CallButton;
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 {

121
res/css/views/voip/_VoiceChannelRadio.scss
View file

@ -1,121 +0,0 @@
/*
Copyright 2022 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_VoiceChannelRadio {
background-color: $system;
> .mx_VoiceChannelRadio_statusBar {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 12px;
> .mx_VoiceChannelRadio_titleContainer {
flex-grow: 1;
> .mx_VoiceChannelRadio_status {
font-size: $font-15px;
color: $accent;
&::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 11px;
height: 11px;
background-color: $accent;
mask-image: url('$(res)/img/voip/signal-bars.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_name {
font-size: $font-13px;
color: $secondary-content;
}
}
> .mx_VoiceChannelRadio_disconnectButton::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_controlBar {
display: flex;
border-top: 1px solid $quinary-content;
padding: 12px 16px;
align-items: center;
justify-content: space-between;
> .mx_AccessibleButton {
font-size: $font-15px;
padding: 6px 0;
&.mx_VoiceChannelRadio_button_active {
padding: 6px 12px;
background-color: $quinary-content;
border-radius: 8px;
font-weight: 600;
}
}
> .mx_VoiceChannelRadio_videoButton::before {
content: '';
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_videoButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
> .mx_VoiceChannelRadio_audioButton::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_audioButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
}
}