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

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;
}