sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge branch 'develop' into travis/remove-skinning

Browse Source
This commit is contained in:
Travis Ralston
2022-04-05 10:50:37 -06:00
parent ac65e5fd2f 694c39e72d
commit 4057833036
74 changed files with 1412 additions and 1717 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.scss
+22
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;
}
}
}
res/css/_components.scss
-1
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";
res/css/structures/_RightPanel.scss
+21 -35
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;
}
res/css/structures/_RoomView.scss
+77 -13
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;
}
}
res/css/views/elements/_FacePile.scss
+1 -1
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;
}
res/css/views/elements/_RichText.scss
+3 -1
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;
}
res/css/views/elements/_Tooltip.scss
+14 -4
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 {
res/css/views/messages/_CallEvent.scss
+8 -20
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;
}
}
res/css/views/messages/_MessageActionBar.scss
+6 -1
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');
}
res/css/views/right_panel/_ThreadPanel.scss
+51 -13
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;
res/css/views/rooms/_AppsDrawer.scss
-2
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;
res/css/views/rooms/_EventTile.scss
+70 -24
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
}
}
res/css/views/rooms/_RoomList.scss
+4 -1
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');
}
res/css/views/rooms/_RoomListHeader.scss
+4 -1
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');
}
res/css/views/rooms/_RoomTile.scss
+113 -143
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;
}
}
}
res/css/views/toasts/_IncomingCallToast.scss
+1 -14
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 {
res/css/views/voip/_VoiceChannelRadio.scss
-121
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');
}
}
}
res/img/betas/threads.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

res/img/element-icons/roomlist/hash-video.svg
+5
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 fill-rule="evenodd" clip-rule="evenodd" d="M10.393 1.00259C10.9421 1.06119 11.3398 1.55389 11.2812 2.10306L11.0245 4.50854H12.8482C13.4004 4.50854 13.8482 4.95625 13.8482 5.50854C13.8482 6.06082 13.4004 6.50854 12.8482 6.50854H10.811L10.7408 7.16666H8.72946L8.79969 6.50854H5.36671L5.01796 9.77648H6V11.7765H4.80452L4.55614 14.1039C4.49753 14.653 4.00484 15.0507 3.45567 14.9921C2.9065 14.9335 2.50883 14.4408 2.56743 13.8916L2.79316 11.7765H1.00049C0.448204 11.7765 0.000488281 11.3288 0.000488281 10.7765C0.000488281 10.2242 0.448204 9.77648 1.00049 9.77648H3.0066L3.35535 6.50854H1.64186C1.08958 6.50854 0.641865 6.06082 0.641865 5.50854C0.641865 4.95625 1.08958 4.50854 1.64186 4.50854H3.56879L3.84815 1.89082C3.90676 1.34166 4.39946 0.943979 4.94862 1.00259C5.49779 1.06119 5.89547 1.55389 5.83686 2.10306L5.58015 4.50854H9.01313L9.29249 1.89082C9.3511 1.34166 9.8438 0.943979 10.393 1.00259Z" fill="black"/>
<path d="M7.82868 9.10489C7.37101 9.10489 7 9.4759 7 9.93357V12.6958C7 13.1535 7.37101 13.5245 7.82868 13.5245H10.8672C11.3248 13.5245 11.6959 13.1535 11.6959 12.6958V9.93357C11.6959 9.4759 11.3248 9.10489 10.8672 9.10489H7.82868Z" fill="#17191C"/>
<path d="M13.1807 9.74015L12.2483 10.486V12.1434L13.1807 12.8893C13.3615 13.034 13.6294 12.9052 13.6294 12.6736V9.95584C13.6294 9.72423 13.3615 9.59546 13.1807 9.74015Z" fill="#17191C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

res/img/voip/voice-room.svg
-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5203 22.4387C18.4279 22.4387 23.217 17.6492 23.217 11.7411C23.217 5.83295 18.4279 1.04346 12.5203 1.04346C6.61261 1.04346 1.82353 5.83295 1.82353 11.7411C1.82353 13.3962 2.19936 14.9635 2.87032 16.3623L0.795333 23.1065C0.727424 23.3273 0.934782 23.5337 1.1552 23.4648L7.85572 21.3707C9.26544 22.055 10.848 22.4387 12.5203 22.4387ZM5.68079 11.6412C5.68079 11.3264 5.93601 11.0712 6.25083 11.0712C6.56566 11.0712 6.82088 11.3264 6.82088 11.6412V12.5533C6.82088 12.8681 6.56566 13.1233 6.25083 13.1233C5.93601 13.1233 5.68079 12.8681 5.68079 12.5533V11.6412ZM18.7919 11.0712C18.477 11.0712 18.2218 11.3264 18.2218 11.6412V12.5533C18.2218 12.8681 18.477 13.1233 18.7919 13.1233C19.1067 13.1233 19.3619 12.8681 19.3619 12.5533V11.6412C19.3619 11.3264 19.1067 11.0712 18.7919 11.0712ZM8.189 10.045C8.189 9.73017 8.44422 9.47495 8.75905 9.47495C9.07388 9.47495 9.3291 9.73017 9.3291 10.045V14.3774C9.3291 14.6922 9.07388 14.9474 8.75905 14.9474C8.44422 14.9474 8.189 14.6922 8.189 14.3774V10.045ZM16.2836 9.47495C15.9688 9.47495 15.7136 9.73017 15.7136 10.045V14.3774C15.7136 14.6922 15.9688 14.9474 16.2836 14.9474C16.5985 14.9474 16.8537 14.6922 16.8537 14.3774V10.045C16.8537 9.73017 16.5985 9.47495 16.2836 9.47495ZM10.6972 7.30882C10.6972 6.99399 10.9524 6.73877 11.2672 6.73877C11.582 6.73877 11.8373 6.99399 11.8373 7.30882V16.4296C11.8373 16.7444 11.582 16.9996 11.2672 16.9996C10.9524 16.9996 10.6972 16.7444 10.6972 16.4296V7.30882ZM13.7754 6.73877C13.4606 6.73877 13.2054 6.99399 13.2054 7.30882V16.4296C13.2054 16.7444 13.4606 16.9996 13.7754 16.9996C14.0903 16.9996 14.3455 16.7444 14.3455 16.4296V7.30882C14.3455 6.99399 14.0903 6.73877 13.7754 6.73877Z" fill="#737D8C"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

res/themes/dark/css/_dark.scss
+5
View File
@@ -79,6 +79,11 @@ $settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color;
// ********************
// Room
// ********************
$room-icon-unread-color: #fff;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
res/themes/legacy-dark/css/_legacy-dark.scss
+1
View File
@@ -85,6 +85,7 @@ $roomheader-addroom-bg-color: #3c4556;
$roomheader-addroom-fg-color: $text-primary-color;
$icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$room-icon-unread-color: #fff;
// Legacy theme backports
$accent: #0DBD8B;
res/themes/legacy-light/css/_legacy-light.scss
+1
View File
@@ -127,6 +127,7 @@ $roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color;
$icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e;
$room-icon-unread-color: #737D8C;
// ********************
res/themes/light/css/_light.scss
+27 -6
View File
@@ -8,9 +8,22 @@
/* 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=559%3A120
// ********************
@@ -57,7 +70,7 @@ $icon-button-color: $quaternary-content;
// Colors that aren't in Figma and are theme specific - we need to get rid of these
// ********************
$selection-fg-color: $background;
$yellow-background: #fff8e3;
$yellow-background: #fff8e3;
$secondary-accent-color: #f2f5f8;
$button-fg-color: $background;
$neutral-badge-color: #dbdbdb;
@@ -79,7 +92,8 @@ $event-selected-color: #f6f7f8;
$topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e;
$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$panel-gradient: rgba(242, 245, 248, 0),
rgba(242, 245, 248, 1);
$h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background;
$header-panel-text-primary-color: #91A1C0;
@@ -118,6 +132,11 @@ $settings-profile-button-bg-color: $menu-border-color;
$settings-subsection-fg-color: $muted-fg-color;
// ********************
// Room
// ********************
$room-icon-unread-color: $secondary-content;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
@@ -291,6 +310,7 @@ $focus-brightness: 105%;
:root {
--lp-background-blur: 40px;
}
// ********************
// Icon URLs
@@ -325,8 +345,7 @@ $location-live-secondary-color: #deddfd;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_hover {}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
@@ -350,6 +369,7 @@ $location-live-secondary-color: #deddfd;
color: $accent;
text-decoration: none;
}
// ********************
// diff highlight colors
@@ -361,4 +381,5 @@ $location-live-secondary-color: #deddfd;
.hljs-deletion {
background: #fdd;
}
// ********************