matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-31 13:44:28 +03:00
Code Activity

Disallow invalid inline style comments in stylesheets (#9099)

Browse Source
This commit is contained in:
Germain
2022-07-27 14:39:29 +01:00
committed by GitHub
parent 8eeeee1aa2
commit 72c24af5c0
193 changed files with 1520 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/structures/_AutoHideScrollbar.pcss
View File

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// make any scrollbar grey and thin
/* make any scrollbar grey and thin */
html {
scrollbar-color: $scrollbar-thumb-color transparent;
}
// scrollbar-width is not inherited (but -color is, why?!),
// so declare it on every element
/* scrollbar-width is not inherited (but -color is, why?!), */
/* so declare it on every element */
* {
scrollbar-width: thin;
}
@ -34,7 +34,7 @@ html {
background-color: $scrollbar-thumb-color;
}
// make auto-hide scrollbars not transparent again on hover
/* make auto-hide scrollbars not transparent again on hover */
.mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color transparent;
@ -43,11 +43,11 @@ html {
}
}
// make scrollbars transparent for autohide scrollbars
/* make scrollbars transparent for autohide scrollbars */
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay; // where supported
overflow-y: overlay; /* where supported */
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {

2
res/css/structures/_BackdropPanel.pcss
View File

@ -22,7 +22,7 @@ limitations under the License.
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
// Force a new layer for the backdropPanel so it's better hardware supported
/* Force a new layer for the backdropPanel so it's better hardware supported */
transform: translateZ(0);
}

4
res/css/structures/_FilePanel.pcss
View File

@ -87,7 +87,7 @@ limitations under the License.
color: $light-fg-color;
}
// anchor link as wrapper
/* anchor link as wrapper */
.mx_EventTile_senderDetailsLink {
text-decoration: none;
@ -97,7 +97,7 @@ limitations under the License.
margin-top: -2px;
.mx_DisambiguatedProfile {
color: $event-timestamp-color; // for ellipsis. Color of displayName and mxid is inherited
color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
}
.mx_MessageTimestamp {

4
res/css/structures/_HeaderButtons.pcss
View File

@ -19,8 +19,8 @@ limitations under the License.
}
.mx_RoomHeader_buttons + .mx_HeaderButtons {
// remove the | separator line for when next to RoomHeaderButtons
// TODO: remove this once when we redo communities and make the right panel similar to the new rooms one
/* remove the | separator line for when next to RoomHeaderButtons */
/* TODO: remove this once when we redo communities and make the right panel similar to the new rooms one */
&::before {
content: unset;
}

8
res/css/structures/_HomePage.pcss
View File

@ -61,7 +61,7 @@ limitations under the License.
width: fit-content;
.mx_AccessibleButton {
padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
width: 160px;
min-height: 132px;
@ -76,18 +76,18 @@ limitations under the License.
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
color: #fff; // on all themes
color: #fff; /* on all themes */
background-color: $accent;
&::before {
top: 20px;
left: 60px; // (160px-40px)/2
left: 60px; /* (160px-40px)/2 */
width: 40px;
height: 40px;
content: '';
position: absolute;
background-color: #fff; // on all themes
background-color: #fff; /* on all themes */
mask-repeat: no-repeat;
mask-size: contain;
}

38
res/css/structures/_LeftPanel.pcss
View File

@ -29,7 +29,7 @@ $roomListCollapsedWidth: 68px;
max-width: 50%;
position: relative;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
contain: layout paint;
}
@ -37,7 +37,7 @@ $roomListCollapsedWidth: 68px;
display: flex;
flex-direction: row;
flex: 1;
height: 100%; // ensure space panel is still scrollable with an outer wrapper
height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
@ -54,20 +54,20 @@ $roomListCollapsedWidth: 68px;
.mx_LeftPanel {
background-color: $roomlist-bg-color;
// Create a row-based flexbox for the space panel and the room list
/* Create a row-based flexbox for the space panel and the room list */
display: flex;
contain: content;
position: relative;
flex-grow: 1;
overflow: hidden;
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
/* Note: The 'room list' in this context is actually everything that isn't the tag */
/* panel, such as the menu options, breadcrumbs, filtering, etc */
.mx_LeftPanel_roomListContainer {
background-color: $roomlist-bg-color;
flex: 1 0 0;
min-width: 0;
// Create another flexbox (this time a column) for the room list components
/* Create another flexbox (this time a column) for the room list components */
display: flex;
flex-direction: column;
@ -76,9 +76,9 @@ $roomListCollapsedWidth: 68px;
* for internal whitespace in the breadcrumbs)
*/
padding: 12px;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
// Create another flexbox column for the rows to stack within
/* Create another flexbox column for the rows to stack within */
display: flex;
flex-direction: column;
}
@ -88,8 +88,8 @@ $roomListCollapsedWidth: 68px;
overflow-x: scroll;
margin: 12px 12px 0 12px;
flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
/* Create yet another flexbox, this time within the row, to ensure items stay */
/* aligned correctly. This is also a row-based flexbox. */
display: flex;
align-items: center;
contain: content;
@ -112,9 +112,9 @@ $roomListCollapsedWidth: 68px;
padding: 12px 0 8px;
border-bottom: 1px solid $quinary-content;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
// Create a flexbox to organize the inputs
/* Create a flexbox to organize the inputs */
display: flex;
align-items: center;
@ -186,11 +186,11 @@ $roomListCollapsedWidth: 68px;
}
.mx_LeftPanel_roomListWrapper {
// Make the y-scrollbar more responsive
/* Make the y-scrollbar more responsive */
padding-right: 2px;
overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter
flex: 1 0 0; // needed in Safari to properly set flex-basis
margin-top: 10px; /* so we're not up against the search/filter */
flex: 1 0 0; /* needed in Safari to properly set flex-basis */
&.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
@ -202,12 +202,12 @@ $roomListCollapsedWidth: 68px;
}
.mx_LeftPanel_actualRoomListContainer {
position: relative; // for sticky headers
height: 100%; // ensure scrolling still works
position: relative; /* for sticky headers */
height: 100%; /* ensure scrolling still works */
}
}
// These styles override the defaults for the minimized (66px) layout
/* These styles override the defaults for the minimized (66px) layout */
&.mx_LeftPanel_minimized {
flex-grow: 0;
min-width: unset;
@ -222,7 +222,7 @@ $roomListCollapsedWidth: 68px;
}
.mx_LeftPanel_filterContainer {
// Organize the flexbox into a centered column layout
/* Organize the flexbox into a centered column layout */
flex-direction: column;
justify-content: center;

8
res/css/structures/_MainSplit.pcss
View File

@ -24,10 +24,10 @@ limitations under the License.
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: $container-gap-width;
// The resizer should be centered: only half of the gap-width is handled by the right panel.
// The other half by the RoomView.
/* The resizer should be centered: only half of the gap-width is handled by the right panel. */
/* The other half by the RoomView. */
padding-left: calc($container-gap-width / 2);
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
&:hover .mx_ResizeHandle_horizontal::before {
position: absolute;
@ -35,7 +35,7 @@ limitations under the License.
left: 50%;
transform: translate(-50%, -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;

32
res/css/structures/_MatrixChat.pcss
View File

@ -52,7 +52,7 @@ limitations under the License.
.mx_MatrixChat_syncError {
color: $accent-fg-color;
background-color: #DF2A8B; // Only used here
background-color: #DF2A8B; /* Only used here */
border-radius: 5px;
display: table;
padding: 30px;
@ -76,22 +76,22 @@ limitations under the License.
height: 100%;
}
// We'd like to remove this, but this makes matrixchat's resizehandle's
// negative margin greater than its positive padding. If it's the same
// or less, Safari and other WebKit based browsers get confused about overflows somehow and
// https://github.com/vector-im/element-web/issues/19863 happens.
/* We'd like to remove this, but this makes matrixchat's resizehandle's */
/* negative margin greater than its positive padding. If it's the same */
/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
/* https://github.com/vector-im/element-web/issues/19863 happens. */
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
// The condition to prevent bleeding is: (margin-left + margin-right < -11px)
// (IF there is NO margin on the leftPanel_wrapper)
// The resizeHandle does not change the gap between the left panel and the room view:
// the resizeHandle width is:
// 11px = 10px (padding) + 1px (width)
// and the total negative margin is -12px ->
// the handle requires no space
// right: -6px left: -6px positions the element exactly on the edge of leftPanel.
// left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
// We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
/* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
/* (IF there is NO margin on the leftPanel_wrapper) */
/* The resizeHandle does not change the gap between the left panel and the room view: */
/* the resizeHandle width is: */
/* 11px = 10px (padding) + 1px (width) */
/* and the total negative margin is -12px -> */
/* the handle requires no space */
/* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
/* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
/* We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) */
}
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
@ -103,7 +103,7 @@ limitations under the License.
left: 50%;
transform: translate(-50%, -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;

6
res/css/structures/_NonUrgentToastContainer.pcss
View File

@ -18,7 +18,7 @@ limitations under the License.
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101; // same level as other toasts
z-index: 101; /* same level as other toasts */
.mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
@ -27,8 +27,8 @@ limitations under the License.
font-size: $font-13px;
margin-top: 8px;
// We don't use variables on the colours because we want it to be the same
// in all themes.
/* We don't use variables on the colours because we want it to be the same */
/* in all themes. */
background-color: #17191c;
color: #fff;
}

4
res/css/structures/_NotificationPanel.pcss
View File

@ -49,7 +49,7 @@ limitations under the License.
.mx_EventTile_senderDetails,
.mx_EventTile_line {
padding-left: 36px; // align with the room name
padding-left: 36px; /* align with the room name */
}
.mx_EventTile_senderDetails {
@ -57,7 +57,7 @@ limitations under the License.
a {
display: flex;
column-gap: 5px; // TODO: Use a spacing variable
column-gap: 5px; /* TODO: Use a spacing variable */
}
}

4
res/css/structures/_QuickSettingsButton.pcss
View File

@ -26,7 +26,7 @@ limitations under the License.
&.expanded {
margin-left: 20px;
padding-left: 44px; // align with toggle collapse button text
padding-left: 44px; /* align with toggle collapse button text */
padding-right: 8px;
}
@ -56,7 +56,7 @@ limitations under the License.
padding: 16px;
width: max-content;
min-width: 200px;
contain: unset; // let the dropdown paint beyond the context menu
contain: unset; /* let the dropdown paint beyond the context menu */
> div > h2 {
font-weight: $font-semi-bold;

6
res/css/structures/_RightPanel.pcss
View File

@ -28,7 +28,7 @@ limitations under the License.
contain: strict;
.mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
}
}
@ -61,8 +61,8 @@ limitations under the License.
&::before {
content: '';
position: absolute;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
top: 4px; /* center with parent of 32px */
left: 4px; /* center with parent of 32px */
height: 24px;
width: 24px;
background-color: $icon-button-color;

6
res/css/structures/_RoomDirectory.pcss
View File

@ -80,7 +80,7 @@ limitations under the License.
font-size: $font-14px;
line-height: $font-20px;
color: $secondary-content;
max-width: 464px; // easier reading
max-width: 464px; /* easier reading */
}
> hr {
@ -125,8 +125,8 @@ limitations under the License.
mask: url("$(res)/img/feather-customised/user.svg");
mask-repeat: no-repeat;
mask-position: center;
// scale it down and make the size slightly bigger (16 instead of 14px)
// to avoid rendering artifacts
/* scale it down and make the size slightly bigger (16 instead of 14px) */
/* to avoid rendering artifacts */
mask-size: 80%;
width: 16px;
height: 16px;

8
res/css/structures/_RoomSearch.pcss
View File

@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// Note: this component expects to be contained within a flexbox
/* Note: this component expects to be contained within a flexbox */
.mx_RoomSearch {
flex: 1;
min-width: 0;
border-radius: 8px;
background-color: $panel-actions;
// keep border thickness consistent to prevent movement
/* keep border thickness consistent to prevent movement */
border: 1px solid transparent;
height: 28px;
padding: 1px;
// Create a flexbox for the icons (easier to manage)
/* Create a flexbox for the icons (easier to manage) */
display: flex;
align-items: center;
@ -48,7 +48,7 @@ limitations under the License.
color: $tertiary-content;
flex: 1;
min-width: 0;
// the following rules are to match that of a real input field
/* the following rules are to match that of a real input field */
overflow: hidden;
margin: 9px;
font-weight: $font-semi-bold;

18
res/css/structures/_RoomStatusBar.pcss
View File

@ -70,7 +70,7 @@ limitations under the License.
.mx_RoomStatusBar_unsentMessages {
> div[role="alert"] {
// cheat some basic alignment
/* cheat some basic alignment */
display: flex;
align-items: center;
min-height: 70px;
@ -84,13 +84,13 @@ limitations under the License.
margin-right: 12px;
.mx_NotificationBadge {
// Override sizing from the default badge
/* Override sizing from the default badge */
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
.mx_NotificationBadge_count {
font-size: $font-16px !important; // override default
font-size: $font-16px !important; /* override default */
}
}
}
@ -112,7 +112,7 @@ limitations under the License.
.mx_AccessibleButton {
padding: 5px 10px;
padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
display: inline-block;
position: relative;
@ -123,14 +123,14 @@ limitations under the License.
&::before {
content: '';
position: absolute;
left: 10px; // inset for regular button padding
left: 10px; /* inset for regular button padding */
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 18px;
height: 18px;
top: 50%; // text sizes are dynamic
top: 50%; /* text sizes are dynamic */
transform: translateY(-50%);
}
@ -139,7 +139,7 @@ limitations under the License.
}
&.mx_RoomStatusBar_unsentRetry {
padding-left: 34px; // 28px from above, but +6px to account for the wider icon
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
&::before {
mask-image: url('$(res)/img/element-icons/retry.svg');
@ -150,10 +150,10 @@ limitations under the License.
.mx_InlineSpinner {
vertical-align: middle;
margin-right: 5px;
top: 1px; // just to help the vertical alignment be slightly better
top: 1px; /* just to help the vertical alignment be slightly better */
& + span {
margin-right: 10px; // same margin/padding as the rightmost button
margin-right: 10px; /* same margin/padding as the rightmost button */
}
}
}

8
res/css/structures/_RoomView.pcss
View File

@ -20,7 +20,7 @@ limitations under the License.
flex: 1;
position: relative;
justify-content: center;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
contain: strict;
}
@ -171,7 +171,7 @@ limitations under the License.
padding: 0 24px;
margin-right: 30px;
text-align: center;
margin-bottom: 80px; // visually center the content (intentional offset)
margin-bottom: 80px; /* visually center the content (intentional offset) */
}
.mx_RoomView_MessageList {
@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker {
opacity: 1;
}
// Rooms with immersive content
/* Rooms with immersive content */
.mx_RoomView_immersive .mx_RoomHeader_wrapper {
border: unset;
}
@ -274,7 +274,7 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 4px;
h2 {
margin-top: 6px; // TODO: Use a spacing variable
margin-top: 6px; /* TODO: Use a spacing variable */
}
}

6
res/css/structures/_SpaceHierarchy.pcss
View File

@ -65,7 +65,7 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px; // to account for the 1px border
padding: 3px 12px; /* to account for the 1px border */
}
}
@ -174,7 +174,7 @@ limitations under the License.
grid-template-columns: 20px auto;
gap: 6px 8px;
align-items: center;
flex: 1; // wrap action buttons
flex: 1; /* wrap action buttons */
.mx_SpaceHierarchy_roomTile_avatar {
grid-row: 1;
@ -259,7 +259,7 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px; // to account for the 1px border
padding: 3px 16px; /* to account for the 1px border */
}
.mx_Checkbox {

20
res/css/structures/_SpacePanel.pcss
View File

@ -28,10 +28,10 @@ $activeBorderColor: $primary-content;
padding: 0;
margin: 0;
position: relative;
// Fix for the blurred avatar-background
/* Fix for the blurred avatar-background */
z-index: 1;
// Create another flexbox so the Panel fills the container
/* Create another flexbox so the Panel fills the container */
display: flex;
flex-direction: column;
@ -41,7 +41,7 @@ $activeBorderColor: $primary-content;
height: 18px;
border-radius: 50%;
background-color: $tertiary-content;
top: 19px; // v-align with avatar
top: 19px; /* v-align with avatar */
right: -8px;
&::before {
@ -233,7 +233,7 @@ $activeBorderColor: $primary-content;
&::before {
background-color: $primary-content;
mask-image: url('$(res)/img/element-icons/plus.svg');
transition: all .2s ease-in-out; // TODO transition
transition: all .2s ease-in-out; /* TODO transition */
}
}
@ -247,7 +247,7 @@ $activeBorderColor: $primary-content;
.mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px; // yay flex
min-width: 20px; /* yay flex */
height: 20px;
margin-top: auto;
margin-bottom: auto;
@ -282,7 +282,7 @@ $activeBorderColor: $primary-content;
color: $secondary-content;
border-radius: 8px;
background-color: $panel-actions;
font-size: $font-15px !important; // override inline style
font-size: $font-15px !important; /* override inline style */
font-weight: $font-semi-bold;
line-height: $font-18px;
@ -297,7 +297,7 @@ $activeBorderColor: $primary-content;
}
.mx_SpacePanel_badgeContainer {
// Create a flexbox to make aligning dot badges easier
/* Create a flexbox to make aligning dot badges easier */
display: flex;
align-items: center;
position: absolute;
@ -305,12 +305,12 @@ $activeBorderColor: $primary-content;
top: -3px;
.mx_NotificationBadge {
margin: 0 2px; // centering
margin: 0 2px; /* centering */
background-clip: padding-box;
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
/* make the smaller dot occupy the same width for centering */
margin: 0 -1px 0 0;
border: 3px solid $spacePanel-bg-color;
}
@ -421,7 +421,7 @@ $activeBorderColor: $primary-content;
display: none;
& + .mx_IconizedContextMenu_label {
padding-left: 5px !important; // override default iconized label style to align with header
padding-left: 5px !important; /* override default iconized label style to align with header */
}
}

14
res/css/structures/_SpaceRoomView.pcss
View File

@ -104,7 +104,7 @@ $SpaceRoomViewInnerWidth: 428px;
display: block;
margin-top: 44px;
width: $SpaceRoomViewInnerWidth;
text-align: right; // button alignment right
text-align: right; /* button alignment right */
.mx_AccessibleButton_hasKind {
padding: 8px 22px;
@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
input.mx_AccessibleButton {
border: none; // override default styles
border: none; /* override default styles */
}
}
@ -154,9 +154,9 @@ $SpaceRoomViewInnerWidth: 428px;
}
}
// XXX: Temporary for the Spaces release only
/* XXX: Temporary for the Spaces release only */
.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
padding: 7px; /* 8px - 1px border */
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
@ -230,7 +230,7 @@ $SpaceRoomViewInnerWidth: 428px;
left: 8px;
height: 16px;
width: 16px;
background: #fff; // white icon fill
background: #fff; /* white icon fill */
mask-size: 16px;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
@ -282,7 +282,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta
/* XXX remove this when spaces leaves Beta */
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
padding: 16px;
position: relative;
@ -307,7 +307,7 @@ $SpaceRoomViewInnerWidth: 428px;
position: relative;
display: inline-block;
padding-left: 32px;
line-height: 24px; // to center icons
line-height: 24px; /* to center icons */
&::before {
content: "";

6
res/css/structures/_TabbedView.pcss
View File

@ -39,7 +39,7 @@ limitations under the License.
}
.mx_TabbedView_tabPanel {
margin-left: 240px; // 170px sidebar + 70px padding
margin-left: 240px; /* 170px sidebar + 70px padding */
flex-direction: column;
}
@ -146,11 +146,11 @@ limitations under the License.
.mx_TabbedView_tabPanel {
flex-grow: 1;
display: flex;
min-height: 0; // firefox
min-height: 0; /* firefox */
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
overflow: auto;
min-height: 0; // firefox
min-height: 0; /* firefox */
}

4
res/css/structures/_ToastContainer.pcss
View File

@ -67,7 +67,7 @@ limitations under the License.
}
&.mx_Toast_icon_verification_warning {
// white infill for the hollow svg mask
/* white infill for the hollow svg mask */
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
@ -126,7 +126,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-22px;
color: $secondary-content;
margin-inline-start: auto; // on the end side of the div
margin-inline-start: auto; /* on the end side of the div */
}
}

8
res/css/structures/_UploadBar.pcss
View File

@ -15,11 +15,11 @@ limitations under the License.
*/
.mx_UploadBar {
padding-left: 65px; // line up with the shield area in the composer
padding-left: 65px; /* line up with the shield area in the composer */
position: relative;
.mx_ProgressBar {
width: calc(100% - 40px); // cheating at a right margin
width: calc(100% - 40px); /* cheating at a right margin */
}
}
@ -33,7 +33,7 @@ limitations under the License.
margin-top: 5px;
color: $muted-fg-color;
position: relative;
padding-left: 22px; // 18px for icon, 4px for padding
padding-left: 22px; /* 18px for icon, 4px for padding */
font-size: $font-15px;
vertical-align: middle;
@ -57,7 +57,7 @@ limitations under the License.
right: 0;
height: 16px;
width: 16px;
margin-right: 16px; // align over rightmost button in composer
margin-right: 16px; /* align over rightmost button in composer */
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;

14
res/css/structures/_UserMenu.pcss
View File

@ -27,7 +27,7 @@ limitations under the License.
position: relative;
.mx_BaseAvatar {
pointer-events: none; // makes the avatar non-draggable
pointer-events: none; /* makes the avatar non-draggable */
}
}
}
@ -78,25 +78,25 @@ limitations under the License.
.mx_UserMenu_contextMenu_header {
padding: 20px;
// Create a flexbox to organize the header a bit easier
/* Create a flexbox to organize the header a bit easier */
display: flex;
align-items: center;
.mx_UserMenu_contextMenu_name {
// Create another flexbox of columns to handle large user IDs
/* Create another flexbox of columns to handle large user IDs */
display: flex;
flex-direction: column;
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
.mx_UserMenu_contextMenu_displayName,
.mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
// Automatically grow subelements to fit the container
/* Automatically grow subelements to fit the container */
flex: 1;
width: 100%;
// Ellipsize text overflow
/* Ellipsize text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -122,7 +122,7 @@ limitations under the License.
background-color: $theme-button-bg-color;
cursor: pointer;
// to make alignment easier, create flexbox for the image
/* to make alignment easier, create flexbox for the image */
display: flex;
align-items: center;
justify-content: center;

2
res/css/structures/_VideoRoomView.pcss
View File

@ -33,7 +33,7 @@ limitations under the License.
border: none;
}
// While the lobby is shown, the widget needs to stay loaded but hidden in the background
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
.mx_VideoLobby ~ .mx_AppTile {
display: none;
}

2
res/css/structures/auth/_Login.pcss
View File

@ -63,7 +63,7 @@ limitations under the License.
}
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: #ff8d13; // Only used here
color: #ff8d13; /* Only used here */
}
.mx_Login_type_container {