mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 18:55:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

Disallow invalid inline style comments in stylesheets (#9099)

Browse source
This commit is contained in:
Germain 2022-07-27 14:39:29 +01:00 committed by GitHub
parent 8eeeee1aa2
commit 72c24af5c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
193 changed files with 1520 additions and 1518 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.stylelintrc.js
View file

@ -48,5 +48,6 @@ module.exports = {
"selector-no-vendor-prefix": null, "selector-no-vendor-prefix": null,
"media-feature-name-no-vendor-prefix": null, "media-feature-name-no-vendor-prefix": null,
"number-max-precision": null, "number-max-precision": null,
"no-invalid-double-slash-comments": true,
}, },
} }

6
res/css/_animations.pcss
View file

@ -60,15 +60,15 @@ limitations under the License.
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
@keyframes mx--anim-pulse { @keyframes mx--anim-pulse {
// Override all keyframes in reduced-motion /* Override all keyframes in reduced-motion */
} }
@keyframes mx_Dialog_lightbox_background_keyframes { @keyframes mx_Dialog_lightbox_background_keyframes {
// Override all keyframes in reduced-motion /* Override all keyframes in reduced-motion */
} }
@keyframes mx_ImageView_panel_keyframes { @keyframes mx_ImageView_panel_keyframes {
// Override all keyframes in reduced-motion /* Override all keyframes in reduced-motion */
} }
.mx_rtg--fade-enter-active { .mx_rtg--fade-enter-active {

103
res/css/_common.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
@import "./_spacing.pcss"; @import "./_spacing.pcss";
@import url("maplibre-gl/dist/maplibre-gl.css"); @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; $selected-message-border-width: 4px;
@ -34,7 +34,7 @@ $slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em; $slider-selection-dot-size: 2.4em;
$container-border-width: 8px; $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; $timeline-image-border-radius: 8px;
:root { :root {
@ -56,7 +56,7 @@ html {
N.B. Breaks things when we have legitimate horizontal overscroll */ N.B. Breaks things when we have legitimate horizontal overscroll */
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
// Stop similar overscroll bounce in Firefox Nightly for macOS /* Stop similar overscroll bounce in Firefox Nightly for macOS */
overscroll-behavior: none; overscroll-behavior: none;
} }
@ -68,8 +68,8 @@ body {
border: 0px; border: 0px;
margin: 0px; margin: 0px;
// needed to match the designs correctly on macOS /* needed to match the designs correctly on macOS */
// see https://github.com/vector-im/element-web/issues/11425 /* see https://github.com/vector-im/element-web/issues/11425 */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@ -93,8 +93,8 @@ pre, code {
} }
b { b {
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold /* On Firefox, the default weight for `<b>` is `bolder` which results in no bold */
// effect since we only have specific weights of our fonts available. /* effect since we only have specific weights of our fonts available. */
font-weight: bold; font-weight: bold;
} }
@ -129,14 +129,14 @@ input[type="search"].mx_textinput_icon {
background-position: 10px center; 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="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].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'); background-image: url('$(res)/img/feather-customised/search-input.svg');
} }
// dont search UI as not all browsers support it, /* dont search UI as not all browsers support it, */
// we implement it ourselves where needed instead /* we implement it ourselves where needed instead */
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-button,
@ -144,7 +144,7 @@ input[type="search"]::-webkit-search-results-decoration {
display: none; 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, input::placeholder,
textarea::placeholder { textarea::placeholder {
opacity: initial; opacity: initial;
@ -165,15 +165,15 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
box-shadow: none; box-shadow: none;
} }
// This is used to hide the standard outline added by browsers for /* This is used to hide the standard outline added by browsers for */
// accessible (focusable) components. Not intended for buttons, but /* accessible (focusable) components. Not intended for buttons, but */
// should be used on things like focusable containers where the outline /* should be used on things like focusable containers where the outline */
// is usually not helping anyone. /* is usually not helping anyone. */
*:focus:not(.focus-visible) { *:focus:not(.focus-visible) {
outline: none; outline: none;
} }
// override defaults /* override defaults */
fieldset { fieldset {
display: inline-block; display: inline-block;
margin-inline: unset; margin-inline: unset;
@ -188,10 +188,10 @@ legend {
border: none; border: none;
} }
// .mx_textinput is a container for a text input /* .mx_textinput is a container for a text input */
// + some other controls like buttons, ... /* + some other controls like buttons, ... */
// it has the appearance of a text box so the controls /* it has the appearance of a text box so the controls */
// appear to be part of the input /* appear to be part of the input */
.mx_Dialog, .mx_MatrixChat_wrapper { .mx_Dialog, .mx_MatrixChat_wrapper {
.mx_textinput > input[type="text"], .mx_textinput > input[type="text"],
@ -210,7 +210,7 @@ legend {
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba($primary-content, .1); 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; margin: 9px;
} }
@ -254,11 +254,10 @@ legend {
border: 0; border: 0;
} }
// These are magic constants which are excluded from tinting, to let themes /* These are magic constants which are excluded from tinting, to let themes */
// (which only have CSS) tell the app what their non-tinted /* (which only have CSS) tell the app what their non-tinted */
// colourscheme is by inspecting the stylesheet DOM. /* colourscheme is by inspecting the stylesheet DOM. */
// /* They are not used for layout!! */
// They are not used for layout!!
#mx_theme_accentColor { #mx_theme_accentColor {
color: $accent; color: $accent;
} }
@ -304,12 +303,12 @@ legend {
overflow-y: auto; 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 { .mx_Dialog .markdown-body {
font-family: inherit !important; font-family: inherit !important;
white-space: normal !important; white-space: normal !important;
line-height: inherit !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; font-size: $font-14px;
pre, pre,
@ -318,13 +317,13 @@ legend {
background-color: $codeblock-background-color; 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 { 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 { 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; display: inline;
@ -332,9 +331,9 @@ legend {
} }
pre { pre {
// have to use overlay rather than auto otherwise Linux and Windows /* have to use overlay rather than auto otherwise Linux and Windows */
// Chrome gets very confused about vertical spacing: /* Chrome gets very confused about vertical spacing: */
// https://github.com/vector-im/vector-web/issues/754 /* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay; overflow-x: overlay;
overflow-y: visible; overflow-y: visible;
@ -358,7 +357,7 @@ legend {
.mx_Dialog .markdown-body h1, .mx_Dialog .markdown-body h1,
.mx_Dialog .markdown-body h2 { .mx_Dialog .markdown-body h2 {
font-size: 1.5em; font-size: 1.5em;
border-bottom: none !important; // override GFM border-bottom: none !important; /* override GFM */
} }
.mx_Dialog .markdown-body a { .mx_Dialog .markdown-body a {
@ -397,8 +396,8 @@ legend {
} }
.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background { .mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
// Roughly half of what it would normally be - we don't want to black out /* 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. /* the app, just make it clear that the dialogs are stacked. */
opacity: 0.4; opacity: 0.4;
} }
@ -446,7 +445,7 @@ legend {
text-align: center; text-align: center;
} }
.mx_Dialog_header.mx_Dialog_headerWithCancel { .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 { .mx_Dialog_title.danger {
@ -487,7 +486,7 @@ legend {
text-align: right; text-align: right;
.mx_Dialog_buttons_additive { .mx_Dialog_buttons_additive {
// The consumer is responsible for positioning their elements. /* The consumer is responsible for positioning their elements. */
float: left; float: left;
} }
} }
@ -499,12 +498,12 @@ legend {
text-align: initial; text-align: initial;
margin-inline-start: auto; margin-inline-start: auto;
// default gap among elements /* default gap among elements */
column-gap: $spacing-8; // See margin-right below inside the button style column-gap: $spacing-8; /* See margin-right below inside the button style */
row-gap: 5px; // See margin-bottom below inside the button style row-gap: 5px; /* See margin-bottom below inside the button style */
button { button {
margin: 0 !important; // override the margin settings margin: 0 !important; /* override the margin settings */
} }
} }
@ -526,7 +525,7 @@ legend {
margin-right: 8px; margin-right: 8px;
margin-bottom: 5px; margin-bottom: 5px;
// flip colours for the secondary ones /* flip colours for the secondary ones */
font-weight: 600; font-weight: 600;
border: 1px solid $accent; border: 1px solid $accent;
color: $accent; color: $accent;
@ -598,7 +597,7 @@ legend {
} }
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth { .mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
max-width: 636px; // match splash image width max-width: 636px; /* match splash image width */
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
font-size: inherit; font-size: inherit;
@ -606,10 +605,10 @@ legend {
} }
} }
// TODO: Review mx_GeneralButton usage to see if it can use a different class /* 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 /* These classes were brought in from the old UserSettings and are included here to avoid */
// breaking the app. /* breaking the app. */
// Ref: https://github.com/vector-im/element-web/issues/8420 /* Ref: https://github.com/vector-im/element-web/issues/8420 */
.mx_GeneralButton { .mx_GeneralButton {
@mixin mx_DialogButton; @mixin mx_DialogButton;
display: inline; display: inline;
@ -651,8 +650,8 @@ legend {
margin-top: 69px; margin-top: 69px;
} }
// username colors /* username colors */
// used by SenderProfile & RoomPreviewBar /* used by SenderProfile & RoomPreviewBar */
.mx_Username_color1 { .mx_Username_color1 {
color: $username-variant1-color; color: $username-variant1-color;
} }
@ -694,7 +693,7 @@ legend {
padding: 6px 8px; 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_dark {
.mx_Tooltip_chevron::after { .mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color; border-right-color: $tooltip-timeline-bg-color;

2
res/css/_components.pcss
View file

@ -1,4 +1,4 @@
// autogenerated by rethemendex.sh /* autogenerated by rethemendex.sh */
@import "./_animations.pcss"; @import "./_animations.pcss";
@import "./_common.pcss"; @import "./_common.pcss";
@import "./_font-sizes.pcss"; @import "./_font-sizes.pcss";

2
res/css/_spacing.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// 1rem :: 10px /* 1rem :: 10px */
$spacing-4: 4px; $spacing-4: 4px;
$spacing-8: 8px; $spacing-8: 8px;

2
res/css/components/views/beacon/_BeaconListItem.pcss
View file

@ -50,7 +50,7 @@ limitations under the License.
} }
.mx_BeaconListItem_status { .mx_BeaconListItem_status {
// override beacon status padding /* override beacon status padding */
padding: 0 !important; padding: 0 !important;
margin-bottom: $spacing-8; margin-bottom: $spacing-8;

2
res/css/components/views/beacon/_BeaconViewDialog.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
height: calc(80vh - 0.5px); height: calc(80vh - 0.5px);
overflow: hidden; overflow: hidden;
// sidebar is absolutely positioned inside /* sidebar is absolutely positioned inside */
position: relative; position: relative;
.mx_Dialog_header { .mx_Dialog_header {

4
res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
View file

@ -25,8 +25,8 @@ limitations under the License.
color: #fff; color: #fff;
font-size: $font-10px; font-size: $font-10px;
// panel backdrops overlay the whole sidepanel /* panel backdrops overlay the whole sidepanel */
// go above to get hover for title /* go above to get hover for title */
z-index: 1; z-index: 1;
} }

6
res/css/components/views/beacon/_OwnBeaconStatus.pcss
View file

@ -19,13 +19,13 @@ limitations under the License.
} }
.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
// align to top to make room for timestamp /* align to top to make room for timestamp */
// in bubble view /* in bubble view */
align-self: start; align-self: start;
} }
.mx_OwnBeaconStatus_destructiveButton { .mx_OwnBeaconStatus_destructiveButton {
// override button link_inline styles /* override button link_inline styles */
color: $alert !important; color: $alert !important;
font-weight: $font-semi-bold !important; font-weight: $font-semi-bold !important;
} }

4
res/css/components/views/beacon/_ShareLatestLocation.pcss
View file

@ -20,9 +20,9 @@ limitations under the License.
color: $secondary-content; 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 { .mx_CopyableText.mx_ShareLatestLocation_copy {
// override copyable text style to make compact /* override copyable text style to make compact */
.mx_CopyableText_copyButton { .mx_CopyableText_copyButton {
height: 13px; height: 13px;
margin-left: $spacing-8 !important; margin-left: $spacing-8 !important;

2
res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
View file

@ -25,7 +25,7 @@ limitations under the License.
background-color: $location-live-color; background-color: $location-live-color;
border-color: $location-live-color; border-color: $location-live-color;
padding: 2px; padding: 2px;
// colors icon /* colors icon */
color: white; color: white;
} }

2
res/css/components/views/location/_MapError.pcss
View file

@ -45,7 +45,7 @@ limitations under the License.
.mx_MapError_heading { .mx_MapError_heading {
padding-top: $spacing-8; padding-top: $spacing-8;
// override h3 heading size /* override h3 heading size */
font-size: inherit !important; font-size: inherit !important;
font-weight: normal !important; font-weight: normal !important;
} }

2
res/css/components/views/location/_Marker.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// caret down /* caret down */
&::before { &::before {
content: ''; content: '';
border-left: 5px solid transparent; border-left: 5px solid transparent;

6
res/css/components/views/location/_ShareType.pcss
View file

@ -62,7 +62,7 @@ limitations under the License.
background-color: $accent; background-color: $accent;
border-radius: 50%; border-radius: 50%;
border: 14px solid $accent; border: 14px solid $accent;
// colors icon /* colors icon */
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
} }
@ -82,7 +82,7 @@ limitations under the License.
border-style: solid; border-style: solid;
border-radius: 50%; border-radius: 50%;
// Live is styled by StyledLiveBeaconIcon /* Live is styled by StyledLiveBeaconIcon */
&.Own { &.Own {
border-color: $accent; border-color: $accent;
@ -92,7 +92,7 @@ limitations under the License.
border-color: $accent; border-color: $accent;
background-color: $accent; background-color: $accent;
padding: 7px; padding: 7px;
// colors icon /* colors icon */
color: white; color: white;
} }
} }

10
res/css/components/views/messages/_MBeaconBody.pcss
View file

@ -39,7 +39,7 @@ limitations under the License.
} }
.mx_MBeaconBody_withoutMapInfoLastUpdated { .mx_MBeaconBody_withoutMapInfoLastUpdated {
// 48px lines up with icon in BeaconStatus /* 48px lines up with icon in BeaconStatus */
margin-top: -$spacing-8; margin-top: -$spacing-8;
padding: 0 $spacing-8 $spacing-8 48px; padding: 0 $spacing-8 $spacing-8 48px;
@ -50,15 +50,15 @@ limitations under the License.
.mx_MBeaconBody_map { .mx_MBeaconBody_map {
height: 100%; height: 100%;
width: 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; cursor: pointer;
} }
.mx_MBeaconBody_mapFallback, .mx_MBeaconBody_mapFallback,
.mx_MBeaconBody_mapError { .mx_MBeaconBody_mapError {
// pushes spinner/icon up /* pushes spinner/icon up */
// to appear more centered with the footer /* to appear more centered with the footer */
padding-bottom: 50px !important; padding-bottom: 50px !important;
} }
@ -83,6 +83,6 @@ limitations under the License.
} }
.mx_ReplyTile .mx_MBeaconBody { .mx_ReplyTile .mx_MBeaconBody {
// Prevent clicking a beacon within a reply /* Prevent clicking a beacon within a reply */
pointer-events: none; pointer-events: none;
} }

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

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

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

@ -22,7 +22,7 @@ limitations under the License.
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
filter: blur(var(--lp-background-blur)); 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); transform: translateZ(0);
} }

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

@ -87,7 +87,7 @@ limitations under the License.
color: $light-fg-color; color: $light-fg-color;
} }
// anchor link as wrapper /* anchor link as wrapper */
.mx_EventTile_senderDetailsLink { .mx_EventTile_senderDetailsLink {
text-decoration: none; text-decoration: none;
@ -97,7 +97,7 @@ limitations under the License.
margin-top: -2px; margin-top: -2px;
.mx_DisambiguatedProfile { .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 { .mx_MessageTimestamp {

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

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

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

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

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

@ -29,7 +29,7 @@ $roomListCollapsedWidth: 68px;
max-width: 50%; max-width: 50%;
position: relative; 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; contain: layout paint;
} }
@ -37,7 +37,7 @@ $roomListCollapsedWidth: 68px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; 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 { .mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
@ -54,20 +54,20 @@ $roomListCollapsedWidth: 68px;
.mx_LeftPanel { .mx_LeftPanel {
background-color: $roomlist-bg-color; 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; display: flex;
contain: content; contain: content;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
// Note: The 'room list' in this context is actually everything that isn't the tag /* Note: The 'room list' in this context is actually everything that isn't the tag */
// panel, such as the menu options, breadcrumbs, filtering, etc /* panel, such as the menu options, breadcrumbs, filtering, etc */
.mx_LeftPanel_roomListContainer { .mx_LeftPanel_roomListContainer {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
flex: 1 0 0; flex: 1 0 0;
min-width: 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; display: flex;
flex-direction: column; flex-direction: column;
@ -76,9 +76,9 @@ $roomListCollapsedWidth: 68px;
* for internal whitespace in the breadcrumbs) * for internal whitespace in the breadcrumbs)
*/ */
padding: 12px; 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; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -88,8 +88,8 @@ $roomListCollapsedWidth: 68px;
overflow-x: scroll; overflow-x: scroll;
margin: 12px 12px 0 12px; margin: 12px 12px 0 12px;
flex: 0 0 auto; flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay /* Create yet another flexbox, this time within the row, to ensure items stay */
// aligned correctly. This is also a row-based flexbox. /* aligned correctly. This is also a row-based flexbox. */
display: flex; display: flex;
align-items: center; align-items: center;
contain: content; contain: content;
@ -112,9 +112,9 @@ $roomListCollapsedWidth: 68px;
padding: 12px 0 8px; padding: 12px 0 8px;
border-bottom: 1px solid $quinary-content; 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; display: flex;
align-items: center; align-items: center;
@ -186,11 +186,11 @@ $roomListCollapsedWidth: 68px;
} }
.mx_LeftPanel_roomListWrapper { .mx_LeftPanel_roomListWrapper {
// Make the y-scrollbar more responsive /* Make the y-scrollbar more responsive */
padding-right: 2px; padding-right: 2px;
overflow: hidden; overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter margin-top: 10px; /* so we're not up against the search/filter */
flex: 1 0 0; // needed in Safari to properly set flex-basis flex: 1 0 0; /* needed in Safari to properly set flex-basis */
&.mx_LeftPanel_roomListWrapper_stickyBottom { &.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px; padding-bottom: 32px;
@ -202,12 +202,12 @@ $roomListCollapsedWidth: 68px;
} }
.mx_LeftPanel_actualRoomListContainer { .mx_LeftPanel_actualRoomListContainer {
position: relative; // for sticky headers position: relative; /* for sticky headers */
height: 100%; // ensure scrolling still works 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 { &.mx_LeftPanel_minimized {
flex-grow: 0; flex-grow: 0;
min-width: unset; min-width: unset;
@ -222,7 +222,7 @@ $roomListCollapsedWidth: 68px;
} }
.mx_LeftPanel_filterContainer { .mx_LeftPanel_filterContainer {
// Organize the flexbox into a centered column layout /* Organize the flexbox into a centered column layout */
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

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

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

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

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

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

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

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

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

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

@ -26,7 +26,7 @@ limitations under the License.
&.expanded { &.expanded {
margin-left: 20px; margin-left: 20px;
padding-left: 44px; // align with toggle collapse button text padding-left: 44px; /* align with toggle collapse button text */
padding-right: 8px; padding-right: 8px;
} }
@ -56,7 +56,7 @@ limitations under the License.
padding: 16px; padding: 16px;
width: max-content; width: max-content;
min-width: 200px; 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 { > div > h2 {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;

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

@ -28,7 +28,7 @@ limitations under the License.
contain: strict; contain: strict;
.mx_RoomView_MessageList { .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 { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 4px; // center with parent of 32px top: 4px; /* center with parent of 32px */
left: 4px; // center with parent of 32px left: 4px; /* center with parent of 32px */
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $icon-button-color; background-color: $icon-button-color;

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

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

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

@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. 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 { .mx_RoomSearch {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
border-radius: 8px; border-radius: 8px;
background-color: $panel-actions; background-color: $panel-actions;
// keep border thickness consistent to prevent movement /* keep border thickness consistent to prevent movement */
border: 1px solid transparent; border: 1px solid transparent;
height: 28px; height: 28px;
padding: 1px; padding: 1px;
// Create a flexbox for the icons (easier to manage) /* Create a flexbox for the icons (easier to manage) */
display: flex; display: flex;
align-items: center; align-items: center;
@ -48,7 +48,7 @@ limitations under the License.
color: $tertiary-content; color: $tertiary-content;
flex: 1; flex: 1;
min-width: 0; 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; overflow: hidden;
margin: 9px; margin: 9px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;

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

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

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

@ -20,7 +20,7 @@ limitations under the License.
flex: 1; flex: 1;
position: relative; position: relative;
justify-content: center; 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; contain: strict;
} }
@ -171,7 +171,7 @@ limitations under the License.
padding: 0 24px; padding: 0 24px;
margin-right: 30px; margin-right: 30px;
text-align: center; text-align: center;
margin-bottom: 80px; // visually center the content (intentional offset) margin-bottom: 80px; /* visually center the content (intentional offset) */
} }
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker {
opacity: 1; opacity: 1;
} }
// Rooms with immersive content /* Rooms with immersive content */
.mx_RoomView_immersive .mx_RoomHeader_wrapper { .mx_RoomView_immersive .mx_RoomHeader_wrapper {
border: unset; border: unset;
} }
@ -274,7 +274,7 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 4px; margin-bottom: 4px;
h2 { h2 {
margin-top: 6px; // TODO: Use a spacing variable margin-top: 6px; /* TODO: Use a spacing variable */
} }
} }

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

@ -65,7 +65,7 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_outline, .mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_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; grid-template-columns: 20px auto;
gap: 6px 8px; gap: 6px 8px;
align-items: center; align-items: center;
flex: 1; // wrap action buttons flex: 1; /* wrap action buttons */
.mx_SpaceHierarchy_roomTile_avatar { .mx_SpaceHierarchy_roomTile_avatar {
grid-row: 1; grid-row: 1;
@ -259,7 +259,7 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_outline, .mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_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 { .mx_Checkbox {

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

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

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

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

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

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

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

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

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

@ -15,11 +15,11 @@ limitations under the License.
*/ */
.mx_UploadBar { .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; position: relative;
.mx_ProgressBar { .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; margin-top: 5px;
color: $muted-fg-color; color: $muted-fg-color;
position: relative; position: relative;
padding-left: 22px; // 18px for icon, 4px for padding padding-left: 22px; /* 18px for icon, 4px for padding */
font-size: $font-15px; font-size: $font-15px;
vertical-align: middle; vertical-align: middle;
@ -57,7 +57,7 @@ limitations under the License.
right: 0; right: 0;
height: 16px; height: 16px;
width: 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-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $muted-fg-color; background-color: $muted-fg-color;

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

@ -27,7 +27,7 @@ limitations under the License.
position: relative; position: relative;
.mx_BaseAvatar { .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 { .mx_UserMenu_contextMenu_header {
padding: 20px; padding: 20px;
// Create a flexbox to organize the header a bit easier /* Create a flexbox to organize the header a bit easier */
display: flex; display: flex;
align-items: center; align-items: center;
.mx_UserMenu_contextMenu_name { .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; display: flex;
flex-direction: column; 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_displayName,
.mx_UserMenu_contextMenu_userId { .mx_UserMenu_contextMenu_userId {
font-size: $font-15px; font-size: $font-15px;
// Automatically grow subelements to fit the container /* Automatically grow subelements to fit the container */
flex: 1; flex: 1;
width: 100%; width: 100%;
// Ellipsize text overflow /* Ellipsize text overflow */
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -122,7 +122,7 @@ limitations under the License.
background-color: $theme-button-bg-color; background-color: $theme-button-bg-color;
cursor: pointer; cursor: pointer;
// to make alignment easier, create flexbox for the image /* to make alignment easier, create flexbox for the image */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -33,7 +33,7 @@ limitations under the License.
border: none; 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 { .mx_VideoLobby ~ .mx_AppTile {
display: none; display: none;
} }

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

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

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

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

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

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

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

@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// Dev note: there's no actual component called <PlaybackContainer />. These classes /* Dev note: there's no actual component called <PlaybackContainer />. These classes */
// are shared amongst multiple voice message components. /* 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 { .mx_MediaBody.mx_VoiceMessagePrimaryContainer {
// The waveform (right) has a 1px padding on it that we want to account for, otherwise /* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
// inherit from mx_MediaBody /* inherit from mx_MediaBody */
padding-right: 11px; padding-right: 11px;
// Cheat at alignment a bit /* Cheat at alignment a bit */
display: flex; display: flex;
align-items: center; align-items: center;
contain: content; contain: content;
// Waveforms are present in live recording only /* Waveforms are present in live recording only */
.mx_Waveform { .mx_Waveform {
.mx_Waveform_bar { .mx_Waveform_bar {
background-color: $quaternary-content; background-color: $quaternary-content;
@ -38,7 +38,7 @@ limitations under the License.
transform: scaleY(max(0.05, var(--barHeight))); transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct { &.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; transition: background-color 250ms ease;
background-color: $secondary-content; background-color: $secondary-content;
} }
@ -46,10 +46,10 @@ limitations under the License.
} }
.mx_Clock { .mx_Clock {
width: $font-42px; // we're not using a monospace font, so fake it 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) 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-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 padding-left: 8px; /* isolate from recording circle / play control */
} }
.mx_RecordingPlayback_timelineLayoutMiddle { .mx_RecordingPlayback_timelineLayoutMiddle {
@ -58,7 +58,7 @@ limitations under the License.
position: relative; position: relative;
display: inline-block; display: inline-block;
flex: 1; 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 { .mx_Waveform {
left: 0; left: 0;
@ -69,10 +69,10 @@ limitations under the License.
position: absolute; position: absolute;
left: 0; left: 0;
height: 30px; 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 /* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
// because CSS is weird. /* because CSS is weird. */
background: none; background: none;
&::before { &::before {
background: none; background: none;
@ -81,10 +81,10 @@ limitations under the License.
background: none; background: none;
} }
// Make the thumb easier to see. Like the SeekBar original styles, these need to be /* 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 /* 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 /* 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. /* move and drag the thumb regardless of hitting the thumb, however. */
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
width: 10px; width: 10px;
height: 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 { & + .mx_Clock {
text-align: right; 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; padding: 0;
} }
} }

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

@ -14,31 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// CSS inspiration from: /* CSS inspiration from: */
// * https://www.w3schools.com/howto/howto_js_rangeslider.asp /* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
// * https://stackoverflow.com/a/28283806 /* * https://stackoverflow.com/a/28283806 */
// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ /* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar { .mx_SeekBar {
// Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
// need to support IE. /* need to support IE. */
appearance: none; // default style override appearance: none; /* default style override */
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $quaternary-content; background: $quaternary-content;
outline: none; // remove blue selection border outline: none; /* remove blue selection border */
position: relative; // for before+after pseudo elements later on position: relative; /* for before+after pseudo elements later on */
cursor: pointer; cursor: pointer;
&::-webkit-slider-thumb { &::-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 /* 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 /* because otherwise Edge (webkit) will fail to see the styles and just refuse */
// to apply them. /* to apply them. */
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
@ -53,33 +53,33 @@ limitations under the License.
background-color: $tertiary-content; background-color: $tertiary-content;
cursor: pointer; cursor: pointer;
// Firefox adds a border on the thumb /* Firefox adds a border on the thumb */
border: none; border: none;
} }
// This is for webkit support, but we can't limit the functionality of it to just webkit /* 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 /* 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 /* 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. /* in firefox, so it's just wasted CPU/GPU time. */
&::before { // ::before to ensure it ends up under the thumb &::before { /* ::before to ensure it ends up under the thumb */
content: ''; content: '';
background-color: $tertiary-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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
// Sizing to match the bar /* Sizing to match the bar */
width: 100%; width: 100%;
height: 1px; 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-origin: 0 100%;
transform: scaleX(var(--fillTo)); 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 { &::-moz-range-progress {
background-color: $tertiary-content; background-color: $tertiary-content;
height: 1px; height: 1px;
@ -89,9 +89,9 @@ limitations under the License.
opacity: 0.5; opacity: 0.5;
} }
// Increase clickable area for the slider (approximately same size as browser default) /* 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. /* 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/ /* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;

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

@ -16,25 +16,25 @@ limitations under the License.
.mx_Waveform { .mx_Waveform {
position: relative; position: relative;
height: 30px; // tallest bar can only be 30px height: 30px; /* tallest bar can only be 30px */
top: 1px; // because of our border trick (see below), we're off by 1px of aligntment top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
display: flex; 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 /* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
// with rounded caps. /* with rounded caps. */
.mx_Waveform_bar { .mx_Waveform_bar {
width: 0; // 0px width means we'll end up using the border as our width 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: 1px solid transparent; /* transparent means we'll use the background colour */
border-radius: 2px; // rounded end caps, based on the border 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 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 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-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
margin-right: 1px; margin-right: 1px;
// background color is handled by the parent components /* background color is handled by the parent components */
} }
} }

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

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

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

@ -42,14 +42,14 @@ limitations under the License.
width: 100%; width: 100%;
} }
// XXX: This should be a common button class /* XXX: This should be a common button class */
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled { .mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: $light-fg-color; background-color: $light-fg-color;
cursor: default; cursor: default;
} }
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled { .mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: #92caad; // Only used here background-color: #92caad; /* Only used here */
cursor: default; cursor: default;
} }
@ -76,18 +76,18 @@ limitations under the License.
} }
.mx_InteractiveAuthEntryComponents_emailWrapper { .mx_InteractiveAuthEntryComponents_emailWrapper {
// "Resend" button/link /* "Resend" button/link */
.mx_AccessibleButton_kind_link_inline { .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; display: inline-block !important;
// Spinner as end adornment of the "resend" button/link /* Spinner as end adornment of the "resend" button/link */
.mx_Spinner { .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; 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; 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; vertical-align: middle !important;
} }
} }

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

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

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

@ -27,7 +27,7 @@ limitations under the License.
.mx_DecoratedRoomAvatar_icon { .mx_DecoratedRoomAvatar_icon {
position: absolute; 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%; bottom: -6.25%;
right: -6.25%; right: -6.25%;
margin: 12.5%; margin: 12.5%;

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

@ -58,10 +58,10 @@ limitations under the License.
padding: 7px 40px; padding: 7px 40px;
width: auto; width: auto;
flex: 1; flex: 1;
white-space: nowrap; // text might overflow white-space: nowrap; /* text might overflow */
&:nth-child(1) { &: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; color: $button-primary-fg-color;
display: inline-block; display: inline-block;
vertical-align: text-bottom; 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 { &.mx_AccessibleButton {
cursor: pointer; cursor: pointer;

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

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. 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 { .mx_IconizedContextMenu {
min-width: 146px; min-width: 146px;
width: max-content; width: max-content;
@ -30,47 +30,47 @@ limitations under the License.
font-weight: $font-semi-bold; 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 { &: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, /* 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. /* 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 /* 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 /* 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 /* 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 /* 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 /* 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 { &::before {
border-top: 1px solid $primary-content; border-top: 1px solid $primary-content;
opacity: 0.1; opacity: 0.1;
content: ''; content: '';
// Counteract the padding problems (width: 100% ignores the 40px padding, /* Counteract the padding problems (width: 100% ignores the 40px padding, */
// unless we position it absolutely then it does the right thing). /* unless we position it absolutely then it does the right thing). */
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; 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 { &: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 { &: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 { &: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 { .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-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
text-decoration: none; text-decoration: none;
@ -78,7 +78,7 @@ limitations under the License.
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; 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; display: flex;
align-items: center; align-items: center;
@ -91,17 +91,17 @@ limitations under the License.
cursor: not-allowed; cursor: not-allowed;
} }
img, .mx_IconizedContextMenu_icon { // icons img, .mx_IconizedContextMenu_icon { /* icons */
width: 16px; width: 16px;
min-width: 16px; min-width: 16px;
max-width: 16px; max-width: 16px;
} }
span.mx_IconizedContextMenu_label { // labels span.mx_IconizedContextMenu_label { /* labels */
width: 100%; width: 100%;
flex: 1; flex: 1;
// Ellipsize any text overflow /* Ellipsize any text overflow */
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

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

@ -23,7 +23,7 @@ limitations under the License.
.mx_AddExistingToSpace { .mx_AddExistingToSpace {
.mx_SearchBox { .mx_SearchBox {
// To match the space around the title /* To match the space around the title */
margin: 0 0 15px 0; margin: 0 0 15px 0;
flex-grow: 0; flex-grow: 0;
} }
@ -226,7 +226,7 @@ limitations under the License.
display: flex; display: flex;
margin-top: 12px; 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 { .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
margin-right: 12px; margin-right: 12px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -26,13 +26,13 @@ limitations under the License.
.mx_InviteDialog_addressBar { .mx_InviteDialog_addressBar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
// for the user section gets weird. /* for the user section gets weird. */
margin: $spacing-8 45px 0 0; // TODO: Use a spacing variable margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
.mx_InviteDialog_editor { .mx_InviteDialog_editor {
flex: 1; 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; background-color: $header-panel-bg-color;
border-radius: 4px; border-radius: 4px;
min-height: 25px; min-height: 25px;
@ -43,14 +43,14 @@ limitations under the License.
flex-wrap: wrap; flex-wrap: wrap;
.mx_InviteDialog_userTile { .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; 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"] { > input[type="text"] {
margin: 6px 0 !important; // TODO: Use a spacing variable margin: 6px 0 !important; /* TODO: Use a spacing variable */
height: 24px; height: 24px;
line-height: $font-24px; line-height: $font-24px;
font-size: $font-14px; font-size: $font-14px;
@ -67,17 +67,17 @@ limitations under the License.
.mx_InviteDialog_goButton { .mx_InviteDialog_goButton {
min-width: 48px; min-width: 48px;
margin-inline-start: 10px; // TODO: Use a spacing variable margin-inline-start: 10px; /* TODO: Use a spacing variable */
height: 25px; height: 25px;
line-height: $font-25px; line-height: $font-25px;
} }
.mx_InviteDialog_buttonAndSpinner { .mx_InviteDialog_buttonAndSpinner {
.mx_Spinner { .mx_Spinner {
// Width and height are required to trick the layout engine. /* Width and height are required to trick the layout engine. */
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-inline-start: 5px; // TODO: Use a spacing variable margin-inline-start: 5px; /* TODO: Use a spacing variable */
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -103,7 +103,7 @@ limitations under the License.
} }
.mx_InviteDialog_section_showMore { .mx_InviteDialog_section_showMore {
margin: 7px 18px; // TODO: Use a spacing variable margin: 7px 18px; /* TODO: Use a spacing variable */
display: block; display: block;
} }
} }
@ -134,7 +134,7 @@ limitations under the License.
} }
.mx_CopyableText.mx_CopyableText_border { .mx_CopyableText.mx_CopyableText_border {
width: unset; // full width width: unset; /* full width */
margin-bottom: 0; margin-bottom: 0;
> a { > 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 { .mx_InviteDialog_userTile {
margin-inline-end: $spacing-8; margin-inline-end: $spacing-8;
@ -157,7 +157,7 @@ limitations under the License.
height: 24px; height: 24px;
line-height: $font-24px; line-height: $font-24px;
padding-inline: $spacing-8; 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 { .mx_SearchResultAvatar {
border-radius: 20px; border-radius: 20px;
@ -175,7 +175,7 @@ limitations under the License.
} }
.mx_SearchResultAvatar_threepidAvatar { .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 { .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; display: flex;
flex-direction: column; flex-direction: column;
height: 600px; height: 600px;
@ -252,7 +252,7 @@ limitations under the License.
.mx_InviteDialog_userSections { .mx_InviteDialog_userSections {
margin-top: $spacing-4; margin-top: $spacing-4;
overflow-y: auto; 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 { .mx_InviteDialog_helpText {
@ -289,7 +289,7 @@ limitations under the License.
.mx_DialPad { .mx_DialPad {
row-gap: $spacing-16; row-gap: $spacing-16;
column-gap: 48px; // TODO: Use a spacing variable column-gap: 48px; /* TODO: Use a spacing variable */
margin-inline: auto; margin-inline: auto;
} }
} }
@ -327,7 +327,7 @@ limitations under the License.
align-items: center; align-items: center;
&.mx_InviteDialog_tile--room { &.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; grid-template-columns: min-content auto auto;
padding: $spacing-4 $spacing-8; padding: $spacing-4 $spacing-8;
@ -350,9 +350,9 @@ limitations under the License.
mask-size: 100%; mask-size: 100%;
mask-repeat: no-repeat; mask-repeat: no-repeat;
position: absolute; position: absolute;
top: 6px; // 50% top: 6px; /* 50% */
left: 6px; // 50% left: 6px; /* 50% */
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 */
} }
} }
@ -369,7 +369,7 @@ limitations under the License.
} }
&.mx_InviteDialog_tile--inviterError { &.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; margin-bottom: $spacing-24;
&:last-child { &:last-child {
@ -450,5 +450,5 @@ limitations under the License.
} }
.mx_InviteDialog_identityServer { .mx_InviteDialog_identityServer {
margin-top: 1em; // TODO: Use a spacing variable margin-top: 1em; /* TODO: Use a spacing variable */
} }

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

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

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

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

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

@ -51,9 +51,9 @@ limitations under the License.
text-decoration: underline; text-decoration: underline;
} }
// Emulate mx_EventTile[data-layout="group"] /* Emulate mx_EventTile[data-layout="group"] */
.mx_EventTile { .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 { .mx_MessageTimestamp {
position: absolute; position: absolute;

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

@ -45,7 +45,7 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 11px; 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 { .mx_Field {
flex: 1; flex: 1;
@ -79,7 +79,7 @@ limitations under the License.
.mx_PollCreateDialog_addOption { .mx_PollCreateDialog_addOption {
padding: 0; 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 { .mx_AccessibleButton_disabled {

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

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// ICONS /* ICONS */
// ========================================================== /* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before { .mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/element-icons/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
@ -34,7 +34,7 @@ limitations under the License.
} }
.mx_RoomSettingsDialog_bridgesIcon::before { .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'); mask-image: url('$(res)/img/feather-customised/bridge.svg');
} }
@ -51,7 +51,7 @@ limitations under the License.
padding-right: 80px; 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 { .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
mask: url("$(res)/img/feather-customised/image.svg"); mask: url("$(res)/img/feather-customised/image.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;

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

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

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

@ -38,13 +38,13 @@ limitations under the License.
display: inline-block; display: inline-block;
width: 115px; width: 115px;
color: $muted-fg-color; color: $muted-fg-color;
line-height: 24px; // same as avatar line-height: 24px; /* same as avatar */
vertical-align: top; vertical-align: top;
} }
.mx_ServerOfflineDialog_content_context_timeline { .mx_ServerOfflineDialog_content_context_timeline {
display: inline-block; 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 { .mx_ServerOfflineDialog_content_context_timeline_header {
span { span {
@ -58,7 +58,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
.mx_ServerOfflineDialog_content_context_txn_desc { .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 { .mx_AccessibleButton {

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

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. 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_UserSettingsDialog,
.mx_RoomSettingsDialog, .mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog, .mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog { .mx_SpacePreferencesDialog {
width: 90vw; width: 90vw;
max-width: 1000px; max-width: 1000px;
// set the height too since tabbed view scrolls itself. /* set the height too since tabbed view scrolls itself. */
height: 80vh; height: 80vh;
.mx_TabbedView { .mx_TabbedView {
@ -35,8 +35,8 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// Put some padding on the bottom to avoid the settings tab from /* Put some padding on the bottom to avoid the settings tab from */
// colliding harshly with the dialog when scrolled down. /* colliding harshly with the dialog when scrolled down. */
padding-bottom: 100px; padding-bottom: 100px;
} }
} }

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

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

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

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

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

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

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

@ -37,16 +37,16 @@ limitations under the License.
} }
.mx_Dialog_buttons { .mx_Dialog_buttons {
margin-top: 40px; // double normal margin-top: 40px; /* double normal */
} }
.mx_SettingsFlag { .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; color: $muted-fg-color;
font-size: $font-12px; font-size: $font-12px;
.mx_ToggleSwitch { .mx_ToggleSwitch {
// downsize the switch + ball /* downsize the switch + ball */
width: $font-32px; width: $font-32px;
height: $font-15px; height: $font-15px;

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

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

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

@ -15,15 +15,15 @@ limitations under the License.
*/ */
.mx_CreateCrossSigningDialog { .mx_CreateCrossSigningDialog {
// Why you ask? Because CompleteSecurityBody is 600px so this is the width /* 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 /* 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 /* 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 /* really wide or really narrow depending on the phase. I bet you wish you */
// never asked. /* never asked. */
width: 560px; width: 560px;
details .mx_AccessibleButton { details .mx_AccessibleButton {
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
} }
} }

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

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

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

@ -16,11 +16,11 @@ limitations under the License.
*/ */
.mx_CreateSecretStorageDialog { .mx_CreateSecretStorageDialog {
// Why you ask? Because CompleteSecurityBody is 600px so this is the width /* 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 /* 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 /* 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 /* really wide or really narrow depending on the phase. I bet you wish you */
// never asked. /* never asked. */
width: 560px; width: 560px;
.mx_SettingsFlag { .mx_SettingsFlag {
@ -39,7 +39,7 @@ limitations under the License.
} }
details .mx_AccessibleButton { details .mx_AccessibleButton {
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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