Disallow invalid inline style comments in stylesheets (#9099)
This commit is contained in:
Germain
@@ -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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user