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

Disallow invalid inline style comments in stylesheets (#9099)

Browse Source
This commit is contained in:
Germain
2022-07-27 14:39:29 +01:00
committed by GitHub
parent 8eeeee1aa2
commit 72c24af5c0
193 changed files with 1520 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/rooms/_AppsDrawer.pcss
+13 -13
View File
@@ -16,14 +16,14 @@ limitations under the License.
*/
$MiniAppTileHeight: 200px;
// TODO this should be 300px but that's too large
/* TODO this should be 300px but that's too large */
$MinWidth: 240px;
.mx_AppsDrawer {
margin: $container-gap-width;
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
/* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
margin-right: calc($container-gap-width / 2);
margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
position: relative;
display: flex;
flex-direction: column;
@@ -44,16 +44,16 @@ $MinWidth: 240px;
.mx_AppsContainer_resizerHandle {
cursor: ns-resize;
// Override styles from library, making the whole area the target area
/* Override styles from library, making the whole area the target area */
width: 100% !important;
height: 100% !important;
// This is positioned directly below frame
/* This is positioned directly below frame */
position: absolute;
bottom: 50% !important; // override from library
bottom: 50% !important; /* override from library */
// We then render the pill handle in an ::after to keep it in the handle's
// area without being a massive line across the screen
/* We then render the pill handle in an ::after to keep it in the handle's */
/* area without being a massive line across the screen */
&::after {
content: '';
position: absolute;
@@ -62,8 +62,8 @@ $MinWidth: 240px;
height: 4px;
bottom: 0;
// Together, these make the bar 64px wide
// These are also overridden from the library
/* Together, these make the bar 64px wide */
/* These are also overridden from the library */
left: calc(50% - 32px);
right: calc(50% - 32px);
}
@@ -81,7 +81,7 @@ $MinWidth: 240px;
top: 50%;
transform: translate(0, -50%);
height: 64px; // to match width of the ones on roomlist
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
@@ -158,7 +158,7 @@ $MinWidth: 240px;
}
.mx_AppTileFullWidth {
width: 100% !important; // to override the inline style set by the resizer
width: 100% !important; /* to override the inline style set by the resizer */
margin: 0;
padding: 0;
border: $container-border-width solid $widget-menu-bar-bg-color;
@@ -377,7 +377,7 @@ $MinWidth: 240px;
position: relative;
height: 100%;
// match bg of border so that the cut corners have the right fill
/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;
border-radius: 8px;
}
res/css/views/rooms/_BasicMessageComposer.pcss
+7 -7
View File
@@ -44,8 +44,8 @@ limitations under the License.
outline: none;
overflow-x: hidden;
// Force caret nodes to be selected in full so that they can be
// navigated through in a single keypress
/* Force caret nodes to be selected in full so that they can be */
/* navigated through in a single keypress */
.caretNode {
user-select: all;
}
@@ -56,22 +56,22 @@ limitations under the License.
span.mx_SpacePill {
user-select: all;
position: relative;
cursor: unset; // We don't want indicate clickability
cursor: unset; /* We don't want indicate clickability */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
// We don't want indicate clickability | To override the overriding of .markdown-body
/* We don't want indicate clickability | To override the overriding of .markdown-body */
background-color: $pill-bg-color !important;
}
// avatar psuedo element
/* avatar psuedo element */
&::before {
display: inline-block;
content: var(--avatar-letter);
width: $font-16px;
min-width: $font-16px; // ensure the avatar is not compressed
min-width: $font-16px; /* ensure the avatar is not compressed */
height: $font-16px;
margin-inline-end: 0.24rem;
background: var(--avatar-background), $background;
@@ -88,7 +88,7 @@ limitations under the License.
}
&.mx_BasicMessageComposer_input_disabled {
// Ignore all user input to avoid accidentally triggering the composer
/* Ignore all user input to avoid accidentally triggering the composer */
pointer-events: none;
}
}
res/css/views/rooms/_E2EIcon.pcss
+4 -4
View File
@@ -39,7 +39,7 @@ limitations under the License.
}
}
// white infill for the transparency
/* white infill for the transparency */
.mx_E2EIcon::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
@@ -48,16 +48,16 @@ limitations under the License.
mask-size: 80%;
}
// transparent-looking border surrounding the shield for when overlain over avatars
/* transparent-looking border surrounding the shield for when overlain over avatars */
.mx_E2EIcon_bordered {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-bg-color;
// shrink the actual badge
/* shrink the actual badge */
&::after {
mask-size: 75%;
}
// shrink the infill of the badge
/* shrink the infill of the badge */
&::before {
mask-size: 60%;
}
res/css/views/rooms/_EditMessageComposer.pcss
+4 -4
View File
@@ -20,7 +20,7 @@ limitations under the License.
display: flex;
flex-direction: column;
max-width: 100%; // disable overflow
max-width: 100%; /* disable overflow */
width: auto;
gap: 5px;
padding: 3px var(--EditMessageComposer-padding-inline);
@@ -33,13 +33,13 @@ limitations under the License.
padding: 3px 6px;
&:focus {
border-color: rgba($accent, 0.5); // Only ever used here
border-color: rgba($accent, 0.5); /* Only ever used here */
}
}
.mx_EditMessageComposer_buttons {
display: flex;
flex-flow: row wrap-reverse; // display "Save" over "Cancel"
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
justify-content: flex-end;
gap: 5px;
margin-inline-start: auto;
@@ -47,7 +47,7 @@ limitations under the License.
.mx_AccessibleButton {
flex: 1;
box-sizing: border-box;
min-width: 100px; // magic number to align the edge of the button with the input area
min-width: 100px; /* magic number to align the edge of the button with the input area */
}
}
}
res/css/views/rooms/_EntityTile.pcss
+2 -2
View File
@@ -31,13 +31,13 @@ limitations under the License.
.mx_EntityTile:hover {
padding-right: 30px;
position: relative; // to keep the chevron aligned
position: relative; /* to keep the chevron aligned */
}
.mx_EntityTile:hover::before {
content: "";
position: absolute;
top: calc(50% - 8px); // center
top: calc(50% - 8px); /* center */
right: -8px;
mask: url('$(res)/img/member_chevron.png');
mask-repeat: no-repeat;
res/css/views/rooms/_EventBubbleTile.pcss
+60 -58
View File
@@ -29,7 +29,7 @@ limitations under the License.
--cornerRadius: 12px;
--maxWidth: 70%;
// For both event tile and event list summary
/* For both event tile and event list summary */
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
@@ -48,7 +48,7 @@ limitations under the License.
font-size: $font-14px;
.mx_MessageTimestamp {
width: unset; // Cancel the default width
width: unset; /* Cancel the default width */
max-width: var(--MessageTimestamp-max-width);
}
@@ -102,32 +102,33 @@ limitations under the License.
--EventBubbleTile_line-max-width: 70%;
width: fit-content;
max-width: var(--EventBubbleTile_line-max-width); // Align message bubble and displayName
line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
max-width: var(--EventBubbleTile_line-max-width); /* Align message bubble and displayName */
line-height: $font-18px; /* fixed line height to prevent emoji from being taller than text */
}
// other users profile on bubble layout
/* other users profile on bubble layout */
> .mx_DisambiguatedProfile {
white-space: normal; // display mxid
white-space: normal; /* display mxid */
.mx_DisambiguatedProfile_displayName {
white-space: nowrap; // truncate long display names
white-space: nowrap; /* truncate long display names */
margin-inline-end: 5px;
// For RTL displayName
/* For RTL displayName */
unicode-bidi: embed;
direction: ltr;
}
.mx_DisambiguatedProfile_mxid {
margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout="bubble"]
margin-inline-start: 0; /* Align mxid with truncated displayName
inside mx_EventTile[data-layout="bubble"] */
}
}
// inside mx_RoomView_MessageList, outside of mx_ReplyTile
// (on the main panel and the chat panel with a maximized widget)
/* inside mx_RoomView_MessageList, outside of mx_ReplyTile */
/* (on the main panel and the chat panel with a maximized widget) */
> .mx_DisambiguatedProfile,
// inside a thread, outside of mx_ReplyTile
/* inside a thread, outside of mx_ReplyTile */
.mx_EventTile_senderDetails > .mx_DisambiguatedProfile {
position: relative;
top: -2px;
@@ -137,11 +138,11 @@ limitations under the License.
.mx_MessageActionBar {
top: -28px;
z-index: 9; // above the avatar
z-index: 9; /* above the avatar */
}
.mx_MediaBody {
// leave space for the timestamp
/* leave space for the timestamp */
padding-right: 48px;
}
@@ -185,7 +186,7 @@ limitations under the License.
.mx_MessageActionBar {
inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
right: initial; // Reset the default value
right: initial; /* Reset the default value */
}
.mx_ThreadSummary {
@@ -216,7 +217,7 @@ limitations under the License.
}
.mx_EventTile_sticker {
// align timestamp with those inside bubbles
/* align timestamp with those inside bubbles */
margin-right: 32px;
}
@@ -238,12 +239,12 @@ limitations under the License.
justify-content: flex-end;
> :last-child {
order: -1; // Moving the "add reaction button" before the reactions
order: -1; /* Moving the "add reaction button" before the reactions */
}
}
.mx_EventTile_avatar {
top: -19px; // height of the sender block
top: -19px; /* height of the sender block */
right: -35px;
}
@@ -267,37 +268,37 @@ limitations under the License.
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);
// the selector here is quite weird because timestamps can appear linked & unlinked and in different places
// in the DOM depending on the specific rendering context
> a, // timestamp wrapper anchor
/* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
/* in the DOM depending on the specific rendering context */
> a, /* timestamp wrapper anchor */
.mx_MessageActionBar + .mx_MessageTimestamp {
position: absolute;
padding: 4px 8px;
bottom: 0;
right: 0;
z-index: 3; // above media and location share maps
z-index: 3; /* above media and location share maps */
}
&.mx_EventTile_mediaLine {
// TODO: Use a common class name instead
/* TODO: Use a common class name instead */
.mx_MFileBody,
.mx_MAudioBody {
max-width: 100%; // avoid overflow
max-width: 100%; /* avoid overflow */
}
.mx_MVoiceMessageBody {
// allow the event to be collapsed, this causes the waveform to get cropped
/* allow the event to be collapsed, this causes the waveform to get cropped */
min-width: 0;
}
// we put the timestamps for media (other than stickers) atop the media
// for images we also apply a linear gradient and change the timestamp colour to aid readability
/* we put the timestamps for media (other than stickers) atop the media */
/* for images we also apply a linear gradient and change the timestamp colour to aid readability */
&.mx_EventTile_image {
.mx_MessageTimestamp {
color: #ffffff; // regardless of theme, always visible on the below gradient
color: #ffffff; /* regardless of theme, always visible on the below gradient */
}
// linear gradient to make the timestamp more visible
/* linear gradient to make the timestamp more visible */
.mx_MImageBody::before {
content: "";
position: absolute;
@@ -313,9 +314,9 @@ limitations under the License.
}
&.mx_EventTile_sticker {
> a, // timestamp wrapper anchor
> a, /* timestamp wrapper anchor */
.mx_MessageActionBar + .mx_MessageTimestamp {
// position timestamps for stickers to the right of the un-bubbled sticker
/* position timestamps for stickers to the right of the un-bubbled sticker */
right: unset;
left: 100%;
}
@@ -334,7 +335,7 @@ limitations under the License.
}
}
//noinspection CssReplaceWithShorthandSafely
/* noinspection CssReplaceWithShorthandSafely */
.mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_MVideoBody .mx_MVideoBody_container,
.mx_MediaBody {
@@ -344,15 +345,16 @@ limitations under the License.
}
.mx_EventTile_e2eIcon {
flex-shrink: 0; // keep it at full size
flex-shrink: 0; /* keep it at full size */
}
}
&:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
// make the top and bottom padding 1px smaller so that we can pad .mx_EventTile_content by 1px
// to avoid anti-zalgo cutting off our larger than text emojis.
/* make the top and bottom padding 1px smaller so that we can pad
.mx_EventTile_content by 1px */
/* to avoid anti-zalgo cutting off our larger than text emojis. */
padding: calc(var(--gutterSize) - 1px);
padding-right: 60px; // space for the timestamp
padding-right: 60px; /* space for the timestamp */
background: var(--backgroundColor);
.mx_EventTile_content {
@@ -441,7 +443,7 @@ limitations under the License.
.mx_EventTile_reply {
max-width: 90%;
padding: 0;
> a, // timestamp wrapper anchor
> a, /* timestamp wrapper anchor */
.mx_MessageActionBar + .mx_MessageTimestamp {
display: none !important;
}
@@ -461,11 +463,11 @@ limitations under the License.
}
.mx_MPollBody {
width: 550px; // to prevent timestamp overlapping summary text
max-width: 100%; // prevent overflowing a reply tile
width: 550px; /* to prevent timestamp overlapping summary text */
max-width: 100%; /* prevent overflowing a reply tile */
.mx_MPollBody_totalVotes {
// align summary text with corner timestamp
/* align summary text with corner timestamp */
padding: 4px 0;
}
}
@@ -490,7 +492,7 @@ limitations under the License.
.mx_EventTile_keyRequestInfo,
.mx_ReplyChain_wrapper,
.mx_ViewSourceEvent {
min-width: 0; // Prevent a grid blowout
min-width: 0; /* Prevent a grid blowout */
}
.mx_EventTile_e2eIcon {
@@ -511,9 +513,9 @@ limitations under the License.
}
&.mx_EventTile_info {
// "Unable To Decrypt" layout for hidden events
/* "Unable To Decrypt" layout for hidden events */
.mx_EventTile_line {
gap: 0 9px; // 9px: margin value of E2E icon
gap: 0 9px; /* 9px: margin value of E2E icon */
align-items: center;
grid-template:
"shield source" auto
@@ -540,14 +542,14 @@ limitations under the License.
--backgroundColor: transparent;
.mx_EventTile_line.mx_EventTile_emote {
padding-right: 60px; // align with bubbles text
padding-right: 60px; /* align with bubbles text */
font-style: italic;
> a { // timestamp anchor wrapper
> a { /* timestamp anchor wrapper */
align-self: center;
bottom: unset;
top: unset;
font-style: normal; // undo italic above
font-style: normal; /* undo italic above */
}
.mx_MEmoteBody {
@@ -559,7 +561,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] {
.mx_EventTile_line > a {
// hide this timestamp as the tile will render its own
/* hide this timestamp as the tile will render its own */
display: none;
}
}
@@ -575,7 +577,7 @@ limitations under the License.
.mx_EventTile_line,
.mx_EventTile_info {
min-width: 100%;
// Preserve alignment with left edge of text in bubbles
/* Preserve alignment with left edge of text in bubbles */
margin: 0;
}
}
@@ -590,16 +592,16 @@ limitations under the License.
.mx_EventTile_avatar {
position: static;
order: -1;
margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
}
.mx_EventTile_e2eIcon {
margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
margin-inline-start: 0; /* mx_EventTile_avatar has margin-inline-end, so margin is not needed here */
align-self: center;
}
.mx_EventTile_line {
> a, // timestamp wrapper anchor
> a, /* timestamp wrapper anchor */
.mx_MessageActionBar + .mx_MessageTimestamp {
right: auto;
left: -77px;
@@ -615,13 +617,13 @@ limitations under the License.
.mx_GenericEventListSummary[data-layout="bubble"] {
.mx_EventTile.mx_EventTile_info .mx_EventTile_line {
// Avoid overflow of event info by cancelling width settings
/* Avoid overflow of event info by cancelling width settings */
width: 100%;
min-width: 0;
max-width: 100%;
}
// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
/* increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button */
&[data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
margin-top: 20px;
}
@@ -631,22 +633,22 @@ limitations under the License.
margin-right: 0;
.mx_MessageActionBar {
// Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
/* Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar */
inset-inline-start: initial;
inset-inline-end: 48px; // align with that of right-column bubbles
inset-inline-end: 48px; /* align with that of right-column bubbles */
}
.mx_ReadReceiptGroup {
// match alignment to RRs of chat bubbles
/* match alignment to RRs of chat bubbles */
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
}
&::before {
inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
}
}
}
.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
flex-direction: column; // restore the centering
flex-direction: column; /* restore the centering */
}
res/css/views/rooms/_EventTile.pcss
+90 -89
View File
@@ -18,7 +18,7 @@ limitations under the License.
$left-gutter: 64px;
.mx_EventTile {
--EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable
--EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */
--EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter;
@@ -68,7 +68,7 @@ $left-gutter: 64px;
.mx_EventTile_content {
&.mx_EditMessageComposer {
// Make sure the formatting bar is visible
/* Make sure the formatting bar is visible */
overflow: visible;
}
}
@@ -93,7 +93,7 @@ $left-gutter: 64px;
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
display: flex;
align-items: center; // on every layout
align-items: center; /* on every layout */
}
}
@@ -119,7 +119,7 @@ $left-gutter: 64px;
}
.mx_EventTile_collapsedCodeBlock {
// !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
/* !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre */
display: block !important;
}
}
@@ -142,7 +142,7 @@ $left-gutter: 64px;
.mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
padding: 0 !important; // override default padding of mx_EventTile_line so that we can be centered
padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
}
.mx_EventTile_msgOption {
@@ -151,7 +151,7 @@ $left-gutter: 64px;
&:hover {
.mx_EventTile_line {
// To avoid bubble events being highlighted
/* To avoid bubble events being highlighted */
background-color: inherit !important;
}
}
@@ -163,7 +163,7 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
// TODO: adjust the values for IRC layout
/* TODO: adjust the values for IRC layout */
--EventTile-box-shadow-offset-x: calc(50px + $selected-message-border-width);
--EventTile-box-shadow-spread-radius: -50px;
.mx_EventTile_e2eIcon {
@@ -220,11 +220,11 @@ $left-gutter: 64px;
}
}
// this is used for the tile for the event which is selected via the URL.
/* this is used for the tile for the event which is selected via the URL. */
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
> .mx_EventTile_line {
// TODO: ultimately we probably want some transition on here.
/* TODO: ultimately we probably want some transition on here. */
box-shadow:
inset var(--EventTile-box-shadow-offset-x) 0 0
var(--EventTile-box-shadow-spread-radius) $accent;
@@ -278,7 +278,7 @@ $left-gutter: 64px;
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
inset-block-start: -0.3rem; // ($irc-line-height - avatar height) / 2
inset-block-start: -0.3rem; /* ($irc-line-height - avatar height) / 2 */
}
}
@@ -296,12 +296,12 @@ $left-gutter: 64px;
}
.mx_ReplyTile .mx_EventTileBubble {
left: unset; // Cancel the value specified above for the tile inside ReplyTile
left: unset; /* Cancel the value specified above for the tile inside ReplyTile */
}
&.mx_EventTile_isEditing > .mx_EventTile_line {
.mx_EditMessageComposer {
// add space for the stroke on box-shadow
/* add space for the stroke on box-shadow */
padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
}
}
@@ -342,9 +342,9 @@ $left-gutter: 64px;
margin-inline-end: 10px;
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up
// See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up */
/* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */
inset-block-start: calc(-$font-22px - 3px);
}
}
@@ -376,7 +376,7 @@ $left-gutter: 64px;
}
.mx_RoomView_timeline_rr_enabled & {
$inline-end-margin: 80px; // TODO: Use a spacing variable
$inline-end-margin: 80px; /* TODO: Use a spacing variable */
.mx_ThreadSummary,
.mx_ThreadSummary_icon,
@@ -386,12 +386,12 @@ $left-gutter: 64px;
}
.mx_ThreadSummary {
// leave space on both left & right gutters
/* leave space on both left & right gutters */
max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px);
}
// on ELS we need the margin to allow interaction with the expand/collapse button
// which is normally in the RR gutter
/* on ELS we need the margin to allow interaction with the expand/collapse button */
/* which is normally in the RR gutter */
}
&.mx_EventTile_continuation {
@@ -417,7 +417,7 @@ $left-gutter: 64px;
.mx_EventTile_line {
padding-block: $spacing-block-start $spacing-block-end;
// 20px: avatar area
/* 20px: avatar area */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
.mx_MessageTimestamp {
@@ -441,16 +441,16 @@ $left-gutter: 64px;
position: absolute;
inset-block-start: auto;
// as close to right gutter without clipping as possible
/* as close to right gutter without clipping as possible */
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
// (EventTileLine.line-height - ReadReceiptGroup.height) / 2
// this centers the ReadReceiptGroup if we’ve got a single line
/* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */
/* this centers the ReadReceiptGroup if we’ve got a single line */
inset-block-end: calc(($font-18px - 24px) / 2);
}
}
.mx_EventTileBubble {
// Timestamps are inside the tile, so the width can be less constrained
/* Timestamps are inside the tile, so the width can be less constrained */
max-width: 600px;
}
@@ -476,22 +476,22 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
.mx_EventTile_line .mx_RedactedBody {
line-height: 1; // remove spacing between lines
line-height: 1; /* remove spacing between lines */
}
}
&[data-layout="irc"] {
.mx_EventTile_line .mx_RedactedBody {
padding-left: 24px; // 25px - 1px
padding-left: 24px; /* 25px - 1px */
&::before {
left: var(--right-padding);
}
}
// Apply only collapsed events block
/* Apply only collapsed events block */
> .mx_EventTile_line {
// 15 px of padding
/* 15 px of padding */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left:
calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding));
@@ -504,7 +504,7 @@ $left-gutter: 64px;
}
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
padding-left: calc($left-gutter + 20px); /* override padding-left $left-gutter */
}
}
}
@@ -538,7 +538,7 @@ $left-gutter: 64px;
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;
pre,
@@ -548,13 +548,13 @@ $left-gutter: 64px;
}
code {
white-space: pre-wrap; // don't collapse spaces in inline code blocks
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}
pre {
// have to use overlay rather than auto otherwise Linux and Windows
// Chrome gets very confused about vertical spacing:
// https://github.com/vector-im/vector-web/issues/754
/* have to use overlay rather than auto otherwise Linux and Windows */
/* Chrome gets very confused about vertical spacing: */
/* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay;
overflow-y: visible;
@@ -563,7 +563,7 @@ $left-gutter: 64px;
}
code {
white-space: pre; // we want code blocks to be scrollable and not wrap
white-space: pre; /* we want code blocks to be scrollable and not wrap */
> * {
display: inline;
@@ -585,7 +585,7 @@ $left-gutter: 64px;
h1,
h2 {
font-size: 1.5em;
border-bottom: none !important; // override GFM
border-bottom: none !important; /* override GFM */
}
a {
@@ -696,7 +696,7 @@ $left-gutter: 64px;
}
}
// selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity
/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */
&.markdown-body img {
object-fit: contain;
object-position: left top;
@@ -711,7 +711,7 @@ $left-gutter: 64px;
}
.mx_EventTile_pre_container {
// For correct positioning of _copyButton (See TextualBody)
/* For correct positioning of _copyButton (See TextualBody) */
position: relative;
&:focus-within,
@@ -725,7 +725,7 @@ $left-gutter: 64px;
max-height: 30vh;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
/* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
@@ -819,7 +819,7 @@ $left-gutter: 64px;
color: red;
text-align: center;
// Remove some of the default tile padding so that the error is centered
/* Remove some of the default tile padding so that the error is centered */
margin-right: 0;
.mx_EventTile_line {
@@ -843,10 +843,10 @@ $left-gutter: 64px;
visibility: visible;
}
// Inverse of the above to *disable* the animation on any indicators. This approach
// is less pretty, but is easier to target because otherwise we need to define the
// animation for when it's shown which means duplicating the style definition in
// multiple places.
/* Inverse of the above to *disable* the animation on any indicators. This approach */
/* is less pretty, but is easier to target because otherwise we need to define the */
/* animation for when it's shown which means duplicating the style definition in */
/* multiple places. */
.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput='keyboard'] :focus-within) {
&:not(.focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
animation: none;
@@ -859,9 +859,9 @@ $left-gutter: 64px;
$borderRadius: 8px;
$padding: $spacing-8;
$hrHeight: 1px;
$notification-dot-size: 8px; // notification dot next to the timestamp
$notification-dot-size: 8px; /* notification dot next to the timestamp */
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); // include the height of horizontal line
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
padding: $padding $spacing-24 $padding $padding;
border-radius: $borderRadius;
@@ -878,22 +878,22 @@ $left-gutter: 64px;
&::after {
$inset-block-start: auto;
$inset-inline-end: calc(32px - $padding);
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
$inset-inline-start: calc(var(--leftOffset) + $padding);
inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;
height: $hrHeight;
background-color: $quinary-content;
pointer-events: none; // disable the message action bar on hover
pointer-events: none; /* disable the message action bar on hover */
}
&::before {
inset: 0;
}
// Display notification dot
/* Display notification dot */
&[data-notification]::before {
$notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row
$notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */
width: $notification-dot-size;
height: $notification-dot-size;
@@ -965,7 +965,7 @@ $left-gutter: 64px;
.mx_ThreadPanel_replies_amount {
@mixin ThreadRepliesAmount;
line-height: var(--EventTile_ThreadSummary-line-height);
font-size: $font-12px; // Same font size as the counter on the main panel
font-size: $font-12px; /* Same font size as the counter on the main panel */
}
.mx_ThreadSummary_content {
@@ -991,19 +991,19 @@ $left-gutter: 64px;
background-color: $system;
}
// ThreadsList has always group layout
/* ThreadsList has always group layout */
&[data-layout="group"]:hover {
.mx_EventTile_line {
background-color: $system; // override $event-selected-color
box-shadow: none; // don't show the verification left stroke in the thread list
background-color: $system; /* override $event-selected-color */
box-shadow: none; /* don't show the verification left stroke in the thread list */
}
}
}
// For style rules of ThreadView, see _ThreadPanel.pcss
/* For style rules of ThreadView, see _ThreadPanel.pcss */
.mx_ThreadView {
--ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
--ThreadView_group_spacing-end: 8px; // same as padding
--ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */
--ThreadView_group_spacing-end: 8px; /* same as padding */
.mx_EventTile {
display: flex;
@@ -1019,26 +1019,27 @@ $left-gutter: 64px;
.mx_EventTile_line,
.mx_ReactionsRow {
padding-inline-start: 0; // Cancel inherited padding value for event message and reactions row
padding-inline-start: 0; /* Cancel inherited padding value for event message and reactions row */
}
.mx_ReactionsRow {
padding-inline-end: 0;
}
// handling for hidden events (e.g reactions) in the thread view
/* handling for hidden events (e.g reactions) in the thread view */
&.mx_EventTile_info {
.mx_EventTile_avatar {
position: absolute;
top: 1.5px; // Align with hidden event content
top: 1.5px; /* Align with hidden event content */
margin-top: 0;
margin-bottom: 0;
width: 14px; // avatar img size
height: 14px; // avatar img size
width: 14px; /* avatar img size */
height: 14px; /* avatar img size */
}
.mx_ViewSourceEvent_toggle {
display: none; // hide the hidden event expand button, not enough space, view source can still be used
display: none; /* hide the hidden event expand button, not enough
space, view source can still be used */
}
&.mx_EventTile_selected .mx_EventTile_line,
@@ -1051,7 +1052,7 @@ $left-gutter: 64px;
.mx_EventTile_content,
.mx_RedactedBody {
width: auto;
// 14px: avatar width, 6px: 20px - 14px
/* 14px: avatar width, 6px: 20px - 14px */
margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
font-size: $line-height;
}
@@ -1062,12 +1063,12 @@ $left-gutter: 64px;
padding-top: 0;
.mx_EventTile_avatar {
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
z-index: 9; // position above the hover styling
left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */
z-index: 9; /* position above the hover styling */
}
.mx_MessageTimestamp {
top: 2px; // Align with avatar
top: 2px; /* Align with avatar */
}
}
@@ -1085,7 +1086,7 @@ $left-gutter: 64px;
.mx_EventTile_line {
.mx_EventTile_content {
&.mx_EditMessageComposer {
padding-inline-start: 0; // align start of first letter with that of the event body
padding-inline-start: 0; /* align start of first letter with that of the event body */
}
}
}
@@ -1115,29 +1116,29 @@ $left-gutter: 64px;
.mx_ReplyChain_wrapper {
.mx_MLocationBody,
.mx_UnknownBody { // Error message inside ReplyTile
.mx_UnknownBody { /* Error message inside ReplyTile */
margin-inline: unset;
}
}
.mx_EventTile_mediaLine {
// such as MImageBody
/* such as MImageBody */
> div,
> span {
margin-inline-start: var(--ThreadView_group_spacing-start);
margin-inline-end: var(--ThreadView_group_spacing-end);
}
// such as MAudioBody and MFileBody
/* such as MAudioBody and MFileBody */
> span {
display: block; // Apply the margin declarations to span element
display: block; /* Apply the margin declarations to span element */
}
}
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: $spacing-16; // gap between the avatar and the sender ID
gap: $spacing-16; /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8;
a {
@@ -1155,8 +1156,8 @@ $left-gutter: 64px;
}
.mx_MessageTimestamp {
position: absolute; // for IRC layout
top: 2px; // Align with mx_EventTile_content
position: absolute; /* for IRC layout */
top: 2px; /* Align with mx_EventTile_content */
}
&:hover {
@@ -1173,11 +1174,11 @@ $left-gutter: 64px;
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; // enable background color on hover
z-index: auto; /* enable background color on hover */
}
.mx_ReactionsRow {
position: relative; // display on hover
position: relative; /* display on hover */
}
.mx_EventTile_line.mx_EventTile_mediaLine {
@@ -1190,7 +1191,7 @@ $left-gutter: 64px;
align-items: flex-end;
.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */
}
}
}
@@ -1200,17 +1201,17 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
> .mx_EventTile_line {
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
padding-inline-start: var(--ThreadView_group_spacing-start); /* align summary text with message text */
padding-inline-end: var(--ThreadView_group_spacing-end); /* align summary text with message text */
}
}
}
}
// Cascading - compact modern layout on the main timeline and the right panel
/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
// Override :not([data-layout="bubble"])
/* Override :not([data-layout="bubble"]) */
&[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
@@ -1225,7 +1226,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_info {
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
font-size: $font-13px;
.mx_EventTile_e2eIcon,
@@ -1241,7 +1242,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_emote {
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1260,7 +1261,7 @@ $left-gutter: 64px;
}
}
// Cascading - apply zero padding to every element including mx_EventTile_emote
/* Cascading - apply zero padding to every element including mx_EventTile_emote */
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
@@ -1279,8 +1280,8 @@ $left-gutter: 64px;
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2rem
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up - 2rem */
inset-block-start: -2rem;
}
}
@@ -1293,7 +1294,7 @@ $left-gutter: 64px;
blockquote,
pre,
table {
margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
}
}
}
@@ -1306,7 +1307,7 @@ $left-gutter: 64px;
}
}
// Media query for mobile UI
/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {
margin-right: 0;
res/css/views/rooms/_IRCLayout.pcss
+9 -8
View File
@@ -26,7 +26,7 @@ $irc-line-height: $font-18px;
.mx_EventTile {
--EventTile_irc_line-padding-block: 1px;
// timestamps are links which shouldn't be underlined
/* timestamps are links which shouldn't be underlined */
> a {
text-decoration: none;
min-width: $MessageTimestamp_width;
@@ -64,7 +64,7 @@ $irc-line-height: $font-18px;
display: flex;
align-items: center;
// Need to use important to override the js provided height and width values.
/* Need to use important to override the js provided height and width values. */
> .mx_BaseAvatar, > .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
@@ -75,7 +75,7 @@ $irc-line-height: $font-18px;
.mx_DisambiguatedProfile {
width: var(--name-width);
margin-inline-end: 0; // override mx_EventTile > *
margin-inline-end: 0; /* override mx_EventTile > * */
order: 2;
flex-shrink: 0;
@@ -88,7 +88,7 @@ $irc-line-height: $font-18px;
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
// Override the inherited margin.
/* Override the inherited margin. */
margin-left: 0;
padding: 0 5px;
}
@@ -130,13 +130,14 @@ $irc-line-height: $font-18px;
.mx_ViewSourceEvent,
.mx_MTextBody {
display: inline-block;
// add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; // Enable -webkit-line-clamp
display: -webkit-box; /* Enable -webkit-line-clamp */
}
}
}
@@ -161,13 +162,13 @@ $irc-line-height: $font-18px;
}
.mx_EventTile.mx_EventTile_info {
.mx_ViewSourceEvent, // For hidden events
.mx_ViewSourceEvent, /* For hidden events */
.mx_TextualEvent {
line-height: $irc-line-height;
}
}
// Suppress highlight thing from the normal Layout.
/* Suppress highlight thing from the normal Layout. */
.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 {
res/css/views/rooms/_JumpToBottomButton.pcss
+5 -5
View File
@@ -19,12 +19,12 @@ limitations under the License.
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
// 12 because height is 50 but button is only 38 = 12+(50-38) = 24
/* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
bottom: 12px;
right: 24px;
width: 38px;
// give it a fixed height so the badge doesn't make
// it taller and pop upwards when visible
/* give it a fixed height so the badge doesn't make */
/* it taller and pop upwards when visible */
height: 50px;
text-align: center;
}
@@ -37,8 +37,8 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-14px;
text-align: center;
// to be able to get it centered
// with text-align in parent
/* to be able to get it centered */
/* with text-align in parent */
display: inline-block;
padding: 0 4px;
color: $accent-fg-color;
res/css/views/rooms/_LinkPreviewWidget.pcss
+3 -3
View File
@@ -27,7 +27,7 @@ limitations under the License.
margin-bottom: 6px;
}
// Exclude mx_LinkPreviewGroup_hide from wrapping
/* Exclude mx_LinkPreviewGroup_hide from wrapping */
.mx_LinkPreviewWidget_wrapImageCaption {
display: flex;
flex-wrap: wrap;
@@ -36,7 +36,7 @@ limitations under the License.
.mx_LinkPreviewWidget_image,
.mx_LinkPreviewWidget_caption {
margin-inline-start: $spacing-16;
min-width: 0; // Prevent blowout
min-width: 0; /* Prevent blowout */
}
.mx_LinkPreviewWidget_image {
@@ -47,7 +47,7 @@ limitations under the License.
.mx_LinkPreviewWidget_caption {
flex: 1;
overflow: hidden; // cause it to wrap rather than clip
overflow: hidden; /* cause it to wrap rather than clip */
}
.mx_LinkPreviewWidget_title,
res/css/views/rooms/_MemberList.pcss
+3 -3
View File
@@ -44,8 +44,8 @@ limitations under the License.
}
.mx_RightPanel_scopeHeader {
// vertically align with position on other right panel cards
// to prevent it bouncing as user navigates right panel
/* vertically align with position on other right panel cards */
/* to prevent it bouncing as user navigates right panel */
margin-top: -8px;
}
}
@@ -66,7 +66,7 @@ limitations under the License.
.mx_MemberList_query {
height: 16px;
// stricter rule to override the one in _common.pcss
/* stricter rule to override the one in _common.pcss */
&[type="text"] {
font-size: $font-12px;
}
res/css/views/rooms/_MessageComposer.pcss
+5 -5
View File
@@ -75,8 +75,8 @@ limitations under the License.
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 20px;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
margin-right: 0; /* Counteract the E2EIcon class */
margin-left: 3px; /* Counteract the E2EIcon class */
width: 12px;
height: 12px;
}
@@ -119,8 +119,8 @@ limitations under the License.
word-break: break-word;
}
// FIXME: rather unpleasant hack to get rid of <p/> margins.
// really we should be mixing in markdown-body from gfm.css instead
/* FIXME: rather unpleasant hack to get rid of <p/> margins. */
/* really we should be mixing in markdown-body from gfm.css instead */
.mx_MessageComposer_editor > :first-child {
margin-top: 0 !important;
}
@@ -172,7 +172,7 @@ limitations under the License.
.mx_MessageComposer_button_highlight {
background: rgba($accent, 0.25);
// make the icon the accent color too
/* make the icon the accent color too */
&::before {
background-color: $accent !important;
}
res/css/views/rooms/_MessageComposerFormatBar.pcss
+2 -2
View File
@@ -24,8 +24,8 @@ limitations under the License.
background-color: $background;
border: 1px solid $input-border-color;
user-select: none;
// equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000)
// but as it appears after them in the DOM, will appear on top.
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
/* but as it appears after them in the DOM, will appear on top. */
z-index: 1000;
&.mx_MessageComposerFormatBar_shown {
res/css/views/rooms/_NotificationBadge.pcss
+11 -11
View File
@@ -19,29 +19,29 @@ limitations under the License.
display: none;
}
// Badges are structured a bit weirdly to work around issues with non-monospace
// font styles. The badge pill is actually a background div and the count floats
// within that. For example:
// ( 99+ ) <-- Rounded pill is a _bg class.
// ^- The count is an element floating within that.
/* Badges are structured a bit weirdly to work around issues with non-monospace */
/* font styles. The badge pill is actually a background div and the count floats */
/* within that. For example: */
/* ( 99+ ) <-- Rounded pill is a _bg class. */
/* ^- The count is an element floating within that. */
&.mx_NotificationBadge_visible {
background-color: $roomtile-default-badge-bg-color;
// Create a flexbox to order the count a bit easier
/* Create a flexbox to order the count a bit easier */
display: flex;
align-items: center;
justify-content: center;
&.mx_NotificationBadge_highlighted {
// TODO: Use a more specific variable
/* TODO: Use a more specific variable */
background-color: $alert;
}
// These are the 3 background types
/* These are the 3 background types */
&.mx_NotificationBadge_dot {
background-color: $primary-content; // increased visibility
background-color: $primary-content; /* increased visibility */
width: 6px;
height: 6px;
@@ -60,12 +60,12 @@ limitations under the License.
border-radius: $font-16px;
}
// The following is the floating badge
/* The following is the floating badge */
.mx_NotificationBadge_count {
font-size: $font-10px;
line-height: $font-14px;
color: #fff; // TODO: Variable
color: #fff; /* TODO: Variable */
}
}
}
res/css/views/rooms/_PinnedEventTile.pcss
+2 -2
View File
@@ -39,7 +39,7 @@ limitations under the License.
.mx_PinnedEventTile_unpinButton,
.mx_PinnedEventTile_message,
.mx_PinnedEventTile_footer {
min-width: 0; // Prevent a grid blowout
min-width: 0; /* Prevent a grid blowout */
}
.mx_PinnedEventTile_senderAvatar {
@@ -93,7 +93,7 @@ limitations under the License.
.mx_PinnedEventTile_timestamp {
color: $secondary-content;
display: unset;
width: unset; // Cancel the default width value
width: unset; /* Cancel the default width value */
}
.mx_AccessibleButton_kind_link {
res/css/views/rooms/_ReadReceiptGroup.pcss
+1 -1
View File
@@ -89,7 +89,7 @@ limitations under the License.
line-height: 15px;
margin: 16px 16px 8px;
font-weight: 600;
// shouldn’t be actually focusable
/* shouldn’t be actually focusable */
outline: none;
}
res/css/views/rooms/_ReplyPreview.pcss
+2 -2
View File
@@ -54,8 +54,8 @@ limitations under the License.
.mx_RoomView_body {
.mx_ReplyPreview {
// Add box-shadow to the reply preview on the main (left) panel only.
// It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
/* Add box-shadow to the reply preview on the main (left) panel only. */
/* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
box-shadow: 0px -16px 32px $composer-shadow-color;
border-radius: 8px 8px 0 0;
}
res/css/views/rooms/_ReplyTile.pcss
+5 -5
View File
@@ -56,7 +56,7 @@ limitations under the License.
}
}
// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
.mx_EventTile_content {
$reply-lines: 2;
@@ -66,16 +66,16 @@ limitations under the License.
-webkit-line-clamp: $reply-lines;
.mx_EventTile_body.mx_EventTile_bigEmoji {
line-height: $font-22px !important; // Same as var(--EventTile_group_line-line-height)
font-size: $font-14px !important; // Override the big emoji override
line-height: $font-22px !important; /* Same as var(--EventTile_group_line-line-height) */
font-size: $font-14px !important; /* Override the big emoji override */
}
// Hide line numbers
/* Hide line numbers */
.mx_EventTile_lineNumbers {
display: none;
}
// Hack to cut content in <pre> tags too
/* Hack to cut content in <pre> tags too */
.mx_EventTile_pre_container > pre {
overflow-x: scroll;
overflow-y: hidden;
res/css/views/rooms/_RoomBreadcrumbs.pcss
+9 -9
View File
@@ -17,7 +17,7 @@ limitations under the License.
.mx_RoomBreadcrumbs {
width: 100%;
// Create a flexbox for the crumbs
/* Create a flexbox for the crumbs */
display: flex;
flex-direction: row;
align-items: flex-start;
@@ -28,25 +28,25 @@ limitations under the License.
width: 32px;
}
// These classes come from the CSSTransition component. There's many more classes we
// could care about, but this is all we worried about for now. The animation works by
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
/* These classes come from the CSSTransition component. There's many more classes we */
/* could care about, but this is all we worried about for now. The animation works by */
/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
/* sliding it into view. */
&.mx_RoomBreadcrumbs-enter {
transform: translateX(-40px); // 32px for the avatar, 8px for the margin
transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
}
&.mx_RoomBreadcrumbs-enter-active {
transform: translateX(0);
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
/* Timing function is as-requested by design. */
/* NOTE: The transition time MUST match the value passed to CSSTransition! */
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs_placeholder {
font-weight: 600;
font-size: $font-14px;
line-height: 32px; // specifically to match the height this is not scaled
line-height: 32px; /* specifically to match the height this is not scaled */
height: 32px;
}
}
res/css/views/rooms/_RoomHeader.pcss
+8 -8
View File
@@ -161,18 +161,18 @@ limitations under the License.
max-height: calc($lineHeight * $lines);
border-bottom: 1px solid transparent;
// to align baseline of topic with room name
/* to align baseline of topic with room name */
margin: 4px 7px 0;
overflow: hidden;
-webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
-webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
-webkit-box-orient: vertical;
display: -webkit-box;
}
.mx_RoomHeader_topic .mx_Emoji {
// Undo font size increase to prevent vertical cropping and ensure the same size
// as in plain text emojis
/* Undo font size increase to prevent vertical cropping and ensure the same size */
/* as in plain text emojis */
font-size: inherit;
}
@@ -198,8 +198,8 @@ limitations under the License.
&::before {
content: '';
position: absolute;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
top: 4px; /* center with parent of 32px */
left: 4px; /* center with parent of 32px */
height: 24px;
width: 24px;
background-color: $icon-button-color;
@@ -240,8 +240,8 @@ limitations under the License.
.mx_RoomHeader_voiceCallButton::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
// The call button SVG is padded slightly differently, so match it up to the size
// of the other icons
/* The call button SVG is padded slightly differently, so match it up to the size */
/* of the other icons */
mask-size: 20px;
mask-position: center;
}
res/css/views/rooms/_RoomInfoLine.pcss
+1 -1
View File
@@ -51,7 +51,7 @@ limitations under the License.
color: inherit;
&::before {
content: "·"; // visual separator
content: "·"; /* visual separator */
margin: 0 6px;
}
}
res/css/views/rooms/_RoomList.pcss
+1 -1
View File
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomList {
padding-right: 7px; // width of the scrollbar, to line things up
padding-right: 7px; /* width of the scrollbar, to line things up */
}
.mx_RoomList_iconPlus::before {
res/css/views/rooms/_RoomPreviewBar.pcss
+7 -7
View File
@@ -35,7 +35,7 @@ limitations under the License.
h3,
.mx_RoomPreviewBar_message p {
// break-word, with fallback to break-all, which is wider supported
/* break-word, with fallback to break-all, which is wider supported */
word-break: break-all;
word-break: break-word;
}
@@ -98,11 +98,11 @@ limitations under the License.
}
}
// With maximised widgets, the panel fits in better when rounded
/* With maximised widgets, the panel fits in better when rounded */
.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2); // Shared with right panel
margin-top: 0; // Already covered by apps drawer
margin-right: calc($container-gap-width / 2); /* Shared with right panel */
margin-top: 0; /* Already covered by apps drawer */
border-radius: 8px;
}
@@ -126,15 +126,15 @@ limitations under the License.
.mx_RoomPreviewBar_actions {
flex-direction: column;
.mx_AccessibleButton {
padding: 7px 50px; // extra wide
padding: 7px 50px; /* extra wide */
}
& > * {
margin-top: 12px;
}
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
// to account for the padding of the primary button which causes inconsistent look between
// subsequent secondary (text) buttons
/* to account for the padding of the primary button which causes inconsistent look between */
/* subsequent secondary (text) buttons */
margin-bottom: 7px;
}
}
res/css/views/rooms/_RoomPreviewCard.pcss
+3 -3
View File
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomPreviewCard {
padding: $spacing-32 $spacing-24 !important; // Override SpaceRoomView's default padding
padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
margin: auto;
flex-grow: 1;
max-width: 480px;
@@ -65,7 +65,7 @@ limitations under the License.
}
}
// XXX Remove this when video rooms leave beta
/* XXX Remove this when video rooms leave beta */
.mx_BetaCard_betaPill {
margin-inline-start: auto;
align-self: start;
@@ -107,7 +107,7 @@ limitations under the License.
}
h1.mx_RoomPreviewCard_name {
margin: $spacing-16 0 !important; // Override SpaceRoomView's default margins
margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
}
.mx_RoomPreviewCard_topic {
res/css/views/rooms/_RoomSublist.pcss
+68 -68
View File
@@ -29,23 +29,23 @@ limitations under the License.
}
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
/* Create a flexbox to make alignment easy */
display: flex;
align-items: center;
// ***************************
// Sticky Headers Start
/* *************************** */
/* Sticky Headers Start */
// Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
// headerContainer, however due to our layout concerns we actually have to
// calculate it manually so we can sticky things in the right places. We also
// target the headerText instead of the container to reduce jumps when scrolling,
// and to help hide the badges/other buttons that could appear on hover. This
// all works by ensuring the header text has a fixed height when sticky so the
// fixed height of the container can maintain the scroll position.
/* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
/* headerContainer, however due to our layout concerns we actually have to */
/* calculate it manually so we can sticky things in the right places. We also */
/* target the headerText instead of the container to reduce jumps when scrolling, */
/* and to help hide the badges/other buttons that could appear on hover. This */
/* all works by ensuring the header text has a fixed height when sticky so the */
/* fixed height of the container can maintain the scroll position. */
// The combined height must be set in the LeftPanel component for sticky headers
// to work correctly.
/* The combined height must be set in the LeftPanel component for sticky headers */
/* to work correctly. */
padding-bottom: 8px;
height: 24px;
color: $tertiary-content;
@@ -58,51 +58,51 @@ limitations under the License.
flex: 1;
max-width: 100%;
// Create a flexbox to make ordering easy
/* Create a flexbox to make ordering easy */
display: flex;
align-items: center;
// We use a generic sticky class for 2 reasons: to reduce style duplication and
// to identify when a header is sticky. If we didn't have a consistent sticky class,
// we'd have to do the "is sticky" checks again on click, as clicking the header
// when sticky scrolls instead of collapses the list.
/* We use a generic sticky class for 2 reasons: to reduce style duplication and */
/* to identify when a header is sticky. If we didn't have a consistent sticky class, */
/* we'd have to do the "is sticky" checks again on click, as clicking the header */
/* when sticky scrolls instead of collapses the list. */
&.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; // to match the header container
// width set by JS because of a compat issue between Firefox and Chrome
height: 32px; /* to match the header container */
/* width set by JS because of a compat issue between Firefox and Chrome */
width: calc(100% - 15px);
}
// We don't have a top style because the top is dependent on the room list header's
// height, and is therefore calculated in JS.
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
/* We don't have a top style because the top is dependent on the room list header's */
/* height, and is therefore calculated in JS. */
/* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
}
// Sticky Headers End
// ***************************
/* Sticky Headers End */
/* *************************** */
.mx_RoomSublist_badgeContainer {
// Create another flexbox row because it's super easy to position the badge this way.
/* Create another flexbox row because it's super easy to position the badge this way. */
display: flex;
align-items: center;
justify-content: center;
// Apply the width and margin to the badge so the container doesn't occupy dead space
/* Apply the width and margin to the badge so the container doesn't occupy dead space */
.mx_NotificationBadge {
// Do not set a width so the badges get properly sized
margin-left: 8px; // same as menu+aux buttons
/* Do not set a width so the badges get properly sized */
margin-left: 8px; /* same as menu+aux buttons */
}
}
&:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
}
}
.mx_RoomSublist_auxButton,
.mx_RoomSublist_menuButton {
margin-left: 8px; // should be the same as the notification badge
margin-left: 8px; /* should be the same as the notification badge */
position: relative;
width: 24px;
height: 24px;
@@ -127,7 +127,7 @@ limitations under the License.
background: $panel-actions;
}
// Hide the menu button by default
/* Hide the menu button by default */
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
@@ -144,12 +144,12 @@ limitations under the License.
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
max-width: calc(100% - 16px); /* 16px is the badge width */
line-height: $font-16px;
font-size: $font-13px;
font-weight: 600;
// Ellipsize any text overflow
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -180,10 +180,10 @@ limitations under the License.
}
}
// In the general case, we reserve space for each sublist header to prevent
// scroll jumps when they become sticky. However, that leaves a gap when
// scrolled to the top above the first sublist (whose header can only ever
// stick to top), so we make sure to exclude the first visible sublist.
/* In the general case, we reserve space for each sublist header to prevent */
/* scroll jumps when they become sticky. However, that leaves a gap when */
/* scrolled to the top above the first sublist (whose header can only ever */
/* stick to top), so we make sure to exclude the first visible sublist. */
&:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
height: 24px;
}
@@ -191,7 +191,7 @@ limitations under the License.
.mx_RoomSublist_resizeBox {
position: relative;
// Create another flexbox column for the tiles
/* Create another flexbox column for the tiles */
display: flex;
flex-direction: column;
overflow: hidden;
@@ -200,23 +200,23 @@ limitations under the License.
flex: 1 0 0;
overflow: hidden;
overflow: clip;
// need this to be flex otherwise the overflow hidden from above
// sometimes vertically centers the clipped list ... no idea why it would do this
// as the box model should be top aligned. Happens in both FF and Chromium
/* need this to be flex otherwise the overflow hidden from above */
/* sometimes vertically centers the clipped list ... no idea why it would do this */
/* as the box model should be top aligned. Happens in both FF and Chromium */
display: flex;
flex-direction: column;
align-self: stretch;
// without this Firefox will prefer pushing the resizer & show more/less button into the overflow
/* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
min-height: 0;
mask-image: linear-gradient(0deg, transparent, black 4px);
}
&.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
// in this state the div can collapse its height entirely in Chromium,
// so prevent that by allowing overflow
/* in this state the div can collapse its height entirely in Chromium, */
/* so prevent that by allowing overflow */
overflow: visible;
// clear the min-height to make it not collapse entirely in a state with no active resizer
/* clear the min-height to make it not collapse entirely in a state with no active resizer */
min-height: unset;
}
@@ -231,20 +231,20 @@ limitations under the License.
width: 100%;
}
// Class name comes from the ResizableBox component
// The hover state needs to use the whole sublist, not just the resizable box,
// so that selector is below and one level higher.
/* Class name comes from the ResizableBox component */
/* The hover state needs to use the whole sublist, not just the resizable box, */
/* so that selector is below and one level higher. */
.mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
// Override styles from library
/* Override styles from library */
max-width: 64px;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
// This is positioned directly below the 'show more' button.
/* This is positioned directly below the 'show more' button. */
position: relative !important;
bottom: 0 !important; // override from library
bottom: 0 !important; /* override from library */
}
&:hover, &.mx_RoomSublist_hasMenuOpen {
@@ -261,12 +261,12 @@ limitations under the License.
line-height: $font-18px;
color: $secondary-content;
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
/* Update the render() function for RoomSublist if these change */
/* Update the ListLayout class for minVisibleTiles if these change. */
height: 24px;
padding-bottom: 4px;
// We create a flexbox to cheat at alignment
/* We create a flexbox to cheat at alignment */
display: flex;
align-items: center;
@@ -280,7 +280,7 @@ limitations under the License.
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
left: -1px; // adjust for image position
left: -1px; /* adjust for image position */
}
.mx_RoomSublist_showMoreButtonChevron,
@@ -323,9 +323,9 @@ limitations under the License.
.mx_RoomSublist_auxButton {
order: 2;
visibility: visible;
width: 32px !important; // !important to override hover styles
height: 32px !important; // !important to override hover styles
margin-left: 0 !important; // !important to override hover styles
width: 32px !important; /* !important to override hover styles */
height: 32px !important; /* !important to override hover styles */
margin-left: 0 !important; /* !important to override hover styles */
background-color: $panel-actions;
margin-top: 8px;
@@ -344,7 +344,7 @@ limitations under the License.
flex-direction: column;
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px; // to center
margin-right: 12px; /* to center */
}
}
@@ -357,15 +357,15 @@ limitations under the License.
.mx_RoomSublist_menuButton {
visibility: visible;
position: absolute;
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
right: 0;
width: 16px;
height: 16px;
border-radius: 0;
z-index: 1; // occlude the list name
z-index: 1; /* occlude the list name */
// This is the same color as the left panel background because it needs
// to occlude the sublist title
/* This is the same color as the left panel background because it needs */
/* to occlude the sublist title */
background-color: $roomlist-bg-color;
&::before {
@@ -376,7 +376,7 @@ limitations under the License.
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
.mx_RoomSublist_menuButton {
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
}
}
}
@@ -390,7 +390,7 @@ limitations under the License.
hr {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; // additional 16px
margin-right: 16px; /* additional 16px */
border: 1px solid $primary-content;
opacity: 0.1;
}
@@ -427,6 +427,6 @@ limitations under the License.
}
.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
width: 32px; // cut off the horizontal lines in the svg
margin-left: 10px; // align with sublist + buttons
width: 32px; /* cut off the horizontal lines in the svg */
margin-left: 10px; /* align with sublist + buttons */
}
res/css/views/rooms/_RoomTile.pcss
+18 -18
View File
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Note: the room tile expects to be in a flexbox column container
/* Note: the room tile expects to be in a flexbox column container */
.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
/* The tile is also a flexbox row itself */
display: flex;
contain: content; // Not strict as it will break when resizing a sublist vertically
contain: content; /* Not strict as it will break when resizing a sublist vertically */
box-sizing: border-box;
font-size: $font-13px;
@@ -47,9 +47,9 @@ limitations under the License.
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; // spacing to buttons/badges
margin-right: 8px; /* spacing to buttons/badges */
// Create a new column layout flexbox for the title parts
/* Create a new column layout flexbox for the title parts */
display: flex;
flex-direction: column;
justify-content: center;
@@ -57,7 +57,7 @@ limitations under the License.
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;
// Ellipsize any text overflow
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -78,39 +78,39 @@ limitations under the License.
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
margin-top: -3px; /* shift the title up a bit more */
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
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
/* 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
/* Create a flexbox to make aligning dot badges easier */
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
margin-right: 2px; /* centering */
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
/* make the smaller dot occupy the same width for centering */
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
/* The context menu buttons are hidden by default */
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
min-width: 20px; /* yay flex */
height: 20px;
margin-top: auto;
margin-bottom: auto;
@@ -131,7 +131,7 @@ limitations under the License.
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
/* 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;
}
@@ -144,7 +144,7 @@ limitations under the License.
&:hover,
&:focus-within,
&.mx_RoomTile_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
/* Hide the badge container on hover because it'll be a menu button */
.mx_RoomTile_badgeContainer {
width: 0;
height: 0;
@@ -169,7 +169,7 @@ limitations under the License.
}
}
// We use these both in context menus and the room tiles
/* We use these both in context menus and the room tiles */
.mx_RoomTile_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
res/css/views/rooms/_SearchBar.pcss
+2 -2
View File
@@ -21,8 +21,8 @@ limitations under the License.
border-bottom: 1px solid $primary-hairline-color;
.mx_SearchBar_input {
// border: 1px solid $input-border-color;
// font-size: $font-15px;
/* border: 1px solid $input-border-color; */
/* font-size: $font-15px; */
flex: 1 1 0;
margin-left: 22px;
}
res/css/views/rooms/_SendMessageComposer.pcss
+11 -11
View File
@@ -19,31 +19,31 @@ limitations under the License.
display: flex;
flex-direction: column;
font-size: $font-14px;
// fixed line height to prevent emoji from being taller than text
/* fixed line height to prevent emoji from being taller than text */
line-height: $font-18px;
justify-content: center;
margin-right: 6px;
// don't grow wider than available space
/* don't grow wider than available space */
min-width: 0;
.mx_BasicMessageComposer {
flex: 1;
display: flex;
flex-direction: column;
// min-height at this level so the mx_BasicMessageComposer_input
// still stays vertically centered when less than 55px.
// We also set this to ensure the voice message recording widget
// doesn't cause a jump.
/* min-height at this level so the mx_BasicMessageComposer_input */
/* still stays vertically centered when less than 55px. */
/* We also set this to ensure the voice message recording widget */
/* doesn't cause a jump. */
min-height: 55px;
.mx_BasicMessageComposer_input {
padding: 3px 0;
// this will center the contenteditable
// in it's parent vertically
// while keeping the autocomplete at the top
// of the composer. The parent needs to be a flex container for this to work.
/* this will center the contenteditable */
/* in it's parent vertically */
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
// max-height at this level so autocomplete doesn't get scrolled too
/* max-height at this level so autocomplete doesn't get scrolled too */
max-height: 140px;
overflow-y: auto;
}
res/css/views/rooms/_Stickers.pcss
+2 -2
View File
@@ -21,8 +21,8 @@
}
iframe {
// Sticker picker depends on the fixed height previously used for all tiles
height: 283px; // height of the popout minus the AppTile menu bar
/* Sticker picker depends on the fixed height previously used for all tiles */
height: 283px; /* height of the popout minus the AppTile menu bar */
}
}
res/css/views/rooms/_ThreadSummary.pcss
+5 -5
View File
@@ -32,7 +32,7 @@ limitations under the License.
.mx_ThreadSummary {
min-width: 267px;
// leave space on both left & right gutters
/* leave space on both left & right gutters */
max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
width: fit-content;
height: 40px;
@@ -46,7 +46,7 @@ limitations under the License.
box-sizing: border-box;
clear: both;
overflow: hidden;
border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
border: 1px solid $system; /* always render a border so the hover effect doesn't require a re-layout */
.mx_ThreadSummary_chevron {
position: absolute;
@@ -55,7 +55,7 @@ limitations under the License.
bottom: 0;
width: 60px;
box-sizing: border-box;
// XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
/* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */
background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
opacity: 0;
@@ -90,7 +90,7 @@ limitations under the License.
&::before {
@mixin ThreadSummaryIcon;
align-self: center; // v-align the threads icon
align-self: center; /* v-align the threads icon */
}
.mx_ThreadSummary_sender,
@@ -121,7 +121,7 @@ limitations under the License.
.mx_MessagePanel_narrow & {
min-width: initial;
max-width: 100%; // prevent overflow
max-width: 100%; /* prevent overflow */
width: initial;
}
}
res/css/views/rooms/_VoiceRecordComposerTile.pcss
+23 -23
View File
@@ -15,12 +15,12 @@ limitations under the License.
*/
.mx_VoiceRecordComposerTile_stop {
// 28px plus a 2px border makes this a 32px square (as intended)
/* 28px plus a 2px border makes this a 32px square (as intended) */
width: 28px;
height: 28px;
border: 2px solid $voice-record-stop-border-color;
border-radius: 32px;
margin-right: 8px; // between us and the waveform component
margin-right: 8px; /* between us and the waveform component */
position: relative;
&::after {
@@ -39,7 +39,7 @@ limitations under the License.
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 8px; // 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;
@@ -62,20 +62,20 @@ limitations under the License.
}
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
// Note: remaining class properties are in the PlayerContainer CSS.
/* Note: remaining class properties are in the PlayerContainer CSS. */
// fixed height to reduce layout jumps with the play button appearing
// https://github.com/vector-im/element-web/issues/18431
/* fixed height to reduce layout jumps with the play button appearing */
/* https://github.com/vector-im/element-web/issues/18431 */
height: 32px;
margin: 6px; // force the composer area to put a gutter around us
margin-right: 12px; // isolate from stop/send button
margin: 6px; /* force the composer area to put a gutter around us */
margin-right: 12px; /* isolate from stop/send button */
position: relative; // important for the live circle
position: relative; /* important for the live circle */
&.mx_VoiceRecordComposerTile_recording {
// We are putting the circle in this padding, so we need +10px from the regular
// padding on the left side.
/* We are putting the circle in this padding, so we need +10px from the regular */
/* padding on the left side. */
padding-left: 22px;
&::before {
@@ -86,24 +86,24 @@ limitations under the License.
width: 10px;
height: 10px;
position: absolute;
left: 12px; // 12px from the left edge for container padding
top: 17px; // vertically center (middle align with clock)
left: 12px; /* 12px from the left edge for container padding */
top: 17px; /* vertically center (middle align with clock) */
border-radius: 10px;
}
}
}
// The keyframes are slightly weird here to help make a ramping/punch effect
// for the recording dot. We start and end at 100% opacity to help make the
// dot feel a bit like a real lamp that is blinking: the animation ends up
// spending a lot of its time showing a steady state without a fade effect.
// This lamp effect extends into why the 0% opacity keyframe is not in the
// midpoint: lamps take longer to turn off than they do to turn on, and the
// extra frames give it a bit of a realistic punch for when the animation is
// ramping back up to 100% opacity.
/* The keyframes are slightly weird here to help make a ramping/punch effect */
/* for the recording dot. We start and end at 100% opacity to help make the */
/* dot feel a bit like a real lamp that is blinking: the animation ends up */
/* spending a lot of its time showing a steady state without a fade effect. */
/* This lamp effect extends into why the 0% opacity keyframe is not in the */
/* midpoint: lamps take longer to turn off than they do to turn on, and the */
/* extra frames give it a bit of a realistic punch for when the animation is */
/* ramping back up to 100% opacity. */
// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
// (intended to be used in a loop for 2s animation speed)
/* Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s */
/* (intended to be used in a loop for 2s animation speed) */
@keyframes recording-pulse {
0% {
opacity: 1;
res/css/views/rooms/_WhoIsTypingTile.pcss
+2 -2
View File
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_WhoIsTypingTile {
margin-left: -18px; // offset padding from mx_RoomView_MessageList to center avatars
margin-left: -18px; /* offset padding from mx_RoomView_MessageList to center avatars */
padding-top: 18px;
display: flex;
align-items: center;
@@ -23,7 +23,7 @@ limitations under the License.
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_avatars {
flex: 0 0 82px; // 18 (padding on message list) + 64 (padding on event lines)
flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
text-align: center;
}