From 72c24af5c03c6e106f0cd8113b684ca91031c33e Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 27 Jul 2022 14:39:29 +0100 Subject: [PATCH] Disallow invalid inline style comments in stylesheets (#9099) --- .stylelintrc.js | 1 + res/css/_animations.pcss | 6 +- res/css/_common.pcss | 103 ++++--- res/css/_components.pcss | 2 +- res/css/_spacing.pcss | 2 +- .../views/beacon/_BeaconListItem.pcss | 2 +- .../views/beacon/_BeaconViewDialog.pcss | 2 +- .../beacon/_LeftPanelLiveShareWarning.pcss | 4 +- .../views/beacon/_OwnBeaconStatus.pcss | 6 +- .../views/beacon/_ShareLatestLocation.pcss | 4 +- .../views/beacon/_StyledLiveBeaconIcon.pcss | 2 +- .../components/views/location/_MapError.pcss | 2 +- .../components/views/location/_Marker.pcss | 2 +- .../components/views/location/_ShareType.pcss | 6 +- .../views/messages/_MBeaconBody.pcss | 10 +- res/css/structures/_AutoHideScrollbar.pcss | 12 +- res/css/structures/_BackdropPanel.pcss | 2 +- res/css/structures/_FilePanel.pcss | 4 +- res/css/structures/_HeaderButtons.pcss | 4 +- res/css/structures/_HomePage.pcss | 8 +- res/css/structures/_LeftPanel.pcss | 38 +-- res/css/structures/_MainSplit.pcss | 8 +- res/css/structures/_MatrixChat.pcss | 32 +-- .../structures/_NonUrgentToastContainer.pcss | 6 +- res/css/structures/_NotificationPanel.pcss | 4 +- res/css/structures/_QuickSettingsButton.pcss | 4 +- res/css/structures/_RightPanel.pcss | 6 +- res/css/structures/_RoomDirectory.pcss | 6 +- res/css/structures/_RoomSearch.pcss | 8 +- res/css/structures/_RoomStatusBar.pcss | 18 +- res/css/structures/_RoomView.pcss | 8 +- res/css/structures/_SpaceHierarchy.pcss | 6 +- res/css/structures/_SpacePanel.pcss | 20 +- res/css/structures/_SpaceRoomView.pcss | 14 +- res/css/structures/_TabbedView.pcss | 6 +- res/css/structures/_ToastContainer.pcss | 4 +- res/css/structures/_UploadBar.pcss | 8 +- res/css/structures/_UserMenu.pcss | 14 +- res/css/structures/_VideoRoomView.pcss | 2 +- res/css/structures/auth/_Login.pcss | 2 +- .../views/audio_messages/_AudioPlayer.pcss | 8 +- .../audio_messages/_PlayPauseButton.pcss | 14 +- .../audio_messages/_PlaybackContainer.pcss | 44 +-- res/css/views/audio_messages/_SeekBar.pcss | 52 ++-- res/css/views/audio_messages/_Waveform.pcss | 26 +- res/css/views/auth/_AuthBody.pcss | 2 +- .../auth/_InteractiveAuthEntryComponents.pcss | 16 +- res/css/views/avatars/_BaseAvatar.pcss | 22 +- .../views/avatars/_DecoratedRoomAvatar.pcss | 2 +- res/css/views/beta/_BetaCard.pcss | 6 +- .../context_menus/_IconizedContextMenu.pcss | 46 +-- .../dialogs/_AddExistingToSpaceDialog.pcss | 4 +- res/css/views/dialogs/_BugReportDialog.pcss | 2 +- res/css/views/dialogs/_CompoundDialog.pcss | 26 +- .../_ConfirmSpaceUserActionDialog.pcss | 2 +- res/css/views/dialogs/_CreateRoomDialog.pcss | 8 +- res/css/views/dialogs/_DevtoolsDialog.pcss | 12 +- res/css/views/dialogs/_FeedbackDialog.pcss | 2 +- res/css/views/dialogs/_ForwardDialog.pcss | 12 +- res/css/views/dialogs/_HostSignupDialog.pcss | 8 +- res/css/views/dialogs/_InviteDialog.pcss | 50 ++-- res/css/views/dialogs/_LeaveSpaceDialog.pcss | 2 +- .../_ManageRestrictedJoinRuleDialog.pcss | 4 +- .../dialogs/_MessageEditHistoryDialog.pcss | 4 +- res/css/views/dialogs/_PollCreateDialog.pcss | 4 +- .../views/dialogs/_RoomSettingsDialog.pcss | 8 +- .../dialogs/_RoomSettingsDialogBridges.pcss | 2 +- .../views/dialogs/_ServerOfflineDialog.pcss | 6 +- res/css/views/dialogs/_SettingsDialog.pcss | 8 +- res/css/views/dialogs/_ShareDialog.pcss | 2 +- res/css/views/dialogs/_SpotlightDialog.pcss | 26 +- .../views/dialogs/_UserSettingsDialog.pcss | 4 +- .../_WidgetCapabilitiesPromptDialog.pcss | 6 +- .../security/_AccessSecretStorageDialog.pcss | 14 +- .../security/_CreateCrossSigningDialog.pcss | 12 +- .../security/_CreateKeyBackupDialog.pcss | 2 +- .../security/_CreateSecretStorageDialog.pcss | 12 +- res/css/views/elements/_AccessibleButton.pcss | 4 +- res/css/views/elements/_CopyableText.pcss | 4 +- res/css/views/elements/_Dropdown.pcss | 6 +- res/css/views/elements/_EditableItemList.pcss | 2 +- res/css/views/elements/_FacePile.pcss | 4 +- res/css/views/elements/_Field.pcss | 12 +- .../elements/_GenericEventListSummary.pcss | 10 +- res/css/views/elements/_ImageView.pcss | 2 +- res/css/views/elements/_InlineSpinner.pcss | 2 +- .../views/elements/_InteractiveTooltip.pcss | 20 +- res/css/views/elements/_LabelledCheckbox.pcss | 2 +- .../views/elements/_MiniAvatarUploader.pcss | 4 +- res/css/views/elements/_Pill.pcss | 24 +- res/css/views/elements/_ReplyChain.pcss | 4 +- res/css/views/elements/_RichText.pcss | 12 +- res/css/views/elements/_RoomAliasField.pcss | 12 +- res/css/views/elements/_SSOButtons.pcss | 6 +- res/css/views/elements/_SettingsFlag.pcss | 2 +- res/css/views/elements/_Slider.pcss | 8 +- .../views/elements/_StyledRadioButton.pcss | 4 +- res/css/views/elements/_TagComposer.pcss | 12 +- res/css/views/elements/_Tooltip.pcss | 6 +- res/css/views/location/_LocationPicker.pcss | 12 +- res/css/views/messages/_CallEvent.pcss | 10 +- .../views/messages/_DisambiguatedProfile.pcss | 2 +- res/css/views/messages/_EventTileBubble.pcss | 6 +- res/css/views/messages/_JumpToDatePicker.pcss | 4 +- res/css/views/messages/_MFileBody.pcss | 4 +- res/css/views/messages/_MImageBody.pcss | 30 +- res/css/views/messages/_MImageReplyBody.pcss | 2 +- .../views/messages/_MJitsiWidgetEvent.pcss | 2 +- res/css/views/messages/_MLocationBody.pcss | 6 +- res/css/views/messages/_MPollBody.pcss | 8 +- res/css/views/messages/_MStickerBody.pcss | 4 +- res/css/views/messages/_MediaBody.pcss | 6 +- res/css/views/messages/_MessageActionBar.pcss | 30 +- res/css/views/messages/_MessageTimestamp.pcss | 2 +- res/css/views/messages/_ReactionsRow.pcss | 4 +- res/css/views/messages/_ViewSourceEvent.pcss | 8 +- .../views/messages/_common_CryptoEvent.pcss | 2 +- res/css/views/right_panel/_BaseCard.pcss | 18 +- .../right_panel/_PinnedMessagesCard.pcss | 2 +- .../views/right_panel/_RoomSummaryCard.pcss | 25 +- res/css/views/right_panel/_ThreadPanel.pcss | 20 +- res/css/views/right_panel/_TimelineCard.pcss | 34 +-- res/css/views/right_panel/_UserInfo.pcss | 36 +-- .../views/right_panel/_VerificationPanel.pcss | 14 +- .../views/room_settings/_AliasSettings.pcss | 2 +- res/css/views/rooms/_AppsDrawer.pcss | 26 +- .../views/rooms/_BasicMessageComposer.pcss | 14 +- res/css/views/rooms/_E2EIcon.pcss | 8 +- res/css/views/rooms/_EditMessageComposer.pcss | 8 +- res/css/views/rooms/_EntityTile.pcss | 4 +- res/css/views/rooms/_EventBubbleTile.pcss | 118 ++++---- res/css/views/rooms/_EventTile.pcss | 179 ++++++------ res/css/views/rooms/_IRCLayout.pcss | 17 +- res/css/views/rooms/_JumpToBottomButton.pcss | 10 +- res/css/views/rooms/_LinkPreviewWidget.pcss | 6 +- res/css/views/rooms/_MemberList.pcss | 6 +- res/css/views/rooms/_MessageComposer.pcss | 10 +- .../rooms/_MessageComposerFormatBar.pcss | 4 +- res/css/views/rooms/_NotificationBadge.pcss | 22 +- res/css/views/rooms/_PinnedEventTile.pcss | 4 +- res/css/views/rooms/_ReadReceiptGroup.pcss | 2 +- res/css/views/rooms/_ReplyPreview.pcss | 4 +- res/css/views/rooms/_ReplyTile.pcss | 10 +- res/css/views/rooms/_RoomBreadcrumbs.pcss | 18 +- res/css/views/rooms/_RoomHeader.pcss | 16 +- res/css/views/rooms/_RoomInfoLine.pcss | 2 +- res/css/views/rooms/_RoomList.pcss | 2 +- res/css/views/rooms/_RoomPreviewBar.pcss | 14 +- res/css/views/rooms/_RoomPreviewCard.pcss | 6 +- res/css/views/rooms/_RoomSublist.pcss | 136 ++++----- res/css/views/rooms/_RoomTile.pcss | 36 +-- res/css/views/rooms/_SearchBar.pcss | 4 +- res/css/views/rooms/_SendMessageComposer.pcss | 22 +- res/css/views/rooms/_Stickers.pcss | 4 +- res/css/views/rooms/_ThreadSummary.pcss | 10 +- .../views/rooms/_VoiceRecordComposerTile.pcss | 46 +-- res/css/views/rooms/_WhoIsTypingTile.pcss | 4 +- res/css/views/settings/_AvatarSetting.pcss | 10 +- res/css/views/settings/_FontScalingPanel.pcss | 6 +- res/css/views/settings/_ImageSizePanel.pcss | 6 +- res/css/views/settings/_JoinRuleSettings.pcss | 2 +- res/css/views/settings/_Notifications.pcss | 18 +- res/css/views/settings/_ProfileSettings.pcss | 4 +- .../settings/_SetIntegrationManager.pcss | 2 +- res/css/views/settings/_ThemeChoicePanel.pcss | 4 +- res/css/views/settings/tabs/_SettingsTab.pcss | 20 +- .../tabs/user/_AppearanceUserSettingsTab.pcss | 2 +- .../tabs/user/_GeneralUserSettingsTab.pcss | 4 +- .../tabs/user/_KeyboardUserSettingsTab.pcss | 4 +- .../tabs/user/_LabsUserSettingsTab.pcss | 2 +- res/css/views/spaces/_SpaceBasicSettings.pcss | 6 +- .../views/spaces/_SpaceChildrenPicker.pcss | 2 +- res/css/views/spaces/_SpaceCreateMenu.pcss | 4 +- res/css/views/toasts/_IncomingCallToast.pcss | 2 +- .../toasts/_NonUrgentEchoFailureToast.pcss | 4 +- .../views/voip/CallView/_CallViewButtons.pcss | 26 +- res/css/views/voip/_CallPreview.pcss | 2 +- res/css/views/voip/_CallView.pcss | 8 +- res/css/views/voip/_CallViewForRoom.pcss | 4 +- res/css/views/voip/_DialPad.pcss | 2 +- res/css/views/voip/_PiPContainer.pcss | 8 +- res/css/views/voip/_VideoFeed.pcss | 4 +- res/css/views/voip/_VideoLobby.pcss | 4 +- res/themes/dark/css/_dark.pcss | 212 +++++++------- res/themes/legacy-dark/css/_legacy-dark.pcss | 78 +++--- res/themes/legacy-light/css/_fonts.pcss | 6 +- .../legacy-light/css/_legacy-light.pcss | 98 +++---- res/themes/legacy-light/css/_paths.pcss | 4 +- res/themes/light-custom/css/_custom.pcss | 85 +++--- .../css/_light-high-contrast.pcss | 14 +- res/themes/light/css/_light.pcss | 264 +++++++++--------- res/themes/light/css/_mods.pcss | 8 +- res/themes/light/css/_paths.pcss | 4 +- 193 files changed, 1520 insertions(+), 1518 deletions(-) diff --git a/.stylelintrc.js b/.stylelintrc.js index e965468486..ab5c796837 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -48,5 +48,6 @@ module.exports = { "selector-no-vendor-prefix": null, "media-feature-name-no-vendor-prefix": null, "number-max-precision": null, + "no-invalid-double-slash-comments": true, }, } diff --git a/res/css/_animations.pcss b/res/css/_animations.pcss index 26252fcaf6..01b05b5153 100644 --- a/res/css/_animations.pcss +++ b/res/css/_animations.pcss @@ -60,15 +60,15 @@ limitations under the License. @media (prefers-reduced-motion) { @keyframes mx--anim-pulse { - // Override all keyframes in reduced-motion + /* Override all keyframes in reduced-motion */ } @keyframes mx_Dialog_lightbox_background_keyframes { - // Override all keyframes in reduced-motion + /* Override all keyframes in reduced-motion */ } @keyframes mx_ImageView_panel_keyframes { - // Override all keyframes in reduced-motion + /* Override all keyframes in reduced-motion */ } .mx_rtg--fade-enter-active { diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 45e00d6ac7..862a6ad494 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -23,7 +23,7 @@ limitations under the License. @import "./_spacing.pcss"; @import url("maplibre-gl/dist/maplibre-gl.css"); -$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic +$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); /* quadratic */ $selected-message-border-width: 4px; @@ -34,7 +34,7 @@ $slider-dot-size: 1em; $slider-selection-dot-size: 2.4em; $container-border-width: 8px; -$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values. +$container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */ $timeline-image-border-radius: 8px; :root { @@ -56,7 +56,7 @@ html { N.B. Breaks things when we have legitimate horizontal overscroll */ height: 100%; overflow: hidden; - // Stop similar overscroll bounce in Firefox Nightly for macOS + /* Stop similar overscroll bounce in Firefox Nightly for macOS */ overscroll-behavior: none; } @@ -68,8 +68,8 @@ body { border: 0px; margin: 0px; - // needed to match the designs correctly on macOS - // see https://github.com/vector-im/element-web/issues/11425 + /* needed to match the designs correctly on macOS */ + /* see https://github.com/vector-im/element-web/issues/11425 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -93,8 +93,8 @@ pre, code { } b { - // On Firefox, the default weight for `` is `bolder` which results in no bold - // effect since we only have specific weights of our fonts available. + /* On Firefox, the default weight for `` is `bolder` which results in no bold */ + /* effect since we only have specific weights of our fonts available. */ font-weight: bold; } @@ -129,14 +129,14 @@ input[type="search"].mx_textinput_icon { background-position: 10px center; } -// FIXME THEME - Tint by CSS rather than referencing a duplicate asset +/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */ input[type="text"].mx_textinput_icon.mx_textinput_search, input[type="search"].mx_textinput_icon.mx_textinput_search { background-image: url('$(res)/img/feather-customised/search-input.svg'); } -// dont search UI as not all browsers support it, -// we implement it ourselves where needed instead +/* dont search UI as not all browsers support it, */ +/* we implement it ourselves where needed instead */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, @@ -144,7 +144,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } -// Override Firefox's UA style so we get a consistent look across browsers +/* Override Firefox's UA style so we get a consistent look across browsers */ input::placeholder, textarea::placeholder { opacity: initial; @@ -165,15 +165,15 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { box-shadow: none; } -// This is used to hide the standard outline added by browsers for -// accessible (focusable) components. Not intended for buttons, but -// should be used on things like focusable containers where the outline -// is usually not helping anyone. +/* This is used to hide the standard outline added by browsers for */ +/* accessible (focusable) components. Not intended for buttons, but */ +/* should be used on things like focusable containers where the outline */ +/* is usually not helping anyone. */ *:focus:not(.focus-visible) { outline: none; } -// override defaults +/* override defaults */ fieldset { display: inline-block; margin-inline: unset; @@ -188,10 +188,10 @@ legend { border: none; } -// .mx_textinput is a container for a text input -// + some other controls like buttons, ... -// it has the appearance of a text box so the controls -// appear to be part of the input +/* .mx_textinput is a container for a text input */ +/* + some other controls like buttons, ... */ +/* it has the appearance of a text box so the controls */ +/* appear to be part of the input */ .mx_Dialog, .mx_MatrixChat_wrapper { .mx_textinput > input[type="text"], @@ -210,7 +210,7 @@ legend { color: $input-darker-fg-color; border-radius: 4px; border: 1px solid rgba($primary-content, .1); - // these things should probably not be defined globally + /* these things should probably not be defined globally */ margin: 9px; } @@ -254,11 +254,10 @@ legend { border: 0; } -// These are magic constants which are excluded from tinting, to let themes -// (which only have CSS) tell the app what their non-tinted -// colourscheme is by inspecting the stylesheet DOM. -// -// They are not used for layout!! +/* These are magic constants which are excluded from tinting, to let themes */ +/* (which only have CSS) tell the app what their non-tinted */ +/* colourscheme is by inspecting the stylesheet DOM. */ +/* They are not used for layout!! */ #mx_theme_accentColor { color: $accent; } @@ -304,12 +303,12 @@ legend { overflow-y: auto; } -// Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. +/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */ .mx_Dialog .markdown-body { 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, @@ -318,13 +317,13 @@ legend { background-color: $codeblock-background-color; } - // this selector wrongly applies to code blocks too but we will unset it in the next one + /* this selector wrongly applies to code blocks too but we will unset it in the next one */ 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 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; @@ -332,9 +331,9 @@ legend { } 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; @@ -358,7 +357,7 @@ legend { .mx_Dialog .markdown-body h1, .mx_Dialog .markdown-body h2 { font-size: 1.5em; - border-bottom: none !important; // override GFM + border-bottom: none !important; /* override GFM */ } .mx_Dialog .markdown-body a { @@ -397,8 +396,8 @@ legend { } .mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background { - // Roughly half of what it would normally be - we don't want to black out - // the app, just make it clear that the dialogs are stacked. + /* Roughly half of what it would normally be - we don't want to black out */ + /* the app, just make it clear that the dialogs are stacked. */ opacity: 0.4; } @@ -446,7 +445,7 @@ legend { text-align: center; } .mx_Dialog_header.mx_Dialog_headerWithCancel { - padding-right: 20px; // leave space for the 'X' cancel button + padding-right: 20px; /* leave space for the 'X' cancel button */ } .mx_Dialog_title.danger { @@ -487,7 +486,7 @@ legend { text-align: right; .mx_Dialog_buttons_additive { - // The consumer is responsible for positioning their elements. + /* The consumer is responsible for positioning their elements. */ float: left; } } @@ -499,12 +498,12 @@ legend { text-align: initial; margin-inline-start: auto; - // default gap among elements - column-gap: $spacing-8; // See margin-right below inside the button style - row-gap: 5px; // See margin-bottom below inside the button style + /* default gap among elements */ + column-gap: $spacing-8; /* See margin-right below inside the button style */ + row-gap: 5px; /* See margin-bottom below inside the button style */ button { - margin: 0 !important; // override the margin settings + margin: 0 !important; /* override the margin settings */ } } @@ -526,7 +525,7 @@ legend { margin-right: 8px; margin-bottom: 5px; - // flip colours for the secondary ones + /* flip colours for the secondary ones */ font-weight: 600; border: 1px solid $accent; color: $accent; @@ -598,7 +597,7 @@ legend { } .mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth { - max-width: 636px; // match splash image width + max-width: 636px; /* match splash image width */ .mx_AccessibleButton_kind_link { font-size: inherit; @@ -606,10 +605,10 @@ legend { } } -// TODO: Review mx_GeneralButton usage to see if it can use a different class -// These classes were brought in from the old UserSettings and are included here to avoid -// breaking the app. -// Ref: https://github.com/vector-im/element-web/issues/8420 +/* TODO: Review mx_GeneralButton usage to see if it can use a different class */ +/* These classes were brought in from the old UserSettings and are included here to avoid */ +/* breaking the app. */ +/* Ref: https://github.com/vector-im/element-web/issues/8420 */ .mx_GeneralButton { @mixin mx_DialogButton; display: inline; @@ -651,8 +650,8 @@ legend { margin-top: 69px; } -// username colors -// used by SenderProfile & RoomPreviewBar +/* username colors */ +/* used by SenderProfile & RoomPreviewBar */ .mx_Username_color1 { color: $username-variant1-color; } @@ -694,7 +693,7 @@ legend { padding: 6px 8px; } -// This is a workaround for our mixins not supporting child selectors +/* This is a workaround for our mixins not supporting child selectors */ .mx_Tooltip_dark { .mx_Tooltip_chevron::after { border-right-color: $tooltip-timeline-bg-color; diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 6903f473e1..444fa3b42a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -1,4 +1,4 @@ -// autogenerated by rethemendex.sh +/* autogenerated by rethemendex.sh */ @import "./_animations.pcss"; @import "./_common.pcss"; @import "./_font-sizes.pcss"; diff --git a/res/css/_spacing.pcss b/res/css/_spacing.pcss index 4022cb1f47..8bc2ac9391 100644 --- a/res/css/_spacing.pcss +++ b/res/css/_spacing.pcss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -// 1rem :: 10px +/* 1rem :: 10px */ $spacing-4: 4px; $spacing-8: 8px; diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss index 42032b14c1..19ac4148cc 100644 --- a/res/css/components/views/beacon/_BeaconListItem.pcss +++ b/res/css/components/views/beacon/_BeaconListItem.pcss @@ -50,7 +50,7 @@ limitations under the License. } .mx_BeaconListItem_status { - // override beacon status padding + /* override beacon status padding */ padding: 0 !important; margin-bottom: $spacing-8; diff --git a/res/css/components/views/beacon/_BeaconViewDialog.pcss b/res/css/components/views/beacon/_BeaconViewDialog.pcss index 0fff721053..da5fa1ef3b 100644 --- a/res/css/components/views/beacon/_BeaconViewDialog.pcss +++ b/res/css/components/views/beacon/_BeaconViewDialog.pcss @@ -29,7 +29,7 @@ limitations under the License. height: calc(80vh - 0.5px); overflow: hidden; - // sidebar is absolutely positioned inside + /* sidebar is absolutely positioned inside */ position: relative; .mx_Dialog_header { diff --git a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss index de7dfa035c..aa89c801d6 100644 --- a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss +++ b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss @@ -25,8 +25,8 @@ limitations under the License. color: #fff; font-size: $font-10px; - // panel backdrops overlay the whole sidepanel - // go above to get hover for title + /* panel backdrops overlay the whole sidepanel */ + /* go above to get hover for title */ z-index: 1; } diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss index cc22fd7a0c..f007124216 100644 --- a/res/css/components/views/beacon/_OwnBeaconStatus.pcss +++ b/res/css/components/views/beacon/_OwnBeaconStatus.pcss @@ -19,13 +19,13 @@ limitations under the License. } .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { - // align to top to make room for timestamp - // in bubble view + /* align to top to make room for timestamp */ + /* in bubble view */ align-self: start; } .mx_OwnBeaconStatus_destructiveButton { - // override button link_inline styles + /* override button link_inline styles */ color: $alert !important; font-weight: $font-semi-bold !important; } diff --git a/res/css/components/views/beacon/_ShareLatestLocation.pcss b/res/css/components/views/beacon/_ShareLatestLocation.pcss index cbdf34b9d7..4c84a72b77 100644 --- a/res/css/components/views/beacon/_ShareLatestLocation.pcss +++ b/res/css/components/views/beacon/_ShareLatestLocation.pcss @@ -20,9 +20,9 @@ limitations under the License. color: $secondary-content; } -// double class to be more specific than the general mx_CopyableText CSS rule +/* double class to be more specific than the general mx_CopyableText CSS rule */ .mx_CopyableText.mx_ShareLatestLocation_copy { - // override copyable text style to make compact + /* override copyable text style to make compact */ .mx_CopyableText_copyButton { height: 13px; margin-left: $spacing-8 !important; diff --git a/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss b/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss index 5f9a1920e8..4600181d5a 100644 --- a/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss +++ b/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss @@ -25,7 +25,7 @@ limitations under the License. background-color: $location-live-color; border-color: $location-live-color; padding: 2px; - // colors icon + /* colors icon */ color: white; } diff --git a/res/css/components/views/location/_MapError.pcss b/res/css/components/views/location/_MapError.pcss index 7dc8a684d1..9437df8b84 100644 --- a/res/css/components/views/location/_MapError.pcss +++ b/res/css/components/views/location/_MapError.pcss @@ -45,7 +45,7 @@ limitations under the License. .mx_MapError_heading { padding-top: $spacing-8; - // override h3 heading size + /* override h3 heading size */ font-size: inherit !important; font-weight: normal !important; } diff --git a/res/css/components/views/location/_Marker.pcss b/res/css/components/views/location/_Marker.pcss index 7a1baccf9f..f1e0e38b55 100644 --- a/res/css/components/views/location/_Marker.pcss +++ b/res/css/components/views/location/_Marker.pcss @@ -29,7 +29,7 @@ limitations under the License. justify-content: center; align-items: center; - // caret down + /* caret down */ &::before { content: ''; border-left: 5px solid transparent; diff --git a/res/css/components/views/location/_ShareType.pcss b/res/css/components/views/location/_ShareType.pcss index 4dd49d4470..186365a2ba 100644 --- a/res/css/components/views/location/_ShareType.pcss +++ b/res/css/components/views/location/_ShareType.pcss @@ -62,7 +62,7 @@ limitations under the License. background-color: $accent; border-radius: 50%; border: 14px solid $accent; - // colors icon + /* colors icon */ color: white; box-sizing: border-box; } @@ -82,7 +82,7 @@ limitations under the License. border-style: solid; border-radius: 50%; - // Live is styled by StyledLiveBeaconIcon + /* Live is styled by StyledLiveBeaconIcon */ &.Own { border-color: $accent; @@ -92,7 +92,7 @@ limitations under the License. border-color: $accent; background-color: $accent; padding: 7px; - // colors icon + /* colors icon */ color: white; } } diff --git a/res/css/components/views/messages/_MBeaconBody.pcss b/res/css/components/views/messages/_MBeaconBody.pcss index 446b7e6e3f..26f3653a84 100644 --- a/res/css/components/views/messages/_MBeaconBody.pcss +++ b/res/css/components/views/messages/_MBeaconBody.pcss @@ -39,7 +39,7 @@ limitations under the License. } .mx_MBeaconBody_withoutMapInfoLastUpdated { - // 48px lines up with icon in BeaconStatus + /* 48px lines up with icon in BeaconStatus */ margin-top: -$spacing-8; padding: 0 $spacing-8 $spacing-8 48px; @@ -50,15 +50,15 @@ limitations under the License. .mx_MBeaconBody_map { height: 100%; width: 100%; - z-index: 0; // keeps the entire map under the message action bars + z-index: 0; /* keeps the entire map under the message action bars */ cursor: pointer; } .mx_MBeaconBody_mapFallback, .mx_MBeaconBody_mapError { - // pushes spinner/icon up - // to appear more centered with the footer + /* pushes spinner/icon up */ + /* to appear more centered with the footer */ padding-bottom: 50px !important; } @@ -83,6 +83,6 @@ limitations under the License. } .mx_ReplyTile .mx_MBeaconBody { - // Prevent clicking a beacon within a reply + /* Prevent clicking a beacon within a reply */ pointer-events: none; } diff --git a/res/css/structures/_AutoHideScrollbar.pcss b/res/css/structures/_AutoHideScrollbar.pcss index 6eba5aabbe..b76970d167 100644 --- a/res/css/structures/_AutoHideScrollbar.pcss +++ b/res/css/structures/_AutoHideScrollbar.pcss @@ -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 { diff --git a/res/css/structures/_BackdropPanel.pcss b/res/css/structures/_BackdropPanel.pcss index 63a33276e1..18c544eea0 100644 --- a/res/css/structures/_BackdropPanel.pcss +++ b/res/css/structures/_BackdropPanel.pcss @@ -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); } diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index f270a01b71..6fe99e7760 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -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 { diff --git a/res/css/structures/_HeaderButtons.pcss b/res/css/structures/_HeaderButtons.pcss index 2d26e66c1c..96f6f2e9f9 100644 --- a/res/css/structures/_HeaderButtons.pcss +++ b/res/css/structures/_HeaderButtons.pcss @@ -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; } diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss index a85bb0c42b..6bfabd9c87 100644 --- a/res/css/structures/_HomePage.pcss +++ b/res/css/structures/_HomePage.pcss @@ -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; } diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss index fbf8341592..d420e5b842 100644 --- a/res/css/structures/_LeftPanel.pcss +++ b/res/css/structures/_LeftPanel.pcss @@ -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; diff --git a/res/css/structures/_MainSplit.pcss b/res/css/structures/_MainSplit.pcss index 00d3d3ca62..81f1a8ca05 100644 --- a/res/css/structures/_MainSplit.pcss +++ b/res/css/structures/_MainSplit.pcss @@ -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; diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss index 74d0f8fb4f..95d89cb3c8 100644 --- a/res/css/structures/_MatrixChat.pcss +++ b/res/css/structures/_MatrixChat.pcss @@ -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; diff --git a/res/css/structures/_NonUrgentToastContainer.pcss b/res/css/structures/_NonUrgentToastContainer.pcss index 826a812406..ba267342f3 100644 --- a/res/css/structures/_NonUrgentToastContainer.pcss +++ b/res/css/structures/_NonUrgentToastContainer.pcss @@ -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; } diff --git a/res/css/structures/_NotificationPanel.pcss b/res/css/structures/_NotificationPanel.pcss index a83c88a7ae..be5fd3f369 100644 --- a/res/css/structures/_NotificationPanel.pcss +++ b/res/css/structures/_NotificationPanel.pcss @@ -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 */ } } diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 153dedf6b7..532ddc867e 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -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; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index a25e172c73..0683e142b8 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -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; diff --git a/res/css/structures/_RoomDirectory.pcss b/res/css/structures/_RoomDirectory.pcss index 1589974741..f5ecc734d2 100644 --- a/res/css/structures/_RoomDirectory.pcss +++ b/res/css/structures/_RoomDirectory.pcss @@ -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; diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss index 8753137600..35c51307bc 100644 --- a/res/css/structures/_RoomSearch.pcss +++ b/res/css/structures/_RoomSearch.pcss @@ -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; diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 51fea7a49a..c401301921 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -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 */ } } } diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index b19173a313..dae85b857e 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -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 */ } } diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 32dda6b90d..1d075f76f3 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -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 { diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 9d23dd5fc9..7fdb2500b4 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -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 */ } } diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index f4d37e0e24..b39f57cbb0 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -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: ""; diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 526d2dcb9f..e8e9785f3c 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -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 */ } diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index 00c7cd05b4..94e9da5877 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -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 */ } } diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss index 4fe6773930..f3dfcf9aa4 100644 --- a/res/css/structures/_UploadBar.pcss +++ b/res/css/structures/_UploadBar.pcss @@ -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; diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 4d1b093b0b..cc99a843e5 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -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; diff --git a/res/css/structures/_VideoRoomView.pcss b/res/css/structures/_VideoRoomView.pcss index 3577e7b73e..aee8cc2816 100644 --- a/res/css/structures/_VideoRoomView.pcss +++ b/res/css/structures/_VideoRoomView.pcss @@ -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; } diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss index 638917f1c2..2638daf876 100644 --- a/res/css/structures/auth/_Login.pcss +++ b/res/css/structures/auth/_Login.pcss @@ -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 { diff --git a/res/css/views/audio_messages/_AudioPlayer.pcss b/res/css/views/audio_messages/_AudioPlayer.pcss index 6b8d0ca438..314632d6c0 100644 --- a/res/css/views/audio_messages/_AudioPlayer.pcss +++ b/res/css/views/audio_messages/_AudioPlayer.pcss @@ -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; } diff --git a/res/css/views/audio_messages/_PlayPauseButton.pcss b/res/css/views/audio_messages/_PlayPauseButton.pcss index 9548b62dfd..0c2573002e 100644 --- a/res/css/views/audio_messages/_PlayPauseButton.pcss +++ b/res/css/views/audio_messages/_PlayPauseButton.pcss @@ -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'); } } diff --git a/res/css/views/audio_messages/_PlaybackContainer.pcss b/res/css/views/audio_messages/_PlaybackContainer.pcss index ebfcf229b0..d2c101658c 100644 --- a/res/css/views/audio_messages/_PlaybackContainer.pcss +++ b/res/css/views/audio_messages/_PlaybackContainer.pcss @@ -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 . These classes -// are shared amongst multiple voice message components. +/* Dev note: there's no actual component called . 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; } } diff --git a/res/css/views/audio_messages/_SeekBar.pcss b/res/css/views/audio_messages/_SeekBar.pcss index 03449d009b..a61876e631 100644 --- a/res/css/views/audio_messages/_SeekBar.pcss +++ b/res/css/views/audio_messages/_SeekBar.pcss @@ -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; diff --git a/res/css/views/audio_messages/_Waveform.pcss b/res/css/views/audio_messages/_Waveform.pcss index cf03c84601..0b2c411194 100644 --- a/res/css/views/audio_messages/_Waveform.pcss +++ b/res/css/views/audio_messages/_Waveform.pcss @@ -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 */ } } diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index 81c3dda6e7..cdccfe157b 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -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; diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss index 43e0062eb3..dfa27ee120 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss @@ -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; } } diff --git a/res/css/views/avatars/_BaseAvatar.pcss b/res/css/views/avatars/_BaseAvatar.pcss index 0356264084..d51dabd48e 100644 --- a/res/css/views/avatars/_BaseAvatar.pcss +++ b/res/css/views/avatars/_BaseAvatar.pcss @@ -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; diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss index 7927f82c2f..3c2304565c 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.pcss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.pcss @@ -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%; diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 642e08f3f4..b47e7ca1b6 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -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; diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index 84be4301ff..48d2d72590 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -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; diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index f82a29c546..98df86871c 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -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; } diff --git a/res/css/views/dialogs/_BugReportDialog.pcss b/res/css/views/dialogs/_BugReportDialog.pcss index 348d9ebb99..435fd1972c 100644 --- a/res/css/views/dialogs/_BugReportDialog.pcss +++ b/res/css/views/dialogs/_BugReportDialog.pcss @@ -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..." */ } } } diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index 28e7388e0e..b20c17cd2a 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/res/css/views/dialogs/_CompoundDialog.pcss @@ -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 */ } } diff --git a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss index 3b21ea74de..09d80a3f2f 100644 --- a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss +++ b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index 959b599808..d433e6de59 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -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 { diff --git a/res/css/views/dialogs/_DevtoolsDialog.pcss b/res/css/views/dialogs/_DevtoolsDialog.pcss index 967d7c2fb9..a231587cab 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.pcss +++ b/res/css/views/dialogs/_DevtoolsDialog.pcss @@ -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; } diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss index 8d11b83fe1..d16401f09c 100644 --- a/res/css/views/dialogs/_FeedbackDialog.pcss +++ b/res/css/views/dialogs/_FeedbackDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_ForwardDialog.pcss b/res/css/views/dialogs/_ForwardDialog.pcss index 8e6a7d0508..bfb9626c9e 100644 --- a/res/css/views/dialogs/_ForwardDialog.pcss +++ b/res/css/views/dialogs/_ForwardDialog.pcss @@ -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; } diff --git a/res/css/views/dialogs/_HostSignupDialog.pcss b/res/css/views/dialogs/_HostSignupDialog.pcss index b1b7b18898..15c383f1e8 100644 --- a/res/css/views/dialogs/_HostSignupDialog.pcss +++ b/res/css/views/dialogs/_HostSignupDialog.pcss @@ -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 { diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index f529749eeb..ff0ed4fbe0 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -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 */ } diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.pcss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss index aa20efe89a..d63b29f3c1 100644 --- a/res/css/views/dialogs/_LeaveSpaceDialog.pcss +++ b/res/css/views/dialogs/_LeaveSpaceDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss index 9a05e7f20a..6ad2dc4d08 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss index 95cde3041a..c92ce13e2e 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 7c59ea1278..b49fda4db0 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -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 { diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index cad83e2a42..a242a99596 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss index a847419a94..72fc912ca6 100644 --- a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss @@ -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; diff --git a/res/css/views/dialogs/_ServerOfflineDialog.pcss b/res/css/views/dialogs/_ServerOfflineDialog.pcss index a4f7fad1be..dd027fc8d6 100644 --- a/res/css/views/dialogs/_ServerOfflineDialog.pcss +++ b/res/css/views/dialogs/_ServerOfflineDialog.pcss @@ -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 { diff --git a/res/css/views/dialogs/_SettingsDialog.pcss b/res/css/views/dialogs/_SettingsDialog.pcss index e982b6245f..71dedd3fe3 100644 --- a/res/css/views/dialogs/_SettingsDialog.pcss +++ b/res/css/views/dialogs/_SettingsDialog.pcss @@ -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; } } diff --git a/res/css/views/dialogs/_ShareDialog.pcss b/res/css/views/dialogs/_ShareDialog.pcss index a55849ea08..0d1a5824cb 100644 --- a/res/css/views/dialogs/_ShareDialog.pcss +++ b/res/css/views/dialogs/_ShareDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 9d1ebe2c86..cf6917a475 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -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 elements + /* To avoid any styling inherent with 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 elements + padding: 2px $spacing-4; /* TODO: Use a spacing variable */ + /* To avoid any styling inherent with elements */ font-family: inherit; font-weight: inherit; font-size: $font-12px; diff --git a/res/css/views/dialogs/_UserSettingsDialog.pcss b/res/css/views/dialogs/_UserSettingsDialog.pcss index 79cacb5c50..c778ad3dd2 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.pcss +++ b/res/css/views/dialogs/_UserSettingsDialog.pcss @@ -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'); diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss index c559467c9d..3c1eecb340 100644 --- a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss +++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss @@ -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; diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss index fc24f27858..11fd44207a 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss @@ -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; } } diff --git a/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss index 8303e02b9e..7255c49d91 100644 --- a/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss +++ b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss @@ -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 */ } } diff --git a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss index 4503e08fad..515d15bb5a 100644 --- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss +++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss @@ -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 */ } } diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss index e5b97c4f1b..f9a6a24516 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss @@ -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 */ } } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 5f6afbb043..7d01c17e12 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -38,8 +38,8 @@ limitations under the License. align-items: center; justify-content: center; font-size: $font-14px; - border: none; // override default