imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Disallow invalid inline style comments in stylesheets (#9099)

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

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

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

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

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

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.
*/
// Dev note: there's no actual component called <PlaybackContainer />. These classes
// are shared amongst multiple voice message components.
/* Dev note: there's no actual component called <PlaybackContainer />. These classes */
/* are shared amongst multiple voice message components. */
// Container for live recording and playback controls
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
// The waveform (right) has a 1px padding on it that we want to account for, otherwise
// inherit from mx_MediaBody
/* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
/* inherit from mx_MediaBody */
padding-right: 11px;
// Cheat at alignment a bit
/* Cheat at alignment a bit */
display: flex;
align-items: center;
contain: content;
// Waveforms are present in live recording only
/* Waveforms are present in live recording only */
.mx_Waveform {
.mx_Waveform_bar {
background-color: $quaternary-content;
@ -38,7 +38,7 @@ limitations under the License.
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress
/* Small animation to remove the mechanical feel of progress */
transition: background-color 250ms ease;
background-color: $secondary-content;
}
@ -46,10 +46,10 @@ limitations under the License.
}
.mx_Clock {
width: $font-42px; // we're not using a monospace font, so fake it
min-width: $font-42px; // force sensible layouts in awkward flexboxes (file panel, for example)
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
padding-left: 8px; // isolate from recording circle / play control
width: $font-42px; /* we're not using a monospace font, so fake it */
min-width: $font-42px; /* force sensible layouts in awkward flexboxes (file panel, for example) */
padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
padding-left: 8px; /* isolate from recording circle / play control */
}
.mx_RecordingPlayback_timelineLayoutMiddle {
@ -58,7 +58,7 @@ limitations under the License.
position: relative;
display: inline-block;
flex: 1;
height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
height: 30px; /* same height as mx_Waveform, needed for automatic vertical centering */
.mx_Waveform {
left: 0;
@ -69,10 +69,10 @@ limitations under the License.
position: absolute;
left: 0;
height: 30px;
top: -2px; // visually vertically centered
top: -2px; /* visually vertically centered */
// Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
// because CSS is weird.
/* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
/* because CSS is weird. */
background: none;
&::before {
background: none;
@ -81,10 +81,10 @@ limitations under the License.
background: none;
}
// Make the thumb easier to see. Like the SeekBar original styles, these need to be
// distinct. We make it transparent so it doesn't show up on the UI, but also larger
// so it's easier to grab by mouse users in some browsers. Most browsers let the user
// move and drag the thumb regardless of hitting the thumb, however.
/* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
/* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
/* so it's easier to grab by mouse users in some browsers. Most browsers let the user */
/* move and drag the thumb regardless of hitting the thumb, however. */
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
@ -97,11 +97,11 @@ limitations under the License.
}
}
// For timeline-rendered playback, the clock is on the other side of the waveform.
/* For timeline-rendered playback, the clock is on the other side of the waveform. */
& + .mx_Clock {
text-align: right;
// Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
/* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
padding: 0;
}
}

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.
*/
// CSS inspiration from:
// * https://www.w3schools.com/howto/howto_js_rangeslider.asp
// * https://stackoverflow.com/a/28283806
// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
/* CSS inspiration from: */
/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
/* * https://stackoverflow.com/a/28283806 */
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
// Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't
// need to support IE.
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */
appearance: none; // default style override
appearance: none; /* default style override */
width: 100%;
height: 1px;
background: $quaternary-content;
outline: none; // remove blue selection border
position: relative; // for before+after pseudo elements later on
outline: none; /* remove blue selection border */
position: relative; /* for before+after pseudo elements later on */
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none; // default style override
appearance: none; /* default style override */
// Dev note: This needs to be duplicated with the -moz-range-thumb selector
// because otherwise Edge (webkit) will fail to see the styles and just refuse
// to apply them.
/* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
/* because otherwise Edge (webkit) will fail to see the styles and just refuse */
/* to apply them. */
width: 8px;
height: 8px;
border-radius: 8px;
@ -53,33 +53,33 @@ limitations under the License.
background-color: $tertiary-content;
cursor: pointer;
// Firefox adds a border on the thumb
/* Firefox adds a border on the thumb */
border: none;
}
// This is for webkit support, but we can't limit the functionality of it to just webkit
// browsers. Firefox responds to webkit-prefixed values now, which means we can't use media
// or support queries to selectively apply the rule. An upside is that this CSS doesn't work
// in firefox, so it's just wasted CPU/GPU time.
&::before { // ::before to ensure it ends up under the thumb
/* This is for webkit support, but we can't limit the functionality of it to just webkit */
/* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */
/* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */
/* in firefox, so it's just wasted CPU/GPU time. */
&::before { /* ::before to ensure it ends up under the thumb */
content: '';
background-color: $tertiary-content;
// Absolute positioning to ensure it overlaps with the existing bar
/* Absolute positioning to ensure it overlaps with the existing bar */
position: absolute;
top: 0;
left: 0;
// Sizing to match the bar
/* Sizing to match the bar */
width: 100%;
height: 1px;
// And finally dynamic width without overly hurting the rendering engine.
/* And finally dynamic width without overly hurting the rendering engine. */
transform-origin: 0 100%;
transform: scaleX(var(--fillTo));
}
// This is firefox's built-in support for the above, with 100% less hacks.
/* This is firefox's built-in support for the above, with 100% less hacks. */
&::-moz-range-progress {
background-color: $tertiary-content;
height: 1px;
@ -89,9 +89,9 @@ limitations under the License.
opacity: 0.5;
}
// Increase clickable area for the slider (approximately same size as browser default)
// We do it this way to keep the same padding and margins of the element, avoiding margin math.
// Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
/* Increase clickable area for the slider (approximately same size as browser default) */
/* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
/* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
&::after {
content: '';
position: absolute;

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

@ -16,25 +16,25 @@ limitations under the License.
.mx_Waveform {
position: relative;
height: 30px; // tallest bar can only be 30px
top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
height: 30px; /* tallest bar can only be 30px */
top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
display: flex;
align-items: center; // so the bars grow from the middle
align-items: center; /* so the bars grow from the middle */
overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */
// A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
// with rounded caps.
/* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
/* with rounded caps. */
.mx_Waveform_bar {
width: 0; // 0px width means we'll end up using the border as our width
border: 1px solid transparent; // transparent means we'll use the background colour
border-radius: 2px; // rounded end caps, based on the border
min-height: 0; // like the width, we'll rely on the border to give us height
max-height: 100%; // this makes the `height: 42%` work on the element
margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
width: 0; /* 0px width means we'll end up using the border as our width */
border: 1px solid transparent; /* transparent means we'll use the background colour */
border-radius: 2px; /* rounded end caps, based on the border */
min-height: 0; /* like the width, we'll rely on the border to give us height */
max-height: 100%; /* this makes the `height: 42%` work on the element */
margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
margin-right: 1px;
// background color is handled by the parent components
/* background color is handled by the parent components */
}
}