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

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
193 changed files with 1520 additions and 1518 deletions
Download patch file Download diff file Expand all files Collapse all files

8
res/css/views/audio_messages/_AudioPlayer.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
.mx_AudioPlayer_mediaInfo {
flex: 1;
overflow: hidden; // makes the ellipsis on the file name work
overflow: hidden; /* makes the ellipsis on the file name work */
& > * {
display: block;
@ -39,7 +39,7 @@ limitations under the License.
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 4px; // mimics the line-height differences in the Figma
padding-bottom: 4px; /* mimics the line-height differences in the Figma */
}
.mx_AudioPlayer_byline {
@ -58,8 +58,8 @@ limitations under the License.
}
.mx_Clock {
min-width: $font-42px; // for flexbox
padding-left: $spacing-4; // isolate from seek bar
min-width: $font-42px; /* for flexbox */
padding-left: $spacing-4; /* isolate from seek bar */
text-align: justify;
white-space: nowrap;
}

14
res/css/views/audio_messages/_PlayPauseButton.pcss
View file

@ -18,14 +18,14 @@ limitations under the License.
position: relative;
width: 32px;
height: 32px;
min-width: 32px; // for when the button is used in a flexbox
min-height: 32px; // for when the button is used in a flexbox
min-width: 32px; /* for when the button is used in a flexbox */
min-height: 32px; /* for when the button is used in a flexbox */
border-radius: 32px;
background-color: $system;
&::before {
content: '';
position: absolute; // sizing varies by icon
position: absolute; /* sizing varies by icon */
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
@ -38,16 +38,16 @@ limitations under the License.
&.mx_PlayPauseButton_play::before {
width: 13px;
height: 16px;
top: 8px; // center
left: 12px; // center
top: 8px; /* center */
left: 12px; /* center */
mask-image: url('$(res)/img/element-icons/play.svg');
}
&.mx_PlayPauseButton_pause::before {
width: 10px;
height: 12px;
top: 10px; // center
left: 11px; // center
top: 10px; /* center */
left: 11px; /* center */
mask-image: url('$(res)/img/element-icons/pause.svg');
}
}

44
res/css/views/audio_messages/_PlaybackContainer.pcss
View file

@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Dev note: there's no actual component called <PlaybackContainer />. These classes
// are shared amongst multiple voice message components.
/* Dev note: there's no actual component called <PlaybackContainer />. These classes */
/* are shared amongst multiple voice message components. */
// Container for live recording and playback controls
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
// The waveform (right) has a 1px padding on it that we want to account for, otherwise
// inherit from mx_MediaBody
/* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
/* inherit from mx_MediaBody */
padding-right: 11px;
// Cheat at alignment a bit
/* Cheat at alignment a bit */
display: flex;
align-items: center;
contain: content;
// Waveforms are present in live recording only
/* Waveforms are present in live recording only */
.mx_Waveform {
.mx_Waveform_bar {
background-color: $quaternary-content;
@ -38,7 +38,7 @@ limitations under the License.
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress
/* Small animation to remove the mechanical feel of progress */
transition: background-color 250ms ease;
background-color: $secondary-content;
}
@ -46,10 +46,10 @@ limitations under the License.
}
.mx_Clock {
width: $font-42px; // we're not using a monospace font, so fake it
min-width: $font-42px; // force sensible layouts in awkward flexboxes (file panel, for example)
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
padding-left: 8px; // isolate from recording circle / play control
width: $font-42px; /* we're not using a monospace font, so fake it */
min-width: $font-42px; /* force sensible layouts in awkward flexboxes (file panel, for example) */
padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
padding-left: 8px; /* isolate from recording circle / play control */
}
.mx_RecordingPlayback_timelineLayoutMiddle {
@ -58,7 +58,7 @@ limitations under the License.
position: relative;
display: inline-block;
flex: 1;
height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
height: 30px; /* same height as mx_Waveform, needed for automatic vertical centering */
.mx_Waveform {
left: 0;
@ -69,10 +69,10 @@ limitations under the License.
position: absolute;
left: 0;
height: 30px;
top: -2px; // visually vertically centered
top: -2px; /* visually vertically centered */
// Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
// because CSS is weird.
/* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
/* because CSS is weird. */
background: none;
&::before {
background: none;
@ -81,10 +81,10 @@ limitations under the License.
background: none;
}
// Make the thumb easier to see. Like the SeekBar original styles, these need to be
// distinct. We make it transparent so it doesn't show up on the UI, but also larger
// so it's easier to grab by mouse users in some browsers. Most browsers let the user
// move and drag the thumb regardless of hitting the thumb, however.
/* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
/* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
/* so it's easier to grab by mouse users in some browsers. Most browsers let the user */
/* move and drag the thumb regardless of hitting the thumb, however. */
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
@ -97,11 +97,11 @@ limitations under the License.
}
}
// For timeline-rendered playback, the clock is on the other side of the waveform.
/* For timeline-rendered playback, the clock is on the other side of the waveform. */
& + .mx_Clock {
text-align: right;
// Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
/* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
padding: 0;
}
}

52
res/css/views/audio_messages/_SeekBar.pcss
View file

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

26
res/css/views/audio_messages/_Waveform.pcss
View file

@ -16,25 +16,25 @@ limitations under the License.
.mx_Waveform {
position: relative;
height: 30px; // tallest bar can only be 30px
top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
height: 30px; /* tallest bar can only be 30px */
top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
display: flex;
align-items: center; // so the bars grow from the middle
align-items: center; /* so the bars grow from the middle */
overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */
// A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
// with rounded caps.
/* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
/* with rounded caps. */
.mx_Waveform_bar {
width: 0; // 0px width means we'll end up using the border as our width
border: 1px solid transparent; // transparent means we'll use the background colour
border-radius: 2px; // rounded end caps, based on the border
min-height: 0; // like the width, we'll rely on the border to give us height
max-height: 100%; // this makes the `height: 42%` work on the element
margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
width: 0; /* 0px width means we'll end up using the border as our width */
border: 1px solid transparent; /* transparent means we'll use the background colour */
border-radius: 2px; /* rounded end caps, based on the border */
min-height: 0; /* like the width, we'll rely on the border to give us height */
max-height: 100%; /* this makes the `height: 42%` work on the element */
margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
margin-right: 1px;
// background color is handled by the parent components
/* background color is handled by the parent components */
}
}

2
res/css/views/auth/_AuthBody.pcss
View file

@ -119,7 +119,7 @@ limitations under the License.
}
.mx_AuthBody_paddedFooter {
height: 80px; // height of the submit button + register link
height: 80px; /* height of the submit button + register link */
padding-top: 28px;
text-align: center;

16
res/css/views/auth/_InteractiveAuthEntryComponents.pcss
View file

@ -42,14 +42,14 @@ limitations under the License.
width: 100%;
}
// XXX: This should be a common button class
/* XXX: This should be a common button class */
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: $light-fg-color;
cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: #92caad; // Only used here
background-color: #92caad; /* Only used here */
cursor: default;
}
@ -76,18 +76,18 @@ limitations under the License.
}
.mx_InteractiveAuthEntryComponents_emailWrapper {
// "Resend" button/link
/* "Resend" button/link */
.mx_AccessibleButton_kind_link_inline {
// We need this to be an inline-block so positioning works correctly
/* We need this to be an inline-block so positioning works correctly */
display: inline-block !important;
// Spinner as end adornment of the "resend" button/link
/* Spinner as end adornment of the "resend" button/link */
.mx_Spinner {
// Spinners are usually block elements, but we need it as inline element
/* Spinners are usually block elements, but we need it as inline element */
display: inline-flex !important;
// Spinners by default fill all available width, but we don't want that
/* Spinners by default fill all available width, but we don't want that */
width: auto !important;
// We need to center the spinner relative to the button/link
/* We need to center the spinner relative to the button/link */
vertical-align: middle !important;
}
}

22
res/css/views/avatars/_BaseAvatar.pcss
View file

@ -16,15 +16,15 @@ limitations under the License.
.mx_BaseAvatar {
position: relative;
// In at least Firefox, the case of relative positioned inline elements
// (such as mx_BaseAvatar) with absolute positioned children (such as
// mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give
// different results during full reflow of the page vs. incremental reflow
// of small portions. While that's surely a browser bug, we can avoid it by
// using `inline-block` instead of the default `inline`.
// https://github.com/vector-im/element-web/issues/5594
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
/* In at least Firefox, the case of relative positioned inline elements */
/* (such as mx_BaseAvatar) with absolute positioned children (such as */
/* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
/* different results during full reflow of the page vs. incremental reflow */
/* of small portions. While that's surely a browser bug, we can avoid it by */
/* using `inline-block` instead of the default `inline`. */
/* https://github.com/vector-im/element-web/issues/5594 */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
display: inline-block;
user-select: none;
@ -53,9 +53,9 @@ limitations under the License.
background-color: $background;
}
// Percy screenshot test specific CSS
/* Percy screenshot test specific CSS */
@media only percy {
// Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot
/* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
.mx_BaseAvatar_initial {
background-color: $username-variant2-color !important;
border-radius: 125px;

2
res/css/views/avatars/_DecoratedRoomAvatar.pcss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_DecoratedRoomAvatar_icon {
position: absolute;
// the following percentage based sizings are to match the scalable svg mask for the cutout
/* the following percentage based sizings are to match the scalable svg mask for the cutout */
bottom: -6.25%;
right: -6.25%;
margin: 12.5%;

6
res/css/views/beta/_BetaCard.pcss
View file

@ -58,10 +58,10 @@ limitations under the License.
padding: 7px 40px;
width: auto;
flex: 1;
white-space: nowrap; // text might overflow
white-space: nowrap; /* text might overflow */
&:nth-child(1) {
order: 2; // Place feedback button top and right
order: 2; /* Place feedback button top and right */
}
}
}
@ -127,7 +127,7 @@ limitations under the License.
color: $button-primary-fg-color;
display: inline-block;
vertical-align: text-bottom;
word-break: keep-all; // avoid multiple lines on CJK language
word-break: keep-all; /* avoid multiple lines on CJK language */
&.mx_AccessibleButton {
cursor: pointer;

46
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// A context menu that largely fits the | [icon] [label] | format.
/* A context menu that largely fits the | [icon] [label] | format. */
.mx_IconizedContextMenu {
min-width: 146px;
width: max-content;
@ -30,47 +30,47 @@ limitations under the License.
font-weight: $font-semi-bold;
}
// the notFirst class is for cases where the optionList might be under a header of sorts.
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
// To get the right color, we need an opacity modifier which means we have to work
// around the problem. PostCSS doesn't support the opacity() function, and if we
// use something like postcss-functions we quickly run into an issue where the
// function we would define gets passed a CSS variable for custom themes, which
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
/* This is a bit of a hack when we could just use a simple border-top property, */
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
/* To get the right color, we need an opacity modifier which means we have to work */
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
/* use something like postcss-functions we quickly run into an issue where the */
/* function we would define gets passed a CSS variable for custom themes, which */
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
//
// Therefore, we just hack in a line and border the thing ourselves
/* Therefore, we just hack in a line and border the thing ourselves */
&::before {
border-top: 1px solid $primary-content;
opacity: 0.1;
content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding,
// unless we position it absolutely then it does the right thing).
/* Counteract the padding problems (width: 100% ignores the 40px padding, */
/* unless we position it absolutely then it does the right thing). */
width: 100%;
position: absolute;
left: 0;
}
}
// round the top corners of the top button for the hover effect to be bounded
/* round the top corners of the top button for the hover effect to be bounded */
&:first-child .mx_IconizedContextMenu_item:first-child {
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */
}
// round the bottom corners of the bottom button for the hover effect to be bounded
/* round the bottom corners of the bottom button for the hover effect to be bounded */
&:last-child .mx_IconizedContextMenu_item:last-child {
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */
}
// round all corners of the only button for the hover effect to be bounded
/* round all corners of the only button for the hover effect to be bounded */
&:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
border-radius: 8px; // radius matches .mx_ContextualMenu
border-radius: 8px; /* radius matches .mx_ContextualMenu */
}
.mx_IconizedContextMenu_item {
// pad the inside of the button so that the hover background is padded too
/* pad the inside of the button so that the hover background is padded too */
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
@ -78,7 +78,7 @@ limitations under the License.
font-size: $font-15px;
line-height: $font-24px;
// Create a flexbox to more easily define the list items
/* Create a flexbox to more easily define the list items */
display: flex;
align-items: center;
@ -91,17 +91,17 @@ limitations under the License.
cursor: not-allowed;
}
img, .mx_IconizedContextMenu_icon { // icons
img, .mx_IconizedContextMenu_icon { /* icons */
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label { // labels
span.mx_IconizedContextMenu_label { /* labels */
width: 100%;
flex: 1;
// Ellipsize any text overflow
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

4
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_AddExistingToSpace {
.mx_SearchBox {
// To match the space around the title
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
@ -226,7 +226,7 @@ limitations under the License.
display: flex;
margin-top: 12px;
.mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
margin-right: 12px;
}

2
res/css/views/dialogs/_BugReportDialog.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BugReportDialog {
.mx_BugReportDialog_download {
.mx_AccessibleButton_kind_link {
margin-right: 18px; // Space between "Downloading logs..."
margin-right: 18px; /* Space between "Downloading logs..." */
}
}
}

26
res/css/views/dialogs/_CompoundDialog.pcss
View file

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// --------------------------------------------------------------------------------
// DEV NOTE: This stylesheet covers dialogs listed by the compound, including
// over multiple React components. The actual inner contents of the dialog should
// be in their respective stylesheets.
// --------------------------------------------------------------------------------
/* -------------------------------------------------------------------------------- */
/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */
/* over multiple React components. The actual inner contents of the dialog should */
/* be in their respective stylesheets. */
/* -------------------------------------------------------------------------------- */
// Override legacy/default styles for dialogs
/* Override legacy/default styles for dialogs */
.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
padding: 0; // we'll manage it ourselves
padding: 0; /* we'll manage it ourselves */
color: $primary-content;
}
@ -34,7 +34,7 @@ limitations under the License.
display: inline-block;
font-weight: 600;
font-size: $font-24px;
margin: 0; // managed by header class
margin: 0; /* managed by header class */
}
.mx_CompoundDialog_cancelButton {
@ -42,7 +42,7 @@ limitations under the License.
width: 20px;
height: 20px;
// Align with middle of title, 34px from right edge
/* Align with middle of title, 34px from right edge */
position: absolute;
top: 34px;
right: 34px;
@ -69,14 +69,14 @@ limitations under the License.
}
.mx_ScrollableBaseDialog {
width: 544px; // fixed
height: 516px; // fixed
width: 544px; /* fixed */
height: 516px; /* fixed */
.mx_CompoundDialog_content {
height: 349px; // dialogHeight - header - footer
height: 349px; /* dialogHeight - header - footer */
}
.mx_CompoundDialog_footer {
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); // hardcoded colour for both themes
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
}
}

2
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
View file

@ -53,7 +53,7 @@ limitations under the License.
content: '';
position: absolute;
left: 10px;
top: calc(50% - 8px); // vertical centering
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;

8
res/css/views/dialogs/_CreateRoomDialog.pcss
View file

@ -24,7 +24,7 @@ limitations under the License.
cursor: pointer;
color: $accent;
// list-style doesn't do it for webkit
/* list-style doesn't do it for webkit */
&::-webkit-details-marker {
display: none;
}
@ -60,11 +60,11 @@ limitations under the License.
width: 100%;
}
// needed to make the alias field only grow as wide as needed
// as opposed to full width
/* needed to make the alias field only grow as wide as needed */
/* as opposed to full width */
.mx_CreateRoomDialog_aliasContainer {
display: flex;
// put margin on container so it can collapse with siblings
/* put margin on container so it can collapse with siblings */
margin: 24px 0 10px;
.mx_RoomAliasField {

12
res/css/views/dialogs/_DevtoolsDialog.pcss
View file

@ -133,13 +133,13 @@ limitations under the License.
border-collapse: collapse;
th {
// Colour choice: first one autocomplete gave me.
/* Colour choice: first one autocomplete gave me. */
border-bottom: 1px solid $accent;
text-align: left;
}
td, th {
width: 360px; // "feels right" number
width: 360px; /* "feels right" number */
text-overflow: ellipsis;
overflow: hidden;
@ -151,7 +151,7 @@ limitations under the License.
}
tr:hover {
// Colour choice: first one autocomplete gave me.
/* Colour choice: first one autocomplete gave me. */
background-color: $accent;
}
}
@ -178,8 +178,8 @@ limitations under the License.
}
.mx_DevTools_SettingsExplorer_setting {
// override default link button color
// as it is the same as the background highlight
// used on focus
/* override default link button color */
/* as it is the same as the background highlight */
/* used on focus */
color: $links !important;
}

2
res/css/views/dialogs/_FeedbackDialog.pcss
View file

@ -78,7 +78,7 @@ limitations under the License.
}
&::after {
background: $avatar-initial-color; // TODO
background: $avatar-initial-color; /* TODO */
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;

12
res/css/views/dialogs/_ForwardDialog.pcss
View file

@ -44,9 +44,9 @@ limitations under the License.
pointer-events: none;
}
// When forwarding messages from encrypted rooms, EventTile will complain
// that our preview is unencrypted, which doesn't actually matter
// We also hide download links to not encourage users to try interacting
/* When forwarding messages from encrypted rooms, EventTile will complain */
/* that our preview is unencrypted, which doesn't actually matter */
/* We also hide download links to not encourage users to try interacting */
.mx_EventTile_msgOption,
.mx_EventTile_e2eIcon_unencrypted,
.mx_EventTile_e2eIcon_warning,
@ -66,7 +66,7 @@ limitations under the License.
display: contents;
.mx_SearchBox {
// To match the space around the title
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
@ -133,7 +133,7 @@ limitations under the License.
margin-left: 12px;
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
// Hide the "Send" label while preserving button size
/* Hide the "Send" label while preserving button size */
visibility: hidden;
}
@ -142,7 +142,7 @@ limitations under the License.
}
.mx_NotificationBadge {
// Match the failed to send indicator's color with the disabled button
/* Match the failed to send indicator's color with the disabled button */
background-color: $button-danger-disabled-fg-color;
}

8
res/css/views/dialogs/_HostSignupDialog.pcss
View file

@ -19,10 +19,10 @@ limitations under the License.
max-width: 580px;
height: 80vh;
max-height: 600px;
// Ensure dialog borders are always white as the HostSignupDialog
// does not yet support dark mode or theming in general.
// In the future we might want to pass the theme to the called
// iframe, should some hosting provider have that need.
/* Ensure dialog borders are always white as the HostSignupDialog */
/* does not yet support dark mode or theming in general. */
/* In the future we might want to pass the theme to the called */
/* iframe, should some hosting provider have that need. */
background-color: #ffffff;
.mx_HostSignupDialog_info {

50
res/css/views/dialogs/_InviteDialog.pcss
View file

@ -26,13 +26,13 @@ limitations under the License.
.mx_InviteDialog_addressBar {
display: flex;
flex-direction: row;
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
// for the user section gets weird.
margin: $spacing-8 45px 0 0; // TODO: Use a spacing variable
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */
margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
.mx_InviteDialog_editor {
flex: 1;
width: 100%; // Needed to make the Field inside grow
width: 100%; /* Needed to make the Field inside grow */
background-color: $header-panel-bg-color;
border-radius: 4px;
min-height: 25px;
@ -43,14 +43,14 @@ limitations under the License.
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0; // TODO: Use a spacing variable
margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
display: inline-block;
min-width: max-content; // prevent manipulation by flexbox
min-width: max-content; /* prevent manipulation by flexbox */
}
// overrides bunch of our default text input styles
/* overrides bunch of our default text input styles */
> input[type="text"] {
margin: 6px 0 !important; // TODO: Use a spacing variable
margin: 6px 0 !important; /* TODO: Use a spacing variable */
height: 24px;
line-height: $font-24px;
font-size: $font-14px;
@ -67,17 +67,17 @@ limitations under the License.
.mx_InviteDialog_goButton {
min-width: 48px;
margin-inline-start: 10px; // TODO: Use a spacing variable
margin-inline-start: 10px; /* TODO: Use a spacing variable */
height: 25px;
line-height: $font-25px;
}
.mx_InviteDialog_buttonAndSpinner {
.mx_Spinner {
// Width and height are required to trick the layout engine.
/* Width and height are required to trick the layout engine. */
width: 20px;
height: 20px;
margin-inline-start: 5px; // TODO: Use a spacing variable
margin-inline-start: 5px; /* TODO: Use a spacing variable */
display: inline-block;
vertical-align: middle;
}
@ -103,7 +103,7 @@ limitations under the License.
}
.mx_InviteDialog_section_showMore {
margin: 7px 18px; // TODO: Use a spacing variable
margin: 7px 18px; /* TODO: Use a spacing variable */
display: block;
}
}
@ -134,7 +134,7 @@ limitations under the License.
}
.mx_CopyableText.mx_CopyableText_border {
width: unset; // full width
width: unset; /* full width */
margin-bottom: 0;
> a {
@ -146,7 +146,7 @@ limitations under the License.
}
}
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
.mx_InviteDialog_userTile {
margin-inline-end: $spacing-8;
@ -157,7 +157,7 @@ limitations under the License.
height: 24px;
line-height: $font-24px;
padding-inline: $spacing-8;
color: #ffffff; // this is fine without a var because it's for both themes
color: #ffffff; /* this is fine without a var because it's for both themes */
.mx_SearchResultAvatar {
border-radius: 20px;
@ -175,7 +175,7 @@ limitations under the License.
}
.mx_SearchResultAvatar_threepidAvatar {
background-color: #ffffff; // this is fine without a var because it's for both themes
background-color: #ffffff; /* this is fine without a var because it's for both themes */
}
}
@ -186,7 +186,7 @@ limitations under the License.
}
.mx_InviteDialog_other {
// Prevent the dialog from jumping around randomly when elements change.
/* Prevent the dialog from jumping around randomly when elements change. */
display: flex;
flex-direction: column;
height: 600px;
@ -252,7 +252,7 @@ limitations under the License.
.mx_InviteDialog_userSections {
margin-top: $spacing-4;
overflow-y: auto;
padding: 0 45px $spacing-4 0; // TODO: Use a spacing variable
padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
}
.mx_InviteDialog_helpText {
@ -289,7 +289,7 @@ limitations under the License.
.mx_DialPad {
row-gap: $spacing-16;
column-gap: 48px; // TODO: Use a spacing variable
column-gap: 48px; /* TODO: Use a spacing variable */
margin-inline: auto;
}
}
@ -327,7 +327,7 @@ limitations under the License.
align-items: center;
&.mx_InviteDialog_tile--room {
// mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
/* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
grid-template-columns: min-content auto auto;
padding: $spacing-4 $spacing-8;
@ -350,9 +350,9 @@ limitations under the License.
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 6px; // 50%
left: 6px; // 50%
background-color: #ffffff; // this is fine without a var because it's for both themes
top: 6px; /* 50% */
left: 6px; /* 50% */
background-color: #ffffff; /* this is fine without a var because it's for both themes */
}
}
@ -369,7 +369,7 @@ limitations under the License.
}
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; // max-content = avatar width
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
&:last-child {
@ -450,5 +450,5 @@ limitations under the License.
}
.mx_InviteDialog_identityServer {
margin-top: 1em; // TODO: Use a spacing variable
margin-top: 1em; /* TODO: Use a spacing variable */
}

2
res/css/views/dialogs/_LeaveSpaceDialog.pcss
View file

@ -47,7 +47,7 @@ limitations under the License.
content: '';
position: absolute;
left: 10px;
top: calc(50% - 8px); // vertical centering
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;

4
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
View file

@ -31,7 +31,7 @@ limitations under the License.
height: 60vh;
.mx_SearchBox {
// To match the space around the title
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
@ -119,7 +119,7 @@ limitations under the License.
content: '';
position: absolute;
left: 10px;
top: calc(50% - 8px); // vertical centering
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;

4
res/css/views/dialogs/_MessageEditHistoryDialog.pcss
View file

@ -51,9 +51,9 @@ limitations under the License.
text-decoration: underline;
}
// Emulate mx_EventTile[data-layout="group"]
/* Emulate mx_EventTile[data-layout="group"] */
.mx_EventTile {
padding-top: 0 !important; // Override mx_EventTile:not([data-layout="bubble"])
padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */
.mx_MessageTimestamp {
position: absolute;

4
res/css/views/dialogs/_PollCreateDialog.pcss
View file

@ -45,7 +45,7 @@ limitations under the License.
display: flex;
align-items: center;
margin-top: 11px;
margin-bottom: 16px; // 11px from the top will collapse, so this creates a 16px gap between options
margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
.mx_Field {
flex: 1;
@ -79,7 +79,7 @@ limitations under the License.
.mx_PollCreateDialog_addOption {
padding: 0;
margin-bottom: 40px; // arbitrary to create scrollable area under the poll
margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
}
.mx_AccessibleButton_disabled {

8
res/css/views/dialogs/_RoomSettingsDialog.pcss
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// ICONS
// ==========================================================
/* ICONS */
/* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
@ -34,7 +34,7 @@ limitations under the License.
}
.mx_RoomSettingsDialog_bridgesIcon::before {
// This icon is pants, please improve :)
/* This icon is pants, please improve :) */
mask-image: url('$(res)/img/feather-customised/bridge.svg');
}
@ -51,7 +51,7 @@ limitations under the License.
padding-right: 80px;
}
// show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings
/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
mask: url("$(res)/img/feather-customised/image.svg");
mask-repeat: no-repeat;

2
res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
View file

@ -27,7 +27,7 @@ limitations under the License.
padding: 5px;
margin-bottom: $spacing-8;
// border-style around each bridge list item
/* border-style around each bridge list item */
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;

6
res/css/views/dialogs/_ServerOfflineDialog.pcss
View file

@ -38,13 +38,13 @@ limitations under the License.
display: inline-block;
width: 115px;
color: $muted-fg-color;
line-height: 24px; // same as avatar
line-height: 24px; /* same as avatar */
vertical-align: top;
}
.mx_ServerOfflineDialog_content_context_timeline {
display: inline-block;
width: calc(100% - 155px); // 115px timestamp width + 40px right margin
width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
.mx_ServerOfflineDialog_content_context_timeline_header {
span {
@ -58,7 +58,7 @@ limitations under the License.
margin-top: 8px;
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px); // 100px is an arbitrary margin for the button
width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
}
.mx_AccessibleButton {

8
res/css/views/dialogs/_SettingsDialog.pcss
View file

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Not actually a component but things shared by settings components
/* Not actually a component but things shared by settings components */
.mx_UserSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
width: 90vw;
max-width: 1000px;
// set the height too since tabbed view scrolls itself.
/* set the height too since tabbed view scrolls itself. */
height: 80vh;
.mx_TabbedView {
@ -35,8 +35,8 @@ limitations under the License.
display: flex;
flex-direction: column;
// Put some padding on the bottom to avoid the settings tab from
// colliding harshly with the dialog when scrolled down.
/* Put some padding on the bottom to avoid the settings tab from */
/* colliding harshly with the dialog when scrolled down. */
padding-bottom: 100px;
}
}

2
res/css/views/dialogs/_ShareDialog.pcss
View file

@ -24,7 +24,7 @@ limitations under the License.
margin: 10px 0;
.mx_CopyableText {
width: unset; // full width
width: unset; /* full width */
> a {
text-decoration: none;

26
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -20,14 +20,14 @@ limitations under the License.
position: relative;
height: 60%;
padding: 0;
contain: unset; // needed for #mx_SpotlightDialog_keyboardPrompt to not be culled
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
border-radius: 8px;
background-color: $background;
top: -60px; // relative to the top of the modal
top: -60px; /* relative to the top of the modal */
left: 50%;
transform: translateX(-50%);
font-size: $font-12px;
@ -36,13 +36,13 @@ limitations under the License.
kbd {
display: inline-block;
padding: 2px $spacing-4; // TODO: Use a spacing variable
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
color: $tertiary-content;
// To avoid any styling inherent with <kbd> elements
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
@ -76,7 +76,7 @@ limitations under the License.
vertical-align: middle;
color: $primary-content;
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable
padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
&::before {
background-color: $secondary-content;
@ -190,7 +190,7 @@ limitations under the License.
display: flex;
white-space: nowrap;
overflow-x: hidden;
margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
}
.mx_SpotlightDialog_option {
@ -209,7 +209,7 @@ limitations under the License.
text-overflow: ellipsis;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; // maintain centering
margin: 0 9px $spacing-4; /* maintain centering */
}
& + .mx_SpotlightDialog_option {
@ -227,7 +227,7 @@ limitations under the License.
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
padding: 6px $spacing-4; // TODO: Use a spacing variable
padding: 6px $spacing-4; /* TODO: Use a spacing variable */
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
@ -251,11 +251,11 @@ limitations under the License.
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4; // TODO: Use a spacing variable
margin: 2px $spacing-4; /* TODO: Use a spacing variable */
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px; // TODO: Use a spacing variable
margin-top: 9px; /* TODO: Use a spacing variable */
margin-right: $spacing-8;
}
}
@ -370,7 +370,7 @@ limitations under the License.
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable
padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
&::before {
content: "";
@ -471,8 +471,8 @@ limitations under the License.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4; // TODO: Use a spacing variable
// To avoid any styling inherent with <kbd> elements
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: $font-12px;

4
res/css/views/dialogs/_UserSettingsDialog.pcss
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// ICONS
// ==========================================================
/* ICONS */
/* ========================================================== */
.mx_UserSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/element-icons/settings.svg');

6
res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
View file

@ -37,16 +37,16 @@ limitations under the License.
}
.mx_Dialog_buttons {
margin-top: 40px; // double normal
margin-top: 40px; /* double normal */
}
.mx_SettingsFlag {
line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
line-height: calc($font-14px + 7px + 7px); /* 7px top & bottom padding */
color: $muted-fg-color;
font-size: $font-12px;
.mx_ToggleSwitch {
// downsize the switch + ball
/* downsize the switch + ball */
width: $font-32px;
height: $font-15px;

14
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file

@ -23,12 +23,12 @@ limitations under the License.
height: 24px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px; // TODO: spacing variable
top: 5px; /* TODO: spacing variable */
background-color: $primary-content;
}
&.mx_AccessSecretStorageDialog_resetBadge::before {
// The image isn't capable of masking, so we use a background instead.
/* The image isn't capable of masking, so we use a background instead. */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: 24px;
background-color: transparent;
@ -81,7 +81,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px; // TODO: spacing variable
margin-inline-end: 5px; /* TODO: spacing variable */
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@ -104,12 +104,12 @@ limitations under the License.
}
.mx_Dialog_buttons {
$spacingStart: $spacing-24; // 16px icon + 8px padding
$spacingStart: $spacing-24; /* 16px icon + 8px padding */
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px; // TODO: spacing variable
gap: 14px; /* TODO: spacing variable */
.mx_Dialog_buttons_additive {
float: none;
@ -125,7 +125,7 @@ limitations under the License.
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
top: 2px; /* alignment */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
@ -137,7 +137,7 @@ limitations under the License.
}
.mx_Dialog_buttons_row {
gap: $spacing-16; // TODO: needs normalization
gap: $spacing-16; /* TODO: needs normalization */
padding-inline-start: $spacingStart;
}
}

12
res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
View file

@ -15,15 +15,15 @@ limitations under the License.
*/
.mx_CreateCrossSigningDialog {
// Why you ask? Because CompleteSecurityBody is 600px so this is the width
// we end up when in there, but when in our own dialog we set our own width
// so need to fix it to something sensible as otherwise we'd end up either
// really wide or really narrow depending on the phase. I bet you wish you
// never asked.
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
/* we end up when in there, but when in our own dialog we set our own width */
/* so need to fix it to something sensible as otherwise we'd end up either */
/* really wide or really narrow depending on the phase. I bet you wish you */
/* never asked. */
width: 560px;
details .mx_AccessibleButton {
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}

2
res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
View file

@ -77,6 +77,6 @@ limitations under the License.
.mx_CreateKeyBackupDialog {
details .mx_AccessibleButton {
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}

12
res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
View file

@ -16,11 +16,11 @@ limitations under the License.
*/
.mx_CreateSecretStorageDialog {
// Why you ask? Because CompleteSecurityBody is 600px so this is the width
// we end up when in there, but when in our own dialog we set our own width
// so need to fix it to something sensible as otherwise we'd end up either
// really wide or really narrow depending on the phase. I bet you wish you
// never asked.
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
/* we end up when in there, but when in our own dialog we set our own width */
/* so need to fix it to something sensible as otherwise we'd end up either */
/* really wide or really narrow depending on the phase. I bet you wish you */
/* never asked. */
width: 560px;
.mx_SettingsFlag {
@ -39,7 +39,7 @@ limitations under the License.
}
details .mx_AccessibleButton {
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}

4
res/css/views/elements/_AccessibleButton.pcss
View file

@ -38,8 +38,8 @@ limitations under the License.
align-items: center;
justify-content: center;
font-size: $font-14px;
border: none; // override default <button /> styles
word-break: keep-all; // prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
&.mx_AccessibleButton_kind_primary_sm,
&.mx_AccessibleButton_kind_danger_sm,

4
res/css/views/elements/_CopyableText.pcss
View file

@ -32,13 +32,13 @@ limitations under the License.
.mx_CopyableText_copyButton {
flex-shrink: 0;
// using em here to adapt to the local font size
/* using em here to adapt to the local font size */
width: 1em;
height: 1em;
cursor: pointer;
margin-left: 20px;
display: block;
// center to first line
/* center to first line */
position: relative;
top: .15em;

6
res/css/views/elements/_Dropdown.pcss
View file

@ -95,9 +95,9 @@ input.mx_Dropdown_option:focus {
border: 0;
padding-top: 0;
padding-bottom: 0;
// XXX: hack to prevent text box being too big and pushing
// its parent out / overlapping the dropdown arrow. Only really
// works in the Country dropdown.
/* XXX: hack to prevent text box being too big and pushing */
/* its parent out / overlapping the dropdown arrow. Only really */
/* works in the Country dropdown. */
width: 60%;
}

2
res/css/views/elements/_EditableItemList.pcss
View file

@ -51,7 +51,7 @@ limitations under the License.
.mx_EditableItem_item {
flex: auto 1 0;
order: 1;
width: calc(100% - 14px); // leave space for the remove button
width: calc(100% - 14px); /* leave space for the remove button */
overflow-x: hidden;
text-overflow: ellipsis;
}

4
res/css/views/elements/_FacePile.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;
// Overlap the children
/* Overlap the children */
> * + * {
margin-right: -8px;
}
@ -33,7 +33,7 @@ limitations under the License.
}
.mx_BaseAvatar_initial {
margin: 1px; // to offset the border on the image
margin: 1px; /* to offset the border on the image */
}
.mx_FacePile_more {

12
res/css/views/elements/_Field.pcss
View file

@ -42,8 +42,8 @@ limitations under the License.
font-weight: normal;
font-size: $font-14px;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
/* Even without a border here, we still need this avoid overlapping the rounded */
/* corners on the field above. */
border-radius: 4px;
padding: 8px 9px;
color: $primary-content;
@ -57,7 +57,7 @@ limitations under the License.
-webkit-appearance: none;
}
// Can't add pseudo-elements to a select directly, so we use its parent.
/* Can't add pseudo-elements to a select directly, so we use its parent. */
.mx_Field_select::before {
content: "";
position: absolute;
@ -108,11 +108,11 @@ limitations under the License.
left: 0px;
margin: 7px 8px;
padding: 2px;
pointer-events: none; // Allow clicks to fall through to the input
pointer-events: none; /* Allow clicks to fall through to the input */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 20px); // 100% of parent minus margin and padding
max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
}
.mx_Field_labelAlwaysTopLeft label,
@ -183,7 +183,7 @@ limitations under the License.
animation: mx_fadeout 1s 2s forwards;
}
// Customise other components when placed inside a Field
/* Customise other components when placed inside a Field */
.mx_Field .mx_Dropdown_input {
border: initial;

10
res/css/views/elements/_GenericEventListSummary.pcss
View file

@ -42,12 +42,12 @@ limitations under the License.
margin-block: 0;
&[aria-expanded="false"] {
order: 9; // TODO: Remove
order: 9; /* TODO: Remove */
}
&[aria-expanded="true"] {
margin-inline-start: auto; // reduce clickable area
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
margin-inline-start: auto; /* reduce clickable area */
margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
}
}
@ -61,8 +61,8 @@ limitations under the License.
column-gap: 5px;
}
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
/* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
/* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */
&[data-expanded="true"] {
flex-direction: column;
margin: 0;

2
res/css/views/elements/_ImageView.pcss
View file

@ -135,7 +135,7 @@ $button-gap: 24px;
.mx_ImageView_button_close {
padding: calc($button-size - $button-size);
border-radius: 100%;
background: #21262c; // same on all themes
background: #21262c; /* same on all themes */
&::before {
width: $button-size;
height: $button-size;

2
res/css/views/elements/_InlineSpinner.pcss
View file

@ -24,5 +24,5 @@ limitations under the License.
}
.mx_InlineSpinner_icon {
display: inline-block !important; // Override regular mx_Spinner_icon
display: inline-block !important; /* Override regular mx_Spinner_icon */
}

20
res/css/views/elements/_InteractiveTooltip.pcss
View file

@ -29,19 +29,19 @@ limitations under the License.
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 10px; // 8px chevron + 2px spacing
top: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
left: 10px; // 8px chevron + 2px spacing
left: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
right: 10px; // 8px chevron + 2px spacing
right: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; // 8px chevron + 2px spacing
bottom: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip_chevron_top {
@ -55,8 +55,8 @@ limitations under the License.
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
/* by Sebastiano Guerriero (@guerriero_se) */
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_top {
height: 16px;
@ -66,7 +66,7 @@ limitations under the License.
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(135deg);
border-radius: 0 0 0 3px;
top: calc(-8px / 1.414); // sqrt(2) because of rotation
top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
}
}
@ -81,8 +81,8 @@ limitations under the License.
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
/* by Sebastiano Guerriero (@guerriero_se) */
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_bottom {
height: 16px;
@ -92,6 +92,6 @@ limitations under the License.
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
border-radius: 0 0 0 3px;
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
}
}

2
res/css/views/elements/_LabelledCheckbox.pcss
View file

@ -19,7 +19,7 @@ limitations under the License.
flex-direction: row;
.mx_Checkbox {
margin-top: 3px; // visually align with label text
margin-top: 3px; /* visually align with label text */
}
.mx_LabelledCheckbox_labels {

4
res/css/views/elements/_MiniAvatarUploader.pcss
View file

@ -18,14 +18,14 @@ limitations under the License.
position: relative;
width: min-content;
// this isn't a floating tooltip so override some things to not need to bother with z-index and floating
/* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
.mx_Tooltip {
display: inline-block;
position: absolute;
z-index: unset;
width: max-content;
left: 72px;
// top edge starting at 50 % of parent - 50 % of itself -> centered vertically
/* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
top: 50%;
transform: translateY(-50%);
}

24
res/css/views/elements/_Pill.pcss
View file

@ -26,47 +26,47 @@ limitations under the License.
overflow: hidden;
cursor: pointer;
color: $accent-fg-color !important; // To override .markdown-body
background-color: $pill-bg-color !important; // To override .markdown-body
color: $accent-fg-color !important; /* To override .markdown-body */
background-color: $pill-bg-color !important; /* To override .markdown-body */
&.mx_UserPill_me,
&.mx_AtRoomPill {
background-color: $alert !important; // To override .markdown-body
background-color: $alert !important; /* To override .markdown-body */
}
&:hover {
background-color: $pill-hover-bg-color !important; // To override .markdown-body
background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
}
&.mx_UserPill_me:hover {
background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
background-color: #ff6b75 !important; /* To override .markdown-body | same on both themes */
}
// We don't want to indicate clickability
/* We don't want to indicate clickability */
&.mx_AtRoomPill:hover {
background-color: $alert !important; // To override .markdown-body
background-color: $alert !important; /* To override .markdown-body */
cursor: unset;
}
&::before,
.mx_BaseAvatar {
margin-inline-start: -0.3em; // Otherwise the gap is too large
margin-inline-start: -0.3em; /* Otherwise the gap is too large */
margin-inline-end: 0.2em;
min-width: $font-16px; // ensure the avatar is not compressed
min-width: $font-16px; /* ensure the avatar is not compressed */
}
.mx_Pill_linkText {
white-space: nowrap; // enforce the pill text to be a single line
white-space: nowrap; /* enforce the pill text to be a single line */
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none; // ensure clicks on the pills go through the anchor
pointer-events: none; /* ensure clicks on the pills go through the anchor */
}
a& {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-decoration: none !important; // To override .markdown-body
text-decoration: none !important; /* To override .markdown-body */
}
}

4
res/css/views/elements/_ReplyChain.pcss
View file

@ -16,14 +16,14 @@ limitations under the License.
.mx_ReplyChain {
margin: 0 0 $spacing-8 0;
padding: 0 10px; // TODO: Use a spacing variable
padding: 0 10px; /* TODO: Use a spacing variable */
border-left: 2px solid $accent;
border-radius: 2px;
.mx_ReplyChain_show {
&.mx_AccessibleButton_kind_link_inline {
color: unset;
white-space: nowrap; // Enforce 'In reply to' to be a single line
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
&:hover {
color: $links;

12
res/css/views/elements/_RichText.pcss
View file

@ -1,6 +1,6 @@
// XXX: bleurgh, what is this? These classes totally break the component
// naming scheme; it's completely unclear where or how they're being used
// --Matthew
/* XXX: bleurgh, what is this? These classes totally break the component */
/* naming scheme; it's completely unclear where or how they're being used */
/* --Matthew */
.mx_Markdown_BOLD {
font-weight: bold;
@ -13,7 +13,7 @@
// variant seems yield better results.
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
// https://github.com/google/fonts/issues/172
transform: skewX(-14deg);
display: inline-block;
*/
@ -37,8 +37,8 @@
}
.mx_Emoji {
// Should be 1.8rem for our default message bodies, and scale with the
// surrounding text
/* Should be 1.8rem for our default message bodies, and scale with the */
/* surrounding text */
font-size: max($font-18px, 1em);
vertical-align: bottom;
}

12
res/css/views/elements/_RoomAliasField.pcss
View file

@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_RoomAliasField {
// if parent is a flex container, this allows the
// width to be as wide as needed, and not 100%
/* if parent is a flex container, this allows the */
/* width to be as wide as needed, and not 100% */
flex: 0 1 auto;
display: flex;
align-items: stretch;
@ -47,10 +47,10 @@ limitations under the License.
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// this allows the domain name to show
// as long as it doesn't make the input shrink
// if it's too big, it shows an ellipsis
// 180: 28 for prefix, 152 for input
/* this allows the domain name to show */
/* as long as it doesn't make the input shrink */
/* if it's too big, it shows an ellipsis */
/* 180: 28 for prefix, 152 for input */
max-width: calc(100% - 180px);
}
}

6
res/css/views/elements/_SSOButtons.pcss
View file

@ -61,9 +61,9 @@ limitations under the License.
.mx_SSOButton_mini {
box-sizing: border-box;
width: 50px; // 48px + 1px border on all sides
height: 50px; // 48px + 1px border on all sides
min-width: 50px; // prevent crushing by the flexbox
width: 50px; /* 48px + 1px border on all sides */
height: 50px; /* 48px + 1px border on all sides */
min-width: 50px; /* prevent crushing by the flexbox */
padding: 12px;
> img {

2
res/css/views/elements/_SettingsFlag.pcss
View file

@ -55,7 +55,7 @@ limitations under the License.
line-height: $font-15px;
color: $secondary-content;
// Support code/pre elements in settings flag descriptions
/* Support code/pre elements in settings flag descriptions */
pre, code {
font-family: $monospace-font-family !important;
background-color: $rte-code-bg-color;

8
res/css/views/elements/_Slider.pcss
View file

@ -32,7 +32,7 @@ limitations under the License.
position: absolute;
height: 1em;
width: 100%;
padding: 0 0.5em; // half the width of a dot.
padding: 0 0.5em; /* half the width of a dot. */
align-items: center;
}
@ -46,7 +46,7 @@ limitations under the License.
.mx_Slider_selection {
display: flex;
align-items: center;
width: calc(100% - 1em); // 2 * half the width of a dot
width: calc(100% - 1em); /* 2 * half the width of a dot */
height: 1em;
position: absolute;
pointer-events: none;
@ -94,8 +94,8 @@ limitations under the License.
color: $slider-background-color;
}
// The following is a hack to center the labels without adding
// any width to the slider's dots.
/* The following is a hack to center the labels without adding */
/* any width to the slider's dots. */
.mx_Slider_labelContainer {
width: 1em;
}

4
res/css/views/elements/_StyledRadioButton.pcss
View file

@ -47,7 +47,7 @@ limitations under the License.
}
input[type="radio"] {
// Remove the OS's representation
/* Remove the OS's representation */
margin: 0;
padding: 0;
appearance: none;
@ -63,7 +63,7 @@ limitations under the License.
box-sizing: border-box;
height: $font-16px;
width: $font-16px;
margin-left: 2px; // For the highlight on focus
margin-left: 2px; /* For the highlight on focus */
border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px;

12
res/css/views/elements/_TagComposer.pcss
View file

@ -20,19 +20,19 @@ limitations under the License.
.mx_Field {
flex: 1;
margin: 0; // override from field styles
margin: 0; /* override from field styles */
}
.mx_AccessibleButton {
min-width: 70px;
padding: 0 8px; // override from button styles
margin-left: 16px; // distance from <Field>
padding: 0 8px; /* override from button styles */
margin-left: 16px; /* distance from <Field> */
}
.mx_Field,
.mx_Field input,
.mx_AccessibleButton {
// So they look related to each other by feeling the same
/* So they look related to each other by feeling the same */
border-radius: 8px;
}
}
@ -40,7 +40,7 @@ limitations under the License.
.mx_TagComposer_tags {
display: flex;
flex-wrap: wrap;
margin-top: 12px; // this plus 12px from the tags makes 24px from the input
margin-top: 12px; /* this plus 12px from the tags makes 24px from the input */
}
.mx_Tag {
@ -73,7 +73,7 @@ limitations under the License.
.mx_Tag_delete {
border-radius: 50%;
text-align: center;
width: 1.066666em; // 16px;
width: 1.066666em; /* 16px; */
height: 1.066666em;
line-height: 1em;
color: $secondary-content;

6
res/css/views/elements/_Tooltip.pcss
View file

@ -62,7 +62,7 @@ limitations under the License.
display: none;
position: fixed;
border-radius: 8px;
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
z-index: 6000; /* Higher than context menu so tooltips can be used everywhere */
padding: 10px;
pointer-events: none;
line-height: $font-14px;
@ -71,7 +71,7 @@ limitations under the License.
max-width: 300px;
word-break: break-word;
background-color: #21262C; // Same on both themes
background-color: #21262C; /* Same on both themes */
color: $accent-fg-color;
border: 0;
text-align: center;
@ -94,7 +94,7 @@ limitations under the License.
}
}
// These tooltips use an older style with a chevron
/* These tooltips use an older style with a chevron */
.mx_Field_tooltip {
background-color: $menu-bg-color;
color: $primary-content;

12
res/css/views/location/_LocationPicker.pcss
View file

@ -22,10 +22,10 @@ limitations under the License.
display: flex;
flex-direction: column;
// when there are errors loading the map
// the canvas is still inserted
// and can overlap error message/close buttons
// hide it
/* when there are errors loading the map */
/* the canvas is still inserted */
/* and can overlap error message/close buttons */
/* hide it */
&.mx_LocationPicker_hasError {
.maplibregl-canvas-container, .maplibregl-control-container {
display: none;
@ -43,8 +43,8 @@ limitations under the License.
}
.maplibregl-ctrl.maplibregl-ctrl-group {
// place below the close button
// padding-16 + 24px close button + padding-10
/* place below the close button */
/* padding-16 + 24px close button + padding-10 */
margin-top: 50px;
}

10
res/css/views/messages/_CallEvent.pcss
View file

@ -113,7 +113,7 @@ limitations under the License.
display: flex;
flex-direction: column;
gap: $spacing-4;
margin-left: 10px; // To match mx_CallEvent
margin-left: 10px; /* To match mx_CallEvent */
margin-right: 10px;
min-width: 0;
@ -160,8 +160,8 @@ limitations under the License.
flex-wrap: wrap;
align-items: center;
color: $secondary-content;
gap: $spacing-12; // See mx_IncomingCallToast_buttons
margin-inline-start: 42px; // avatar (32px) + mx_CallEvent_info_basic margin (10px)
gap: $spacing-12; /* See mx_IncomingCallToast_buttons */
margin-inline-start: 42px; /* avatar (32px) + mx_CallEvent_info_basic margin (10px) */
word-break: break-word;
max-width: fit-content;
@ -217,7 +217,7 @@ limitations under the License.
.mx_CallEvent {
position: relative;
// 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon)
/* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
right: calc(5px + 14px + 9px);
}
}
@ -236,7 +236,7 @@ limitations under the License.
.mx_IRCLayout {
.mx_CallEvent_wrapper {
.mx_CallEvent {
margin-inline-start: $spacing-4; // display green line
margin-inline-start: $spacing-4; /* display green line */
}
}
}

2
res/css/views/messages/_DisambiguatedProfile.pcss
View file

@ -30,7 +30,7 @@ limitations under the License.
font-weight: 600;
font-size: 1.1rem;
margin-inline-start: 5px;
opacity: 0.5; // Match mx_TextualEvent
opacity: 0.5; /* Match mx_TextualEvent */
color: $primary-content;
}
}

6
res/css/views/messages/_EventTileBubble.pcss
View file

@ -15,12 +15,12 @@ limitations under the License.
*/
.mx_EventTileBubble {
--EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
--EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */
background-color: $dark-panel-bg-color;
padding: 10px; // TODO: Use a spacing variable
padding: 10px; /* TODO: Use a spacing variable */
border-radius: 8px;
// Reserve space for external timestamps, but also cap the width
/* Reserve space for external timestamps, but also cap the width */
max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
box-sizing: border-box;
display: grid;

4
res/css/views/messages/_JumpToDatePicker.pcss
View file

@ -16,8 +16,8 @@ limitations under the License.
.mx_JumpToDatePicker_form {
display: flex;
// This matches the default padding of IconizedContextMenuOption
// (see context_menus/_IconizedContextMenu.pcss)
/* This matches the default padding of IconizedContextMenuOption */
/* (see context_menus/_IconizedContextMenu.pcss) */
padding-top: 12px;
padding-bottom: 12px;
}

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

@ -18,7 +18,7 @@ limitations under the License.
color: $accent;
.mx_MFileBody_download_icon {
// 12px instead of 14px to better match surrounding font size
/* 12px instead of 14px to better match surrounding font size */
width: 12px;
height: 12px;
mask-size: 12px;
@ -93,7 +93,7 @@ limitations under the License.
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
vertical-align: middle;
}
}

30
res/css/views/messages/_MImageBody.pcss
View file

@ -24,23 +24,23 @@ $timeline-image-border-radius: 8px;
padding: $spacing-4;
border-radius: $timeline-image-border-radius;
font-size: $font-15px;
user-select: none; // prevent banner text from being selected
pointer-events: none; // let the cursor go through to the media underneath
user-select: none; /* prevent banner text from being selected */
pointer-events: none; /* let the cursor go through to the media underneath */
// Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early.
/* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
max-width: min(100%, 350px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// Hardcoded colours because it's the same on all themes
/* Hardcoded colours because it's the same on all themes */
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
.mx_MImageBody_placeholder {
// Position the placeholder on top of the thumbnail, so that the reveal animation can work
/* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
position: absolute;
left: 0;
top: 0;
@ -57,7 +57,7 @@ $timeline-image-border-radius: 8px;
.mx_MImageBody_thumbnail_container {
border-radius: $timeline-image-border-radius;
// Necessary for the border radius to apply correctly to the placeholder
/* Necessary for the border radius to apply correctly to the placeholder */
overflow: hidden;
contain: paint;
}
@ -65,14 +65,14 @@ $timeline-image-border-radius: 8px;
.mx_MImageBody_thumbnail {
display: block;
// Force the image to be the full size of the container, even if the
// pixel size is smaller. The problem here is that we don't know what
// thumbnail size the HS is going to give us, but we have to commit to
// a container size immediately and not change it when the image loads
// or we'll get a scroll jump (or have to leave blank space).
// This will obviously result in an upscaled image which will be a bit
// blurry. The best fix would be for the HS to advertise what size thumbnails
// it guarantees to produce.
/* Force the image to be the full size of the container, even if the */
/* pixel size is smaller. The problem here is that we don't know what */
/* thumbnail size the HS is going to give us, but we have to commit to */
/* a container size immediately and not change it when the image loads */
/* or we'll get a scroll jump (or have to leave blank space). */
/* This will obviously result in an upscaled image which will be a bit */
/* blurry. The best fix would be for the HS to advertise what size thumbnails */
/* it guarantees to produce. */
height: 100%;
width: 100%;
}
@ -97,7 +97,7 @@ $timeline-image-border-radius: 8px;
bottom: 0;
right: 0;
// To center the text in the middle of the frame
/* To center the text in the middle of the frame */
display: flex;
align-items: center;
justify-content: center;

2
res/css/views/messages/_MImageReplyBody.pcss
View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_MImageBody_thumbnail_container,
.mx_MImageReplyBody_info {
flex: 1;
min-width: 0; // Prevent a blowout
min-width: 0; /* Prevent a blowout */
}
.mx_MImageReplyBody_info {

2
res/css/views/messages/_MJitsiWidgetEvent.pcss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_EventTileBubble.mx_MJitsiWidgetEvent {
&::before {
background-color: $header-panel-text-primary-color; // XXX: Variable abuse
background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}

6
res/css/views/messages/_MLocationBody.pcss
View file

@ -21,7 +21,7 @@ limitations under the License.
max-width: 100%;
width: 450px;
height: 300px;
z-index: 0; // keeps the entire map under the message action bar
z-index: 0; /* keeps the entire map under the message action bar */
border-radius: $timeline-image-border-radius;
cursor: pointer;
@ -40,10 +40,10 @@ limitations under the License.
}
.mx_DisambiguatedProfile ~ .mx_MLocationBody {
margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442
margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
}
.mx_ReplyTile .mx_MLocationBody {
// Prevent clicking a location within a reply
/* Prevent clicking a location within a reply */
pointer-events: none;
}

8
res/css/views/messages/_MPollBody.pcss
View file

@ -109,7 +109,7 @@ limitations under the License.
}
}
// options not actionable in these states
/* options not actionable in these states */
.mx_MPollBody_option_checked, .mx_MPollBody_option_ended {
pointer-events: none;
}
@ -151,14 +151,14 @@ limitations under the License.
}
}
// Prevent clicking a poll within a reply
/* Prevent clicking a poll within a reply */
.mx_ReplyTile .mx_MPollBody {
pointer-events: none;
}
.mx_MPollBody_option,
// label has cursor: default in user-agent stylesheet
// override
/* label has cursor: default in user-agent stylesheet */
/* override */
.mx_MPollBody_live-option {
cursor: pointer;
}

4
res/css/views/messages/_MStickerBody.pcss
View file

@ -28,14 +28,14 @@ limitations under the License.
text-decoration: none;
text-align: center;
// To center the text in the middle of the frame
/* To center the text in the middle of the frame */
display: flex;
align-items: center;
justify-content: center;
}
.mx_MStickerBody_placeholder {
// centering
/* centering */
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 40px);

6
res/css/views/messages/_MediaBody.pcss
View file

@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// A "media body" is any file upload looking thing, apart from images and videos (they
// have unique styles).
/* A "media body" is any file upload looking thing, apart from images and videos (they */
/* have unique styles). */
.mx_MediaBody {
background-color: $quinary-content;
border-radius: 12px;
max-width: 243px; // use max-width instead of width so it fits within right panels
max-width: 243px; /* use max-width instead of width so it fits within right panels */
color: $secondary-content;
font-size: $font-14px;

30
res/css/views/messages/_MessageActionBar.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
--MessageActionBar-item-hover-background: $panel-actions;
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;
@ -35,20 +35,20 @@ limitations under the License.
top: -32px;
right: 8px;
user-select: none;
// Ensure the action bar appears above other things like the read marker
// and sender avatar (for small screens)
/* Ensure the action bar appears above other things like the read marker */
/* and sender avatar (for small screens) */
z-index: 10;
// Adds a previous event safe area so that you can't accidentally hover the
// previous event while trying to mouse into the action bar or from the
// react button to its tooltip.
/* Adds a previous event safe area so that you can't accidentally hover the */
/* previous event while trying to mouse into the action bar or from the */
/* react button to its tooltip. */
&::before {
content: '';
position: absolute;
// tooltip safe mousing area + tooltip overhang +
// action bar + action bar offset from event
/* tooltip safe mousing area + tooltip overhang + */
/* action bar + action bar offset from event */
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
/* safe area + action bar */
height: calc(20px + 100%);
top: -12px;
left: -58px;
@ -57,10 +57,10 @@ limitations under the License.
/* stylelint-disable-next-line max-line-length */
.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & {
// improve clickability of "collapse" link button on bubble layout by reducing width and height values
// mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available
// mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button
// TODO: use a new class name instead
/* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
/* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
/* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
/* TODO: use a new class name instead */
width: 100%;
height: 100%;
top: 0;
@ -68,7 +68,7 @@ limitations under the License.
}
.mx_EventTile_info .mx_ViewSourceEvent ~ & {
// improve clickability of view source event toggle button by removing vertical safe area
/* improve clickability of view source event toggle button by removing vertical safe area */
width: 100%;
height: 100%;
top: 0;
@ -131,7 +131,7 @@ limitations under the License.
&.mx_MessageActionBar_downloadSpinnerButton {
svg {
display: none; // hide the download icon
display: none; /* hide the download icon */
}
}
}

2
res/css/views/messages/_MessageTimestamp.pcss
View file

@ -20,7 +20,7 @@ limitations under the License.
color: $event-timestamp-color;
font-size: $font-10px;
font-variant-numeric: tabular-nums;
display: block; // enable the width setting below
display: block; /* enable the width setting below */
width: $MessageTimestamp_width;
white-space: nowrap;
user-select: none;

4
res/css/views/messages/_ReactionsRow.pcss
View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_ReactionsRow_addReactionButton {
position: relative;
display: inline-block;
visibility: hidden; // show on hover of the .mx_EventTile
visibility: hidden; /* show on hover of the .mx_EventTile */
width: 24px;
height: 24px;
vertical-align: middle;
@ -41,7 +41,7 @@ limitations under the License.
}
&.mx_ReactionsRow_addReactionButton_active {
visibility: visible; // keep showing whilst the context menu is shown
visibility: visible; /* keep showing whilst the context menu is shown */
}
&:hover, &.mx_ReactionsRow_addReactionButton_active {

8
res/css/views/messages/_ViewSourceEvent.pcss
View file

@ -19,8 +19,8 @@ limitations under the License.
opacity: 0.6;
font-size: $font-12px;
width: 100%;
overflow-x: auto; // Cancel overflow setting of .mx_EventTile_content
line-height: normal; // Align with avatar and E2E icon
overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
line-height: normal; /* Align with avatar and E2E icon */
pre,
code {
@ -34,9 +34,9 @@ limitations under the License.
.mx_ViewSourceEvent_toggle {
visibility: hidden;
// override styles from AccessibleButton
/* override styles from AccessibleButton */
border-radius: 0;
// icon
/* icon */
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: auto 12px;

2
res/css/views/messages/_common_CryptoEvent.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_EventTileBubble.mx_cryptoEvent {
margin: var(--EventTileBubble_margin-block) auto;
// white infill for the transparency
/* white infill for the transparency */
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');

18
res/css/views/right_panel/_BaseCard.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BaseCard {
--BaseCard_padding-inline: $spacing-8;
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable
--BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */
--BaseCard_header-button-size: 24px;
padding: 0 var(--BaseCard_padding-inline);
@ -32,7 +32,7 @@ limitations under the License.
margin: $spacing-4 0 $spacing-12;
> h2 {
margin: 0 44px; // TODO: Use a spacing variable
margin: 0 44px; /* TODO: Use a spacing variable */
font-size: $font-18px;
font-weight: $font-semi-bold;
overflow: hidden;
@ -73,13 +73,13 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
// Header title with the back button
/* Header title with the back button */
~ .mx_BaseCard_header_title {
width: calc(100% - 60px);
margin-inline-start: var(--BaseCard_header-button-size);
.mx_BaseCard_header_title_heading {
margin-inline-start: 6px; // TODO: Use a spacing variable
margin-inline-start: 6px; /* TODO: Use a spacing variable */
}
}
}
@ -135,7 +135,7 @@ limitations under the License.
}
.mx_AutoHideScrollbar {
// collapse the margin into a padding to move the scrollbar into the right gutter
/* collapse the margin into a padding to move the scrollbar into the right gutter */
margin-right: -8px;
padding-right: 8px;
min-height: 0;
@ -158,7 +158,7 @@ limitations under the License.
}
.mx_BaseCard_Button {
padding: 10px; // TODO: Use a spacing variable
padding: 10px; /* TODO: Use a spacing variable */
padding-inline-start: $spacing-12;
margin: 0;
position: relative;
@ -234,8 +234,8 @@ limitations under the License.
font-size: $font-12px;
color: $secondary-content;
padding-top: 10px; // TODO: Use a spacing variable
padding-bottom: 10px; // TODO: Use a spacing variable
padding-top: 10px; /* TODO: Use a spacing variable */
padding-bottom: 10px; /* TODO: Use a spacing variable */
border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
@ -243,7 +243,7 @@ limitations under the License.
.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px; // TODO: Use a spacing variable
right: 22px; /* TODO: Use a spacing variable */
border-bottom-color: $quinary-content;
&::after {

2
res/css/views/right_panel/_PinnedMessagesCard.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
width: max-content;
margin: 0 auto;
// Cancel the default values for non-interactivity
/* Cancel the default values for non-interactivity */
position: unset;
visibility: visible;
cursor: unset;

25
res/css/views/right_panel/_RoomSummaryCard.pcss
View file

@ -47,8 +47,8 @@ limitations under the License.
height: 54px;
border-radius: 50%;
background-color: #737d8c;
margin-top: -3px; // alignment
margin-left: -10px; // overlap
margin-top: -3px; /* alignment */
margin-left: -10px; /* overlap */
border: 3px solid $dark-panel-bg-color;
&::before {
@ -109,14 +109,14 @@ limitations under the License.
.mx_RoomSummaryCard_appsGroup {
.mx_RoomSummaryCard_Button {
// this button is special so we have to override some of the original styling
// as we will be applying it in its children
/* this button is special so we have to override some of the original styling */
/* as we will be applying it in its children */
padding: 0;
height: auto;
color: $tertiary-content;
.mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
padding: 10px 48px 10px 12px; /* based on typical mx_RoomSummaryCard_Button padding */
text-overflow: ellipsis;
overflow: hidden;
@ -135,11 +135,11 @@ limitations under the License.
.mx_RoomSummaryCard_app_options {
position: absolute;
top: 0;
height: 100%; // to give bigger interactive zone
height: 100%; /* to give bigger interactive zone */
width: 24px;
padding: 12px 4px;
box-sizing: border-box;
min-width: 24px; // prevent flexbox crushing
min-width: 24px; /* prevent flexbox crushing */
&:hover {
&::after {
@ -147,7 +147,7 @@ limitations under the License.
position: absolute;
height: 24px;
width: 24px;
top: 8px; // equal to padding-top of parent
top: 8px; /* equal to padding-top of parent */
left: 0;
border-radius: 12px;
background-color: rgba(141, 151, 165, 0.1);
@ -174,7 +174,7 @@ limitations under the License.
}
}
.mx_RoomSummaryCard_app_maximiseToggle {
right: 32px; //24 + 8
right: 32px; /* 24 + 8 */
&::before {
mask-size: 14px;
@ -183,9 +183,8 @@ limitations under the License.
}
.mx_RoomSummaryCard_app_options {
right: 56px; //2*24 + 8
right: 56px; /* 2*24 + 8 */
display: none;
&::before {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
@ -226,8 +225,8 @@ limitations under the License.
}
&::after {
top: 8px; // re-align based on the height change
pointer-events: none; // pass through to the real button
top: 8px; /* re-align based on the height change */
pointer-events: none; /* pass through to the real button */
}
}
}

20
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
}
.mx_ThreadPanel_dropdown {
padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */
border-radius: 4px;
line-height: 1.5;
user-select: none;
@ -55,25 +55,25 @@ limitations under the License.
background-color: $background;
border-radius: 8px;
padding-inline-end: 0;
overflow-y: scroll; // set gap between the thread tile and the right border
overflow-y: scroll; /* set gap between the thread tile and the right border */
height: 100%;
}
.mx_EventTile[data-layout="group"] {
.mx_MessageActionBar {
right: 0;
top: -36px; // 2px above EventTile
z-index: 10; // See _EventTile.pcss
top: -36px; /* 2px above EventTile */
z-index: 10; /* See _EventTile.pcss */
}
}
// For style rules of EventTile in a thread, see _EventTile.pcss
/* For style rules of EventTile in a thread, see _EventTile.pcss */
&.mx_ThreadView {
max-height: 100%;
.mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; // don't displace the composer
min-height: 0; /* don't displace the composer */
flex-grow: 1;
.mx_FileDropTarget {
@ -86,9 +86,9 @@ limitations under the License.
}
}
.mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
.mx_RoomView_messagePanel { /* To avoid the rule from being applied to .mx_ThreadPanel_empty */
.mx_RoomView_messageListWrapper {
width: calc(100% + 6px); // 8px - 2px
width: calc(100% + 6px); /* 8px - 2px */
}
}
@ -100,7 +100,7 @@ limitations under the License.
.mx_EventTile,
.mx_GenericEventListSummary {
// Account for scrollbar when hovering
/* Account for scrollbar when hovering */
padding-top: 0;
.mx_DateSeparator {
@ -160,7 +160,7 @@ limitations under the License.
bottom: 0;
left: 0;
padding: 20px;
box-sizing: border-box; // Include padding and border
box-sizing: border-box; /* Include padding and border */
width: 100%;
h2 {

34
res/css/views/right_panel/_TimelineCard.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_TimelineCard {
.mx_TimelineCard_timeline {
overflow: hidden;
position: relative; // offset parent for jump to bottom button
position: relative; /* offset parent for jump to bottom button */
flex: 1;
border-radius: 8px;
}
@ -55,7 +55,7 @@ limitations under the License.
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
@ -87,7 +87,7 @@ limitations under the License.
}
.mx_DisambiguatedProfile {
max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); // instead of $left-gutter
max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); /* instead of $left-gutter */
}
.mx_ReplyTile .mx_DisambiguatedProfile {
@ -101,7 +101,7 @@ limitations under the License.
}
.mx_ReactionsRow {
// See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
margin-inline-end: $spacing-8;
}
@ -119,9 +119,9 @@ limitations under the License.
}
&[data-layout="group"] {
// Read receipt group on compact modern layout
// This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout,
// which specifies the default position of mx_ReadReceiptGroup on compact modern layout.
/* Read receipt group on compact modern layout */
/* This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, */
/* which specifies the default position of mx_ReadReceiptGroup on compact modern layout. */
.mx_MatrixChat_useCompactLayout & .mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}
@ -129,16 +129,16 @@ limitations under the License.
&[data-layout="bubble"] {
&::before {
z-index: auto; // enable background color on hover
z-index: auto; /* enable background color on hover */
}
&.mx_EventTile_info .mx_MessageActionBar {
// 1px: border width
/* 1px: border width */
inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
}
.mx_ReactionsRow {
position: relative; // display on hover
position: relative; /* display on hover */
}
}
}
@ -157,24 +157,24 @@ limitations under the License.
.mx_EventTile_line,
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
}
}
}
.mx_WhoIsTypingTile {
margin-left: -12px; // undo padding on the message list
margin-left: -12px; /* undo padding on the message list */
}
.mx_WhoIsTypingTile_avatars {
flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */
}
.mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
.mx_RoomView_MessageList { // RR next to a message on the messsge list
.mx_GenericEventListSummary_unstyledList, /* RR next to a message on the event list summary */
.mx_RoomView_MessageList { /* RR next to a message on the messsge list */
.mx_EventTile[data-layout="bubble"] {
.mx_ReadReceiptGroup {
// 6px: scroll bar width (magic number)
/* 6px: scroll bar width (magic number) */
/* stylelint-disable-next-line declaration-colon-space-after */
inset-inline-end:
calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
@ -182,7 +182,7 @@ limitations under the License.
&.mx_EventTile_info {
.mx_ReadReceiptGroup {
inset-inline-end: -4px; // align with RR outside of info tile
inset-inline-end: -4px; /* align with RR outside of info tile */
}
}
}

36
res/css/views/right_panel/_UserInfo.pcss
View file

@ -16,7 +16,7 @@ limitations under the License.
*/
.mx_UserInfo.mx_BaseCard {
// UserInfo has a circular image at the top so it fits between the back & close buttons
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
padding-top: 0;
overflow-y: auto;
font-size: $font-12px;
@ -27,8 +27,8 @@ limitations under the License.
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px; // TODO: Use a variable
z-index: 1; // render on top of the right panel
margin: 9px; /* TODO: Use a variable */
z-index: 1; /* render on top of the right panel */
div {
height: 16px;
@ -44,7 +44,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: 600;
margin: 18px 0 0 0; // TODO: Use a variable
margin: 18px 0 0 0; /* TODO: Use a variable */
}
.mx_UserInfo_container {
@ -128,7 +128,7 @@ limitations under the License.
align-items: center;
justify-content: center;
// override the calculated sizes so that the letter isn't HUGE
/* override the calculated sizes so that the letter isn't HUGE */
font-size: 6rem !important;
width: 100% !important;
transition: font-size 0.5s;
@ -151,7 +151,7 @@ limitations under the License.
}
p {
margin: 5px 0; // TODO: Use a variable
margin: 5px 0; /* TODO: Use a variable */
}
.mx_UserInfo_profile {
@ -165,8 +165,8 @@ limitations under the License.
justify-content: center;
span {
// limit to 2 lines, show an ellipsis if it overflows
// this looks webkit specific but is supported by Firefox 68+
/* limit to 2 lines, show an ellipsis if it overflows */
/* this looks webkit specific but is supported by Firefox 68+ */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
@ -177,9 +177,9 @@ limitations under the License.
}
.mx_E2EIcon {
margin-top: 3px; // visual vertical centering to the top line of text. TODO: Use a variable
margin-inline-end: $spacing-4; // margin from displayName
min-width: 18px; // convince flexbox to not collapse it
margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */
margin-inline-end: $spacing-4; /* margin from displayName */
min-width: 18px; /* convince flexbox to not collapse it */
}
}
@ -194,13 +194,13 @@ limitations under the License.
justify-content: center;
align-items: center;
margin: 6px 0; // TODO: Use a variable
margin: 6px 0; /* TODO: Use a variable */
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
/* try to make it the same height as the dropdown */
margin: 11px 0 12px 0;
}
@ -261,9 +261,9 @@ limitations under the License.
}
}
// both for icon in expand button and device item
/* both for icon in expand button and device item */
.mx_E2EIcon {
// don't squeeze
/* don't squeeze */
flex: 0 0 auto;
margin: 0;
width: 12px;
@ -271,9 +271,9 @@ limitations under the License.
}
.mx_UserInfo_expand {
column-gap: 5px; // cf: mx_UserInfo_device_name
column-gap: 5px; /* cf: mx_UserInfo_device_name */
margin-bottom: 11px;
align-items: initial; // Cancel the default property
align-items: initial; /* Cancel the default property */
}
}
@ -287,7 +287,7 @@ limitations under the License.
.mx_UserInfo_avatar_transition_child {
.mx_BaseAvatar {
.mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller
font-size: 40px !important; /* override the other override because here the avatar is smaller */
}
}
}

14
res/css/views/right_panel/_VerificationPanel.pcss
View file

@ -16,9 +16,9 @@ limitations under the License.
.mx_VerificationPanel_verified_section,
.mx_VerificationPanel_reciprocate_section {
// center the big shield icon
/* center the big shield icon */
.mx_E2EIcon {
// Override general user info margin
/* Override general user info margin */
margin: 20px auto !important;
}
}
@ -65,11 +65,11 @@ limitations under the License.
border-radius: 4px;
width: max-content;
max-width: 100%;
// Override general user info margin
/* Override general user info margin */
margin: 0 auto !important;
canvas {
// override height and width which are set on the element directly
/* override height and width which are set on the element directly */
height: auto !important;
width: 100% !important;
max-width: 240px;
@ -87,7 +87,7 @@ limitations under the License.
}
}
// Special case styling for EncryptionPanel in a Modal dialog
/* Special case styling for EncryptionPanel in a Modal dialog */
.mx_Dialog, .mx_CompleteSecurity_body {
.mx_VerificationPanel_QRPhase_startOptions {
display: flex;
@ -140,9 +140,9 @@ limitations under the License.
}
}
// EncryptionPanel when verification is done
/* EncryptionPanel when verification is done */
.mx_VerificationPanel_verified_section {
// right align the "Got it" button
/* right align the "Got it" button */
.mx_AccessibleButton {
float: right;
}

2
res/css/views/room_settings/_AliasSettings.pcss
View file

@ -34,7 +34,7 @@ limitations under the License.
font-weight: 600;
list-style: none;
// list-style doesn't do it for webkit
/* list-style doesn't do it for webkit */
&::-webkit-details-marker {
display: none;
}

26
res/css/views/rooms/_AppsDrawer.pcss
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;
}

14
res/css/views/rooms/_BasicMessageComposer.pcss
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;
}
}

8
res/css/views/rooms/_E2EIcon.pcss
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%;
}

8
res/css/views/rooms/_EditMessageComposer.pcss
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 */
}
}
}

4
res/css/views/rooms/_EntityTile.pcss
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;

118
res/css/views/rooms/_EventBubbleTile.pcss
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 */
}

179
res/css/views/rooms/_EventTile.pcss
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;

17
res/css/views/rooms/_IRCLayout.pcss
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 {

10
res/css/views/rooms/_JumpToBottomButton.pcss
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;

6
res/css/views/rooms/_LinkPreviewWidget.pcss
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,

6
res/css/views/rooms/_MemberList.pcss
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;
}

10
res/css/views/rooms/_MessageComposer.pcss
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;
}

4
res/css/views/rooms/_MessageComposerFormatBar.pcss
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 {

22
res/css/views/rooms/_NotificationBadge.pcss
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 */
}
}
}

4
res/css/views/rooms/_PinnedEventTile.pcss
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 {

Some files were not shown because too many files have changed in this diff Show more