mirror of
https://github.com/element-hq/element-web
synced 2024-11-22 09:15:41 +03:00
Disallow invalid inline style comments in stylesheets (#9099)
This commit is contained in:
Germain
GitHub
parent
8eeeee1aa2
commit
72c24af5c0
193 changed files with 1520 additions and 1518 deletions
|
|
@ -48,5 +48,6 @@ module.exports = {
|
|||
"selector-no-vendor-prefix": null,
|
||||
"media-feature-name-no-vendor-prefix": null,
|
||||
"number-max-precision": null,
|
||||
"no-invalid-double-slash-comments": true,
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,15 +60,15 @@ limitations under the License.
|
|||
|
||||
@media (prefers-reduced-motion) {
|
||||
@keyframes mx--anim-pulse {
|
||||
// Override all keyframes in reduced-motion
|
||||
/* Override all keyframes in reduced-motion */
|
||||
}
|
||||
|
||||
@keyframes mx_Dialog_lightbox_background_keyframes {
|
||||
// Override all keyframes in reduced-motion
|
||||
/* Override all keyframes in reduced-motion */
|
||||
}
|
||||
|
||||
@keyframes mx_ImageView_panel_keyframes {
|
||||
// Override all keyframes in reduced-motion
|
||||
/* Override all keyframes in reduced-motion */
|
||||
}
|
||||
|
||||
.mx_rtg--fade-enter-active {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
@import "./_spacing.pcss";
|
||||
@import url("maplibre-gl/dist/maplibre-gl.css");
|
||||
|
||||
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
|
||||
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); /* quadratic */
|
||||
|
||||
$selected-message-border-width: 4px;
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ $slider-dot-size: 1em;
|
|||
$slider-selection-dot-size: 2.4em;
|
||||
|
||||
$container-border-width: 8px;
|
||||
$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values.
|
||||
$container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
|
||||
|
||||
$timeline-image-border-radius: 8px;
|
||||
:root {
|
||||
|
|
@ -56,7 +56,7 @@ html {
|
|||
N.B. Breaks things when we have legitimate horizontal overscroll */
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// Stop similar overscroll bounce in Firefox Nightly for macOS
|
||||
/* Stop similar overscroll bounce in Firefox Nightly for macOS */
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
|
|
@ -68,8 +68,8 @@ body {
|
|||
border: 0px;
|
||||
margin: 0px;
|
||||
|
||||
// needed to match the designs correctly on macOS
|
||||
// see https://github.com/vector-im/element-web/issues/11425
|
||||
/* needed to match the designs correctly on macOS */
|
||||
/* see https://github.com/vector-im/element-web/issues/11425 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -93,8 +93,8 @@ pre, code {
|
|||
}
|
||||
|
||||
b {
|
||||
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold
|
||||
// effect since we only have specific weights of our fonts available.
|
||||
/* 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. */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -129,14 +129,14 @@ input[type="search"].mx_textinput_icon {
|
|||
background-position: 10px center;
|
||||
}
|
||||
|
||||
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
|
||||
/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
|
||||
input[type="text"].mx_textinput_icon.mx_textinput_search,
|
||||
input[type="search"].mx_textinput_icon.mx_textinput_search {
|
||||
background-image: url('$(res)/img/feather-customised/search-input.svg');
|
||||
}
|
||||
|
||||
// dont search UI as not all browsers support it,
|
||||
// we implement it ourselves where needed instead
|
||||
/* dont search UI as not all browsers support it, */
|
||||
/* we implement it ourselves where needed instead */
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
|
|
@ -144,7 +144,7 @@ input[type="search"]::-webkit-search-results-decoration {
|
|||
display: none;
|
||||
}
|
||||
|
||||
// Override Firefox's UA style so we get a consistent look across browsers
|
||||
/* Override Firefox's UA style so we get a consistent look across browsers */
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: initial;
|
||||
|
|
@ -165,15 +165,15 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
// This is used to hide the standard outline added by browsers for
|
||||
// accessible (focusable) components. Not intended for buttons, but
|
||||
// should be used on things like focusable containers where the outline
|
||||
// is usually not helping anyone.
|
||||
/* This is used to hide the standard outline added by browsers for */
|
||||
/* accessible (focusable) components. Not intended for buttons, but */
|
||||
/* should be used on things like focusable containers where the outline */
|
||||
/* is usually not helping anyone. */
|
||||
*:focus:not(.focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// override defaults
|
||||
/* override defaults */
|
||||
fieldset {
|
||||
display: inline-block;
|
||||
margin-inline: unset;
|
||||
|
|
@ -188,10 +188,10 @@ legend {
|
|||
border: none;
|
||||
}
|
||||
|
||||
// .mx_textinput is a container for a text input
|
||||
// + some other controls like buttons, ...
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
/* .mx_textinput is a container for a text input */
|
||||
/* + some other controls like buttons, ... */
|
||||
/* it has the appearance of a text box so the controls */
|
||||
/* appear to be part of the input */
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat_wrapper {
|
||||
.mx_textinput > input[type="text"],
|
||||
|
|
@ -210,7 +210,7 @@ legend {
|
|||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba($primary-content, .1);
|
||||
// these things should probably not be defined globally
|
||||
/* these things should probably not be defined globally */
|
||||
margin: 9px;
|
||||
}
|
||||
|
||||
|
|
@ -254,11 +254,10 @@ legend {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
// These are magic constants which are excluded from tinting, to let themes
|
||||
// (which only have CSS) tell the app what their non-tinted
|
||||
// colourscheme is by inspecting the stylesheet DOM.
|
||||
//
|
||||
// They are not used for layout!!
|
||||
/* These are magic constants which are excluded from tinting, to let themes */
|
||||
/* (which only have CSS) tell the app what their non-tinted */
|
||||
/* colourscheme is by inspecting the stylesheet DOM. */
|
||||
/* They are not used for layout!! */
|
||||
#mx_theme_accentColor {
|
||||
color: $accent;
|
||||
}
|
||||
|
|
@ -304,12 +303,12 @@ legend {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants.
|
||||
/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
|
||||
.mx_Dialog .markdown-body {
|
||||
font-family: inherit !important;
|
||||
white-space: normal !important;
|
||||
line-height: inherit !important;
|
||||
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
|
||||
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
|
||||
font-size: $font-14px;
|
||||
|
||||
pre,
|
||||
|
|
@ -318,13 +317,13 @@ legend {
|
|||
background-color: $codeblock-background-color;
|
||||
}
|
||||
|
||||
// this selector wrongly applies to code blocks too but we will unset it in the next one
|
||||
/* this selector wrongly applies to code blocks too but we will unset it in the next one */
|
||||
code {
|
||||
white-space: pre-wrap; // don't collapse spaces in inline code blocks
|
||||
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre; // we want code blocks to be scrollable and not wrap
|
||||
white-space: pre; /* we want code blocks to be scrollable and not wrap */
|
||||
|
||||
>* {
|
||||
display: inline;
|
||||
|
|
@ -332,9 +331,9 @@ legend {
|
|||
}
|
||||
|
||||
pre {
|
||||
// have to use overlay rather than auto otherwise Linux and Windows
|
||||
// Chrome gets very confused about vertical spacing:
|
||||
// https://github.com/vector-im/vector-web/issues/754
|
||||
/* have to use overlay rather than auto otherwise Linux and Windows */
|
||||
/* Chrome gets very confused about vertical spacing: */
|
||||
/* https://github.com/vector-im/vector-web/issues/754 */
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
|
||||
|
|
@ -358,7 +357,7 @@ legend {
|
|||
.mx_Dialog .markdown-body h1,
|
||||
.mx_Dialog .markdown-body h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: none !important; // override GFM
|
||||
border-bottom: none !important; /* override GFM */
|
||||
}
|
||||
|
||||
.mx_Dialog .markdown-body a {
|
||||
|
|
@ -397,8 +396,8 @@ legend {
|
|||
}
|
||||
|
||||
.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
|
||||
// Roughly half of what it would normally be - we don't want to black out
|
||||
// the app, just make it clear that the dialogs are stacked.
|
||||
/* Roughly half of what it would normally be - we don't want to black out */
|
||||
/* the app, just make it clear that the dialogs are stacked. */
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
|
@ -446,7 +445,7 @@ legend {
|
|||
text-align: center;
|
||||
}
|
||||
.mx_Dialog_header.mx_Dialog_headerWithCancel {
|
||||
padding-right: 20px; // leave space for the 'X' cancel button
|
||||
padding-right: 20px; /* leave space for the 'X' cancel button */
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
|
|
@ -487,7 +486,7 @@ legend {
|
|||
text-align: right;
|
||||
|
||||
.mx_Dialog_buttons_additive {
|
||||
// The consumer is responsible for positioning their elements.
|
||||
/* The consumer is responsible for positioning their elements. */
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -499,12 +498,12 @@ legend {
|
|||
text-align: initial;
|
||||
margin-inline-start: auto;
|
||||
|
||||
// default gap among elements
|
||||
column-gap: $spacing-8; // See margin-right below inside the button style
|
||||
row-gap: 5px; // See margin-bottom below inside the button style
|
||||
/* default gap among elements */
|
||||
column-gap: $spacing-8; /* See margin-right below inside the button style */
|
||||
row-gap: 5px; /* See margin-bottom below inside the button style */
|
||||
|
||||
button {
|
||||
margin: 0 !important; // override the margin settings
|
||||
margin: 0 !important; /* override the margin settings */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -526,7 +525,7 @@ legend {
|
|||
margin-right: 8px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// flip colours for the secondary ones
|
||||
/* flip colours for the secondary ones */
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent;
|
||||
color: $accent;
|
||||
|
|
@ -598,7 +597,7 @@ legend {
|
|||
}
|
||||
|
||||
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
|
||||
max-width: 636px; // match splash image width
|
||||
max-width: 636px; /* match splash image width */
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
font-size: inherit;
|
||||
|
|
@ -606,10 +605,10 @@ legend {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: Review mx_GeneralButton usage to see if it can use a different class
|
||||
// These classes were brought in from the old UserSettings and are included here to avoid
|
||||
// breaking the app.
|
||||
// Ref: https://github.com/vector-im/element-web/issues/8420
|
||||
/* TODO: Review mx_GeneralButton usage to see if it can use a different class */
|
||||
/* These classes were brought in from the old UserSettings and are included here to avoid */
|
||||
/* breaking the app. */
|
||||
/* Ref: https://github.com/vector-im/element-web/issues/8420 */
|
||||
.mx_GeneralButton {
|
||||
@mixin mx_DialogButton;
|
||||
display: inline;
|
||||
|
|
@ -651,8 +650,8 @@ legend {
|
|||
margin-top: 69px;
|
||||
}
|
||||
|
||||
// username colors
|
||||
// used by SenderProfile & RoomPreviewBar
|
||||
/* username colors */
|
||||
/* used by SenderProfile & RoomPreviewBar */
|
||||
.mx_Username_color1 {
|
||||
color: $username-variant1-color;
|
||||
}
|
||||
|
|
@ -694,7 +693,7 @@ legend {
|
|||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
// This is a workaround for our mixins not supporting child selectors
|
||||
/* This is a workaround for our mixins not supporting child selectors */
|
||||
.mx_Tooltip_dark {
|
||||
.mx_Tooltip_chevron::after {
|
||||
border-right-color: $tooltip-timeline-bg-color;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// autogenerated by rethemendex.sh
|
||||
/* autogenerated by rethemendex.sh */
|
||||
@import "./_animations.pcss";
|
||||
@import "./_common.pcss";
|
||||
@import "./_font-sizes.pcss";
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// 1rem :: 10px
|
||||
/* 1rem :: 10px */
|
||||
|
||||
$spacing-4: 4px;
|
||||
$spacing-8: 8px;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BeaconListItem_status {
|
||||
// override beacon status padding
|
||||
/* override beacon status padding */
|
||||
padding: 0 !important;
|
||||
margin-bottom: $spacing-8;
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ limitations under the License.
|
|||
height: calc(80vh - 0.5px);
|
||||
overflow: hidden;
|
||||
|
||||
// sidebar is absolutely positioned inside
|
||||
/* sidebar is absolutely positioned inside */
|
||||
position: relative;
|
||||
|
||||
.mx_Dialog_header {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ limitations under the License.
|
|||
color: #fff;
|
||||
font-size: $font-10px;
|
||||
|
||||
// panel backdrops overlay the whole sidepanel
|
||||
// go above to get hover for title
|
||||
/* panel backdrops overlay the whole sidepanel */
|
||||
/* go above to get hover for title */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
|
||||
// align to top to make room for timestamp
|
||||
// in bubble view
|
||||
/* align to top to make room for timestamp */
|
||||
/* in bubble view */
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.mx_OwnBeaconStatus_destructiveButton {
|
||||
// override button link_inline styles
|
||||
/* override button link_inline styles */
|
||||
color: $alert !important;
|
||||
font-weight: $font-semi-bold !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ limitations under the License.
|
|||
color: $secondary-content;
|
||||
}
|
||||
|
||||
// double class to be more specific than the general mx_CopyableText CSS rule
|
||||
/* double class to be more specific than the general mx_CopyableText CSS rule */
|
||||
.mx_CopyableText.mx_ShareLatestLocation_copy {
|
||||
// override copyable text style to make compact
|
||||
/* override copyable text style to make compact */
|
||||
.mx_CopyableText_copyButton {
|
||||
height: 13px;
|
||||
margin-left: $spacing-8 !important;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ limitations under the License.
|
|||
background-color: $location-live-color;
|
||||
border-color: $location-live-color;
|
||||
padding: 2px;
|
||||
// colors icon
|
||||
/* colors icon */
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ limitations under the License.
|
|||
|
||||
.mx_MapError_heading {
|
||||
padding-top: $spacing-8;
|
||||
// override h3 heading size
|
||||
/* override h3 heading size */
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ limitations under the License.
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// caret down
|
||||
/* caret down */
|
||||
&::before {
|
||||
content: '';
|
||||
border-left: 5px solid transparent;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ limitations under the License.
|
|||
background-color: $accent;
|
||||
border-radius: 50%;
|
||||
border: 14px solid $accent;
|
||||
// colors icon
|
||||
/* colors icon */
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ limitations under the License.
|
|||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
|
||||
// Live is styled by StyledLiveBeaconIcon
|
||||
/* Live is styled by StyledLiveBeaconIcon */
|
||||
|
||||
&.Own {
|
||||
border-color: $accent;
|
||||
|
|
@ -92,7 +92,7 @@ limitations under the License.
|
|||
border-color: $accent;
|
||||
background-color: $accent;
|
||||
padding: 7px;
|
||||
// colors icon
|
||||
/* colors icon */
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MBeaconBody_withoutMapInfoLastUpdated {
|
||||
// 48px lines up with icon in BeaconStatus
|
||||
/* 48px lines up with icon in BeaconStatus */
|
||||
margin-top: -$spacing-8;
|
||||
padding: 0 $spacing-8 $spacing-8 48px;
|
||||
|
||||
|
|
@ -50,15 +50,15 @@ limitations under the License.
|
|||
.mx_MBeaconBody_map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0; // keeps the entire map under the message action bars
|
||||
z-index: 0; /* keeps the entire map under the message action bars */
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MBeaconBody_mapFallback,
|
||||
.mx_MBeaconBody_mapError {
|
||||
// pushes spinner/icon up
|
||||
// to appear more centered with the footer
|
||||
/* pushes spinner/icon up */
|
||||
/* to appear more centered with the footer */
|
||||
padding-bottom: 50px !important;
|
||||
}
|
||||
|
||||
|
|
@ -83,6 +83,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ReplyTile .mx_MBeaconBody {
|
||||
// Prevent clicking a beacon within a reply
|
||||
/* Prevent clicking a beacon within a reply */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// make any scrollbar grey and thin
|
||||
/* make any scrollbar grey and thin */
|
||||
html {
|
||||
scrollbar-color: $scrollbar-thumb-color transparent;
|
||||
}
|
||||
// scrollbar-width is not inherited (but -color is, why?!),
|
||||
// so declare it on every element
|
||||
/* scrollbar-width is not inherited (but -color is, why?!), */
|
||||
/* so declare it on every element */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@ html {
|
|||
background-color: $scrollbar-thumb-color;
|
||||
}
|
||||
|
||||
// make auto-hide scrollbars not transparent again on hover
|
||||
/* make auto-hide scrollbars not transparent again on hover */
|
||||
.mx_AutoHideScrollbar:hover {
|
||||
scrollbar-color: $scrollbar-thumb-color transparent;
|
||||
|
||||
|
|
@ -43,11 +43,11 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
// make scrollbars transparent for autohide scrollbars
|
||||
/* make scrollbars transparent for autohide scrollbars */
|
||||
.mx_AutoHideScrollbar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: overlay; // where supported
|
||||
overflow-y: overlay; /* where supported */
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
filter: blur(var(--lp-background-blur));
|
||||
// Force a new layer for the backdropPanel so it's better hardware supported
|
||||
/* Force a new layer for the backdropPanel so it's better hardware supported */
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ limitations under the License.
|
|||
color: $light-fg-color;
|
||||
}
|
||||
|
||||
// anchor link as wrapper
|
||||
/* anchor link as wrapper */
|
||||
.mx_EventTile_senderDetailsLink {
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ limitations under the License.
|
|||
margin-top: -2px;
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
color: $event-timestamp-color; // for ellipsis. Color of displayName and mxid is inherited
|
||||
color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_buttons + .mx_HeaderButtons {
|
||||
// remove the | separator line for when next to RoomHeaderButtons
|
||||
// TODO: remove this once when we redo communities and make the right panel similar to the new rooms one
|
||||
/* remove the | separator line for when next to RoomHeaderButtons */
|
||||
/* TODO: remove this once when we redo communities and make the right panel similar to the new rooms one */
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ limitations under the License.
|
|||
width: fit-content;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
|
||||
padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
|
||||
|
||||
width: 160px;
|
||||
min-height: 132px;
|
||||
|
|
@ -76,18 +76,18 @@ limitations under the License.
|
|||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
color: #fff; // on all themes
|
||||
color: #fff; /* on all themes */
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
top: 20px;
|
||||
left: 60px; // (160px-40px)/2
|
||||
left: 60px; /* (160px-40px)/2 */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: #fff; // on all themes
|
||||
background-color: #fff; /* on all themes */
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ $roomListCollapsedWidth: 68px;
|
|||
max-width: 50%;
|
||||
position: relative;
|
||||
|
||||
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
|
||||
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ $roomListCollapsedWidth: 68px;
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 100%; // ensure space panel is still scrollable with an outer wrapper
|
||||
height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
|
||||
|
||||
.mx_LeftPanel_wrapper--user {
|
||||
background-color: $roomlist-bg-color;
|
||||
|
|
@ -54,20 +54,20 @@ $roomListCollapsedWidth: 68px;
|
|||
.mx_LeftPanel {
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
// Create a row-based flexbox for the space panel and the room list
|
||||
/* Create a row-based flexbox for the space panel and the room list */
|
||||
display: flex;
|
||||
contain: content;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
/* Note: The 'room list' in this context is actually everything that isn't the tag */
|
||||
/* panel, such as the menu options, breadcrumbs, filtering, etc */
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
background-color: $roomlist-bg-color;
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
/* Create another flexbox (this time a column) for the room list components */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -76,9 +76,9 @@ $roomListCollapsedWidth: 68px;
|
|||
* for internal whitespace in the breadcrumbs)
|
||||
*/
|
||||
padding: 12px;
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
|
||||
|
||||
// Create another flexbox column for the rows to stack within
|
||||
/* Create another flexbox column for the rows to stack within */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -88,8 +88,8 @@ $roomListCollapsedWidth: 68px;
|
|||
overflow-x: scroll;
|
||||
margin: 12px 12px 0 12px;
|
||||
flex: 0 0 auto;
|
||||
// Create yet another flexbox, this time within the row, to ensure items stay
|
||||
// aligned correctly. This is also a row-based flexbox.
|
||||
/* Create yet another flexbox, this time within the row, to ensure items stay */
|
||||
/* aligned correctly. This is also a row-based flexbox. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
contain: content;
|
||||
|
|
@ -112,9 +112,9 @@ $roomListCollapsedWidth: 68px;
|
|||
padding: 12px 0 8px;
|
||||
border-bottom: 1px solid $quinary-content;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
|
||||
|
||||
// Create a flexbox to organize the inputs
|
||||
/* Create a flexbox to organize the inputs */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -186,11 +186,11 @@ $roomListCollapsedWidth: 68px;
|
|||
}
|
||||
|
||||
.mx_LeftPanel_roomListWrapper {
|
||||
// Make the y-scrollbar more responsive
|
||||
/* Make the y-scrollbar more responsive */
|
||||
padding-right: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px; // so we're not up against the search/filter
|
||||
flex: 1 0 0; // needed in Safari to properly set flex-basis
|
||||
margin-top: 10px; /* so we're not up against the search/filter */
|
||||
flex: 1 0 0; /* needed in Safari to properly set flex-basis */
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyBottom {
|
||||
padding-bottom: 32px;
|
||||
|
|
@ -202,12 +202,12 @@ $roomListCollapsedWidth: 68px;
|
|||
}
|
||||
|
||||
.mx_LeftPanel_actualRoomListContainer {
|
||||
position: relative; // for sticky headers
|
||||
height: 100%; // ensure scrolling still works
|
||||
position: relative; /* for sticky headers */
|
||||
height: 100%; /* ensure scrolling still works */
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
/* These styles override the defaults for the minimized (66px) layout */
|
||||
&.mx_LeftPanel_minimized {
|
||||
flex-grow: 0;
|
||||
min-width: unset;
|
||||
|
|
@ -222,7 +222,7 @@ $roomListCollapsedWidth: 68px;
|
|||
}
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
/* Organize the flexbox into a centered column layout */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ limitations under the License.
|
|||
|
||||
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
|
||||
padding: $container-gap-width;
|
||||
// The resizer should be centered: only half of the gap-width is handled by the right panel.
|
||||
// The other half by the RoomView.
|
||||
/* The resizer should be centered: only half of the gap-width is handled by the right panel. */
|
||||
/* The other half by the RoomView. */
|
||||
padding-left: calc($container-gap-width / 2);
|
||||
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
|
||||
height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
|
||||
|
||||
&:hover .mx_ResizeHandle_horizontal::before {
|
||||
position: absolute;
|
||||
|
|
@ -35,7 +35,7 @@ limitations under the License.
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
height: 64px; // to match width of the ones on roomlist
|
||||
height: 64px; /* to match width of the ones on roomlist */
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ limitations under the License.
|
|||
|
||||
.mx_MatrixChat_syncError {
|
||||
color: $accent-fg-color;
|
||||
background-color: #DF2A8B; // Only used here
|
||||
background-color: #DF2A8B; /* Only used here */
|
||||
border-radius: 5px;
|
||||
display: table;
|
||||
padding: 30px;
|
||||
|
|
@ -76,22 +76,22 @@ limitations under the License.
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
// We'd like to remove this, but this makes matrixchat's resizehandle's
|
||||
// negative margin greater than its positive padding. If it's the same
|
||||
// or less, Safari and other WebKit based browsers get confused about overflows somehow and
|
||||
// https://github.com/vector-im/element-web/issues/19863 happens.
|
||||
/* We'd like to remove this, but this makes matrixchat's resizehandle's */
|
||||
/* negative margin greater than its positive padding. If it's the same */
|
||||
/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
|
||||
/* https://github.com/vector-im/element-web/issues/19863 happens. */
|
||||
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
|
||||
margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
|
||||
// The condition to prevent bleeding is: (margin-left + margin-right < -11px)
|
||||
// (IF there is NO margin on the leftPanel_wrapper)
|
||||
// The resizeHandle does not change the gap between the left panel and the room view:
|
||||
// the resizeHandle width is:
|
||||
// 11px = 10px (padding) + 1px (width)
|
||||
// and the total negative margin is -12px ->
|
||||
// the handle requires no space
|
||||
// right: -6px left: -6px positions the element exactly on the edge of leftPanel.
|
||||
// left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
|
||||
// We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
|
||||
/* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
|
||||
/* (IF there is NO margin on the leftPanel_wrapper) */
|
||||
/* The resizeHandle does not change the gap between the left panel and the room view: */
|
||||
/* the resizeHandle width is: */
|
||||
/* 11px = 10px (padding) + 1px (width) */
|
||||
/* and the total negative margin is -12px -> */
|
||||
/* the handle requires no space */
|
||||
/* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
|
||||
/* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
|
||||
/* We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) */
|
||||
}
|
||||
|
||||
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
|
||||
|
|
@ -103,7 +103,7 @@ limitations under the License.
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
height: 64px; // to match width of the ones on roomlist
|
||||
height: 64px; /* to match width of the ones on roomlist */
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 28px;
|
||||
z-index: 101; // same level as other toasts
|
||||
z-index: 101; /* same level as other toasts */
|
||||
|
||||
.mx_NonUrgentToastContainer_toast {
|
||||
padding: 10px 12px;
|
||||
|
|
@ -27,8 +27,8 @@ limitations under the License.
|
|||
font-size: $font-13px;
|
||||
margin-top: 8px;
|
||||
|
||||
// We don't use variables on the colours because we want it to be the same
|
||||
// in all themes.
|
||||
/* We don't use variables on the colours because we want it to be the same */
|
||||
/* in all themes. */
|
||||
background-color: #17191c;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile_senderDetails,
|
||||
.mx_EventTile_line {
|
||||
padding-left: 36px; // align with the room name
|
||||
padding-left: 36px; /* align with the room name */
|
||||
}
|
||||
|
||||
.mx_EventTile_senderDetails {
|
||||
|
|
@ -57,7 +57,7 @@ limitations under the License.
|
|||
|
||||
a {
|
||||
display: flex;
|
||||
column-gap: 5px; // TODO: Use a spacing variable
|
||||
column-gap: 5px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ limitations under the License.
|
|||
|
||||
&.expanded {
|
||||
margin-left: 20px;
|
||||
padding-left: 44px; // align with toggle collapse button text
|
||||
padding-left: 44px; /* align with toggle collapse button text */
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ limitations under the License.
|
|||
padding: 16px;
|
||||
width: max-content;
|
||||
min-width: 200px;
|
||||
contain: unset; // let the dropdown paint beyond the context menu
|
||||
contain: unset; /* let the dropdown paint beyond the context menu */
|
||||
|
||||
> div > h2 {
|
||||
font-weight: $font-semi-bold;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ limitations under the License.
|
|||
contain: strict;
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
|
||||
padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,8 +61,8 @@ limitations under the License.
|
|||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px; // center with parent of 32px
|
||||
left: 4px; // center with parent of 32px
|
||||
top: 4px; /* center with parent of 32px */
|
||||
left: 4px; /* center with parent of 32px */
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $icon-button-color;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ limitations under the License.
|
|||
font-size: $font-14px;
|
||||
line-height: $font-20px;
|
||||
color: $secondary-content;
|
||||
max-width: 464px; // easier reading
|
||||
max-width: 464px; /* easier reading */
|
||||
}
|
||||
|
||||
> hr {
|
||||
|
|
@ -125,8 +125,8 @@ limitations under the License.
|
|||
mask: url("$(res)/img/feather-customised/user.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
// scale it down and make the size slightly bigger (16 instead of 14px)
|
||||
// to avoid rendering artifacts
|
||||
/* scale it down and make the size slightly bigger (16 instead of 14px) */
|
||||
/* to avoid rendering artifacts */
|
||||
mask-size: 80%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// Note: this component expects to be contained within a flexbox
|
||||
/* Note: this component expects to be contained within a flexbox */
|
||||
.mx_RoomSearch {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
// keep border thickness consistent to prevent movement
|
||||
/* keep border thickness consistent to prevent movement */
|
||||
border: 1px solid transparent;
|
||||
height: 28px;
|
||||
padding: 1px;
|
||||
|
||||
// Create a flexbox for the icons (easier to manage)
|
||||
/* Create a flexbox for the icons (easier to manage) */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ limitations under the License.
|
|||
color: $tertiary-content;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
// the following rules are to match that of a real input field
|
||||
/* the following rules are to match that of a real input field */
|
||||
overflow: hidden;
|
||||
margin: 9px;
|
||||
font-weight: $font-semi-bold;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_unsentMessages {
|
||||
> div[role="alert"] {
|
||||
// cheat some basic alignment
|
||||
/* cheat some basic alignment */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 70px;
|
||||
|
|
@ -84,13 +84,13 @@ limitations under the License.
|
|||
margin-right: 12px;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
// Override sizing from the default badge
|
||||
/* Override sizing from the default badge */
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 24px !important;
|
||||
|
||||
.mx_NotificationBadge_count {
|
||||
font-size: $font-16px !important; // override default
|
||||
font-size: $font-16px !important; /* override default */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton {
|
||||
padding: 5px 10px;
|
||||
padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
|
||||
padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -123,14 +123,14 @@ limitations under the License.
|
|||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px; // inset for regular button padding
|
||||
left: 10px; /* inset for regular button padding */
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 50%; // text sizes are dynamic
|
||||
top: 50%; /* text sizes are dynamic */
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&.mx_RoomStatusBar_unsentRetry {
|
||||
padding-left: 34px; // 28px from above, but +6px to account for the wider icon
|
||||
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/retry.svg');
|
||||
|
|
@ -150,10 +150,10 @@ limitations under the License.
|
|||
.mx_InlineSpinner {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
top: 1px; // just to help the vertical alignment be slightly better
|
||||
top: 1px; /* just to help the vertical alignment be slightly better */
|
||||
|
||||
& + span {
|
||||
margin-right: 10px; // same margin/padding as the rightmost button
|
||||
margin-right: 10px; /* same margin/padding as the rightmost button */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
flex: 1;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
|
||||
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ limitations under the License.
|
|||
padding: 0 24px;
|
||||
margin-right: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 80px; // visually center the content (intentional offset)
|
||||
margin-bottom: 80px; /* visually center the content (intentional offset) */
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
|
|
@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
// Rooms with immersive content
|
||||
/* Rooms with immersive content */
|
||||
.mx_RoomView_immersive .mx_RoomHeader_wrapper {
|
||||
border: unset;
|
||||
}
|
||||
|
|
@ -274,7 +274,7 @@ hr.mx_RoomView_myReadMarker {
|
|||
margin-bottom: 4px;
|
||||
|
||||
h2 {
|
||||
margin-top: 6px; // TODO: Use a spacing variable
|
||||
margin-top: 6px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton_kind_danger_outline,
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
padding: 3px 12px; // to account for the 1px border
|
||||
padding: 3px 12px; /* to account for the 1px border */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +174,7 @@ limitations under the License.
|
|||
grid-template-columns: 20px auto;
|
||||
gap: 6px 8px;
|
||||
align-items: center;
|
||||
flex: 1; // wrap action buttons
|
||||
flex: 1; /* wrap action buttons */
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_avatar {
|
||||
grid-row: 1;
|
||||
|
|
@ -259,7 +259,7 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton_kind_danger_outline,
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
padding: 3px 16px; // to account for the 1px border
|
||||
padding: 3px 16px; /* to account for the 1px border */
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ $activeBorderColor: $primary-content;
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
// Fix for the blurred avatar-background
|
||||
/* Fix for the blurred avatar-background */
|
||||
z-index: 1;
|
||||
|
||||
// Create another flexbox so the Panel fills the container
|
||||
/* Create another flexbox so the Panel fills the container */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ $activeBorderColor: $primary-content;
|
|||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: $tertiary-content;
|
||||
top: 19px; // v-align with avatar
|
||||
top: 19px; /* v-align with avatar */
|
||||
right: -8px;
|
||||
|
||||
&::before {
|
||||
|
|
@ -233,7 +233,7 @@ $activeBorderColor: $primary-content;
|
|||
&::before {
|
||||
background-color: $primary-content;
|
||||
mask-image: url('$(res)/img/element-icons/plus.svg');
|
||||
transition: all .2s ease-in-out; // TODO transition
|
||||
transition: all .2s ease-in-out; /* TODO transition */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +247,7 @@ $activeBorderColor: $primary-content;
|
|||
|
||||
.mx_SpaceButton_menuButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
min-width: 20px; /* yay flex */
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
|
@ -282,7 +282,7 @@ $activeBorderColor: $primary-content;
|
|||
color: $secondary-content;
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
font-size: $font-15px !important; // override inline style
|
||||
font-size: $font-15px !important; /* override inline style */
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
|
||||
|
|
@ -297,7 +297,7 @@ $activeBorderColor: $primary-content;
|
|||
}
|
||||
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
/* Create a flexbox to make aligning dot badges easier */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
|
|
@ -305,12 +305,12 @@ $activeBorderColor: $primary-content;
|
|||
top: -3px;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin: 0 2px; // centering
|
||||
margin: 0 2px; /* centering */
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
/* make the smaller dot occupy the same width for centering */
|
||||
margin: 0 -1px 0 0;
|
||||
border: 3px solid $spacePanel-bg-color;
|
||||
}
|
||||
|
|
@ -421,7 +421,7 @@ $activeBorderColor: $primary-content;
|
|||
display: none;
|
||||
|
||||
& + .mx_IconizedContextMenu_label {
|
||||
padding-left: 5px !important; // override default iconized label style to align with header
|
||||
padding-left: 5px !important; /* override default iconized label style to align with header */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
display: block;
|
||||
margin-top: 44px;
|
||||
width: $SpaceRoomViewInnerWidth;
|
||||
text-align: right; // button alignment right
|
||||
text-align: right; /* button alignment right */
|
||||
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 8px 22px;
|
||||
|
|
@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
|
||||
input.mx_AccessibleButton {
|
||||
border: none; // override default styles
|
||||
border: none; /* override default styles */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,9 +154,9 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
// XXX: Temporary for the Spaces release only
|
||||
/* XXX: Temporary for the Spaces release only */
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
padding: 7px; // 8px - 1px border
|
||||
padding: 7px; /* 8px - 1px border */
|
||||
border: 1px solid rgba($primary-content, .1);
|
||||
border-radius: 8px;
|
||||
width: max-content;
|
||||
|
|
@ -230,7 +230,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
left: 8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #fff; // white icon fill
|
||||
background: #fff; /* white icon fill */
|
||||
mask-size: 16px;
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
|
|
@ -282,7 +282,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates {
|
||||
// XXX remove this when spaces leaves Beta
|
||||
/* XXX remove this when spaces leaves Beta */
|
||||
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
|
@ -307,7 +307,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 32px;
|
||||
line-height: 24px; // to center icons
|
||||
line-height: 24px; /* to center icons */
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabbedView_tabPanel {
|
||||
margin-left: 240px; // 170px sidebar + 70px padding
|
||||
margin-left: 240px; /* 170px sidebar + 70px padding */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -146,11 +146,11 @@ limitations under the License.
|
|||
.mx_TabbedView_tabPanel {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
min-height: 0; // firefox
|
||||
min-height: 0; /* firefox */
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabPanelContent {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
min-height: 0; // firefox
|
||||
min-height: 0; /* firefox */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
// white infill for the hollow svg mask
|
||||
/* white infill for the hollow svg mask */
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
|
|
@ -126,7 +126,7 @@ limitations under the License.
|
|||
font-size: $font-12px;
|
||||
line-height: $font-22px;
|
||||
color: $secondary-content;
|
||||
margin-inline-start: auto; // on the end side of the div
|
||||
margin-inline-start: auto; /* on the end side of the div */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_UploadBar {
|
||||
padding-left: 65px; // line up with the shield area in the composer
|
||||
padding-left: 65px; /* line up with the shield area in the composer */
|
||||
position: relative;
|
||||
|
||||
.mx_ProgressBar {
|
||||
width: calc(100% - 40px); // cheating at a right margin
|
||||
width: calc(100% - 40px); /* cheating at a right margin */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ limitations under the License.
|
|||
margin-top: 5px;
|
||||
color: $muted-fg-color;
|
||||
position: relative;
|
||||
padding-left: 22px; // 18px for icon, 4px for padding
|
||||
padding-left: 22px; /* 18px for icon, 4px for padding */
|
||||
font-size: $font-15px;
|
||||
vertical-align: middle;
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ limitations under the License.
|
|||
right: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 16px; // align over rightmost button in composer
|
||||
margin-right: 16px; /* align over rightmost button in composer */
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $muted-fg-color;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
position: relative;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
pointer-events: none; // makes the avatar non-draggable
|
||||
pointer-events: none; /* makes the avatar non-draggable */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -78,25 +78,25 @@ limitations under the License.
|
|||
.mx_UserMenu_contextMenu_header {
|
||||
padding: 20px;
|
||||
|
||||
// Create a flexbox to organize the header a bit easier
|
||||
/* Create a flexbox to organize the header a bit easier */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_contextMenu_name {
|
||||
// Create another flexbox of columns to handle large user IDs
|
||||
/* Create another flexbox of columns to handle large user IDs */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
|
||||
width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
|
||||
|
||||
.mx_UserMenu_contextMenu_displayName,
|
||||
.mx_UserMenu_contextMenu_userId {
|
||||
font-size: $font-15px;
|
||||
|
||||
// Automatically grow subelements to fit the container
|
||||
/* Automatically grow subelements to fit the container */
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize text overflow
|
||||
/* Ellipsize text overflow */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -122,7 +122,7 @@ limitations under the License.
|
|||
background-color: $theme-button-bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
// to make alignment easier, create flexbox for the image
|
||||
/* to make alignment easier, create flexbox for the image */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ limitations under the License.
|
|||
border: none;
|
||||
}
|
||||
|
||||
// While the lobby is shown, the widget needs to stay loaded but hidden in the background
|
||||
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
|
||||
.mx_VideoLobby ~ .mx_AppTile {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
|
||||
color: #ff8d13; // Only used here
|
||||
color: #ff8d13; /* Only used here */
|
||||
}
|
||||
|
||||
.mx_Login_type_container {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter {
|
||||
height: 80px; // height of the submit button + register link
|
||||
height: 80px; /* height of the submit button + register link */
|
||||
padding-top: 28px;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@ limitations under the License.
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
// XXX: This should be a common button class
|
||||
/* XXX: This should be a common button class */
|
||||
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
|
||||
background-color: $light-fg-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
|
||||
background-color: #92caad; // Only used here
|
||||
background-color: #92caad; /* Only used here */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -76,18 +76,18 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_emailWrapper {
|
||||
// "Resend" button/link
|
||||
/* "Resend" button/link */
|
||||
.mx_AccessibleButton_kind_link_inline {
|
||||
// We need this to be an inline-block so positioning works correctly
|
||||
/* We need this to be an inline-block so positioning works correctly */
|
||||
display: inline-block !important;
|
||||
|
||||
// Spinner as end adornment of the "resend" button/link
|
||||
/* Spinner as end adornment of the "resend" button/link */
|
||||
.mx_Spinner {
|
||||
// Spinners are usually block elements, but we need it as inline element
|
||||
/* Spinners are usually block elements, but we need it as inline element */
|
||||
display: inline-flex !important;
|
||||
// Spinners by default fill all available width, but we don't want that
|
||||
/* Spinners by default fill all available width, but we don't want that */
|
||||
width: auto !important;
|
||||
// We need to center the spinner relative to the button/link
|
||||
/* We need to center the spinner relative to the button/link */
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@ limitations under the License.
|
|||
|
||||
.mx_BaseAvatar {
|
||||
position: relative;
|
||||
// In at least Firefox, the case of relative positioned inline elements
|
||||
// (such as mx_BaseAvatar) with absolute positioned children (such as
|
||||
// mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give
|
||||
// different results during full reflow of the page vs. incremental reflow
|
||||
// of small portions. While that's surely a browser bug, we can avoid it by
|
||||
// using `inline-block` instead of the default `inline`.
|
||||
// https://github.com/vector-im/element-web/issues/5594
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
|
||||
/* In at least Firefox, the case of relative positioned inline elements */
|
||||
/* (such as mx_BaseAvatar) with absolute positioned children (such as */
|
||||
/* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
|
||||
/* different results during full reflow of the page vs. incremental reflow */
|
||||
/* of small portions. While that's surely a browser bug, we can avoid it by */
|
||||
/* using `inline-block` instead of the default `inline`. */
|
||||
/* https://github.com/vector-im/element-web/issues/5594 */
|
||||
/* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
|
||||
/* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
|
||||
|
|
@ -53,9 +53,9 @@ limitations under the License.
|
|||
background-color: $background;
|
||||
}
|
||||
|
||||
// Percy screenshot test specific CSS
|
||||
/* Percy screenshot test specific CSS */
|
||||
@media only percy {
|
||||
// Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot
|
||||
/* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
|
||||
.mx_BaseAvatar_initial {
|
||||
background-color: $username-variant2-color !important;
|
||||
border-radius: 125px;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
|
||||
.mx_DecoratedRoomAvatar_icon {
|
||||
position: absolute;
|
||||
// the following percentage based sizings are to match the scalable svg mask for the cutout
|
||||
/* the following percentage based sizings are to match the scalable svg mask for the cutout */
|
||||
bottom: -6.25%;
|
||||
right: -6.25%;
|
||||
margin: 12.5%;
|
||||
|
|
|
|||
|
|
@ -58,10 +58,10 @@ limitations under the License.
|
|||
padding: 7px 40px;
|
||||
width: auto;
|
||||
flex: 1;
|
||||
white-space: nowrap; // text might overflow
|
||||
white-space: nowrap; /* text might overflow */
|
||||
|
||||
&:nth-child(1) {
|
||||
order: 2; // Place feedback button top and right
|
||||
order: 2; /* Place feedback button top and right */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -127,7 +127,7 @@ limitations under the License.
|
|||
color: $button-primary-fg-color;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
word-break: keep-all; // avoid multiple lines on CJK language
|
||||
word-break: keep-all; /* avoid multiple lines on CJK language */
|
||||
|
||||
&.mx_AccessibleButton {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// A context menu that largely fits the | [icon] [label] | format.
|
||||
/* A context menu that largely fits the | [icon] [label] | format. */
|
||||
.mx_IconizedContextMenu {
|
||||
min-width: 146px;
|
||||
width: max-content;
|
||||
|
|
@ -30,47 +30,47 @@ limitations under the License.
|
|||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
// the notFirst class is for cases where the optionList might be under a header of sorts.
|
||||
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
|
||||
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
|
||||
// This is a bit of a hack when we could just use a simple border-top property,
|
||||
// however we have a (kinda) good reason for doing it this way: we need opacity.
|
||||
// To get the right color, we need an opacity modifier which means we have to work
|
||||
// around the problem. PostCSS doesn't support the opacity() function, and if we
|
||||
// use something like postcss-functions we quickly run into an issue where the
|
||||
// function we would define gets passed a CSS variable for custom themes, which
|
||||
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
|
||||
/* This is a bit of a hack when we could just use a simple border-top property, */
|
||||
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
|
||||
/* To get the right color, we need an opacity modifier which means we have to work */
|
||||
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
|
||||
/* use something like postcss-functions we quickly run into an issue where the */
|
||||
/* function we would define gets passed a CSS variable for custom themes, which */
|
||||
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
|
||||
//
|
||||
// Therefore, we just hack in a line and border the thing ourselves
|
||||
/* Therefore, we just hack in a line and border the thing ourselves */
|
||||
&::before {
|
||||
border-top: 1px solid $primary-content;
|
||||
opacity: 0.1;
|
||||
content: '';
|
||||
|
||||
// Counteract the padding problems (width: 100% ignores the 40px padding,
|
||||
// unless we position it absolutely then it does the right thing).
|
||||
/* Counteract the padding problems (width: 100% ignores the 40px padding, */
|
||||
/* unless we position it absolutely then it does the right thing). */
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// round the top corners of the top button for the hover effect to be bounded
|
||||
/* round the top corners of the top button for the hover effect to be bounded */
|
||||
&:first-child .mx_IconizedContextMenu_item:first-child {
|
||||
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
|
||||
border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */
|
||||
}
|
||||
|
||||
// round the bottom corners of the bottom button for the hover effect to be bounded
|
||||
/* round the bottom corners of the bottom button for the hover effect to be bounded */
|
||||
&:last-child .mx_IconizedContextMenu_item:last-child {
|
||||
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
|
||||
border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */
|
||||
}
|
||||
|
||||
// round all corners of the only button for the hover effect to be bounded
|
||||
/* round all corners of the only button for the hover effect to be bounded */
|
||||
&:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
|
||||
border-radius: 8px; // radius matches .mx_ContextualMenu
|
||||
border-radius: 8px; /* radius matches .mx_ContextualMenu */
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_item {
|
||||
// pad the inside of the button so that the hover background is padded too
|
||||
/* pad the inside of the button so that the hover background is padded too */
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-decoration: none;
|
||||
|
|
@ -78,7 +78,7 @@ limitations under the License.
|
|||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
// Create a flexbox to more easily define the list items
|
||||
/* Create a flexbox to more easily define the list items */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -91,17 +91,17 @@ limitations under the License.
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
img, .mx_IconizedContextMenu_icon { // icons
|
||||
img, .mx_IconizedContextMenu_icon { /* icons */
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
span.mx_IconizedContextMenu_label { // labels
|
||||
span.mx_IconizedContextMenu_label { /* labels */
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
/* Ellipsize any text overflow */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
|
||||
.mx_AddExistingToSpace {
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
/* To match the space around the title */
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
@ -226,7 +226,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
|
||||
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
|
||||
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
.mx_BugReportDialog {
|
||||
.mx_BugReportDialog_download {
|
||||
.mx_AccessibleButton_kind_link {
|
||||
margin-right: 18px; // Space between "Downloading logs..."
|
||||
margin-right: 18px; /* Space between "Downloading logs..." */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// --------------------------------------------------------------------------------
|
||||
// DEV NOTE: This stylesheet covers dialogs listed by the compound, including
|
||||
// over multiple React components. The actual inner contents of the dialog should
|
||||
// be in their respective stylesheets.
|
||||
// --------------------------------------------------------------------------------
|
||||
/* -------------------------------------------------------------------------------- */
|
||||
/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */
|
||||
/* over multiple React components. The actual inner contents of the dialog should */
|
||||
/* be in their respective stylesheets. */
|
||||
/* -------------------------------------------------------------------------------- */
|
||||
|
||||
// Override legacy/default styles for dialogs
|
||||
/* Override legacy/default styles for dialogs */
|
||||
.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
|
||||
padding: 0; // we'll manage it ourselves
|
||||
padding: 0; /* we'll manage it ourselves */
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-size: $font-24px;
|
||||
margin: 0; // managed by header class
|
||||
margin: 0; /* managed by header class */
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_cancelButton {
|
||||
|
|
@ -42,7 +42,7 @@ limitations under the License.
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
// Align with middle of title, 34px from right edge
|
||||
/* Align with middle of title, 34px from right edge */
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
right: 34px;
|
||||
|
|
@ -69,14 +69,14 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ScrollableBaseDialog {
|
||||
width: 544px; // fixed
|
||||
height: 516px; // fixed
|
||||
width: 544px; /* fixed */
|
||||
height: 516px; /* fixed */
|
||||
|
||||
.mx_CompoundDialog_content {
|
||||
height: 349px; // dialogHeight - header - footer
|
||||
height: 349px; /* dialogHeight - header - footer */
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_footer {
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); // hardcoded colour for both themes
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ limitations under the License.
|
|||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
top: calc(50% - 8px); /* vertical centering */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
color: $accent;
|
||||
|
||||
// list-style doesn't do it for webkit
|
||||
/* list-style doesn't do it for webkit */
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -60,11 +60,11 @@ limitations under the License.
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
// needed to make the alias field only grow as wide as needed
|
||||
// as opposed to full width
|
||||
/* needed to make the alias field only grow as wide as needed */
|
||||
/* as opposed to full width */
|
||||
.mx_CreateRoomDialog_aliasContainer {
|
||||
display: flex;
|
||||
// put margin on container so it can collapse with siblings
|
||||
/* put margin on container so it can collapse with siblings */
|
||||
margin: 24px 0 10px;
|
||||
|
||||
.mx_RoomAliasField {
|
||||
|
|
|
|||
|
|
@ -133,13 +133,13 @@ limitations under the License.
|
|||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
// Colour choice: first one autocomplete gave me.
|
||||
/* Colour choice: first one autocomplete gave me. */
|
||||
border-bottom: 1px solid $accent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td, th {
|
||||
width: 360px; // "feels right" number
|
||||
width: 360px; /* "feels right" number */
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -151,7 +151,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
tr:hover {
|
||||
// Colour choice: first one autocomplete gave me.
|
||||
/* Colour choice: first one autocomplete gave me. */
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
|
@ -178,8 +178,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_DevTools_SettingsExplorer_setting {
|
||||
// override default link button color
|
||||
// as it is the same as the background highlight
|
||||
// used on focus
|
||||
/* override default link button color */
|
||||
/* as it is the same as the background highlight */
|
||||
/* used on focus */
|
||||
color: $links !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&::after {
|
||||
background: $avatar-initial-color; // TODO
|
||||
background: $avatar-initial-color; /* TODO */
|
||||
mask-position: center;
|
||||
mask-size: 24px;
|
||||
mask-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ limitations under the License.
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
// When forwarding messages from encrypted rooms, EventTile will complain
|
||||
// that our preview is unencrypted, which doesn't actually matter
|
||||
// We also hide download links to not encourage users to try interacting
|
||||
/* When forwarding messages from encrypted rooms, EventTile will complain */
|
||||
/* that our preview is unencrypted, which doesn't actually matter */
|
||||
/* We also hide download links to not encourage users to try interacting */
|
||||
.mx_EventTile_msgOption,
|
||||
.mx_EventTile_e2eIcon_unencrypted,
|
||||
.mx_EventTile_e2eIcon_warning,
|
||||
|
|
@ -66,7 +66,7 @@ limitations under the License.
|
|||
display: contents;
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
/* To match the space around the title */
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
@ -133,7 +133,7 @@ limitations under the License.
|
|||
margin-left: 12px;
|
||||
|
||||
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
|
||||
// Hide the "Send" label while preserving button size
|
||||
/* Hide the "Send" label while preserving button size */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_NotificationBadge {
|
||||
// Match the failed to send indicator's color with the disabled button
|
||||
/* Match the failed to send indicator's color with the disabled button */
|
||||
background-color: $button-danger-disabled-fg-color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ limitations under the License.
|
|||
max-width: 580px;
|
||||
height: 80vh;
|
||||
max-height: 600px;
|
||||
// Ensure dialog borders are always white as the HostSignupDialog
|
||||
// does not yet support dark mode or theming in general.
|
||||
// In the future we might want to pass the theme to the called
|
||||
// iframe, should some hosting provider have that need.
|
||||
/* Ensure dialog borders are always white as the HostSignupDialog */
|
||||
/* does not yet support dark mode or theming in general. */
|
||||
/* In the future we might want to pass the theme to the called */
|
||||
/* iframe, should some hosting provider have that need. */
|
||||
background-color: #ffffff;
|
||||
|
||||
.mx_HostSignupDialog_info {
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ limitations under the License.
|
|||
.mx_InviteDialog_addressBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
|
||||
// for the user section gets weird.
|
||||
margin: $spacing-8 45px 0 0; // TODO: Use a spacing variable
|
||||
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
|
||||
/* for the user section gets weird. */
|
||||
margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
|
||||
|
||||
.mx_InviteDialog_editor {
|
||||
flex: 1;
|
||||
width: 100%; // Needed to make the Field inside grow
|
||||
width: 100%; /* Needed to make the Field inside grow */
|
||||
background-color: $header-panel-bg-color;
|
||||
border-radius: 4px;
|
||||
min-height: 25px;
|
||||
|
|
@ -43,14 +43,14 @@ limitations under the License.
|
|||
flex-wrap: wrap;
|
||||
|
||||
.mx_InviteDialog_userTile {
|
||||
margin: 6px 6px 0 0; // TODO: Use a spacing variable
|
||||
margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
|
||||
display: inline-block;
|
||||
min-width: max-content; // prevent manipulation by flexbox
|
||||
min-width: max-content; /* prevent manipulation by flexbox */
|
||||
}
|
||||
|
||||
// overrides bunch of our default text input styles
|
||||
/* overrides bunch of our default text input styles */
|
||||
> input[type="text"] {
|
||||
margin: 6px 0 !important; // TODO: Use a spacing variable
|
||||
margin: 6px 0 !important; /* TODO: Use a spacing variable */
|
||||
height: 24px;
|
||||
line-height: $font-24px;
|
||||
font-size: $font-14px;
|
||||
|
|
@ -67,17 +67,17 @@ limitations under the License.
|
|||
|
||||
.mx_InviteDialog_goButton {
|
||||
min-width: 48px;
|
||||
margin-inline-start: 10px; // TODO: Use a spacing variable
|
||||
margin-inline-start: 10px; /* TODO: Use a spacing variable */
|
||||
height: 25px;
|
||||
line-height: $font-25px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_buttonAndSpinner {
|
||||
.mx_Spinner {
|
||||
// Width and height are required to trick the layout engine.
|
||||
/* Width and height are required to trick the layout engine. */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-inline-start: 5px; // TODO: Use a spacing variable
|
||||
margin-inline-start: 5px; /* TODO: Use a spacing variable */
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InviteDialog_section_showMore {
|
||||
margin: 7px 18px; // TODO: Use a spacing variable
|
||||
margin: 7px 18px; /* TODO: Use a spacing variable */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_CopyableText.mx_CopyableText_border {
|
||||
width: unset; // full width
|
||||
width: unset; /* full width */
|
||||
margin-bottom: 0;
|
||||
|
||||
> a {
|
||||
|
|
@ -146,7 +146,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
|
||||
/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
|
||||
.mx_InviteDialog_userTile {
|
||||
margin-inline-end: $spacing-8;
|
||||
|
||||
|
|
@ -157,7 +157,7 @@ limitations under the License.
|
|||
height: 24px;
|
||||
line-height: $font-24px;
|
||||
padding-inline: $spacing-8;
|
||||
color: #ffffff; // this is fine without a var because it's for both themes
|
||||
color: #ffffff; /* this is fine without a var because it's for both themes */
|
||||
|
||||
.mx_SearchResultAvatar {
|
||||
border-radius: 20px;
|
||||
|
|
@ -175,7 +175,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SearchResultAvatar_threepidAvatar {
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
background-color: #ffffff; /* this is fine without a var because it's for both themes */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InviteDialog_other {
|
||||
// Prevent the dialog from jumping around randomly when elements change.
|
||||
/* Prevent the dialog from jumping around randomly when elements change. */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 600px;
|
||||
|
|
@ -252,7 +252,7 @@ limitations under the License.
|
|||
.mx_InviteDialog_userSections {
|
||||
margin-top: $spacing-4;
|
||||
overflow-y: auto;
|
||||
padding: 0 45px $spacing-4 0; // TODO: Use a spacing variable
|
||||
padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_InviteDialog_helpText {
|
||||
|
|
@ -289,7 +289,7 @@ limitations under the License.
|
|||
|
||||
.mx_DialPad {
|
||||
row-gap: $spacing-16;
|
||||
column-gap: 48px; // TODO: Use a spacing variable
|
||||
column-gap: 48px; /* TODO: Use a spacing variable */
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -327,7 +327,7 @@ limitations under the License.
|
|||
align-items: center;
|
||||
|
||||
&.mx_InviteDialog_tile--room {
|
||||
// mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
|
||||
/* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
|
||||
grid-template-columns: min-content auto auto;
|
||||
padding: $spacing-4 $spacing-8;
|
||||
|
||||
|
|
@ -350,9 +350,9 @@ limitations under the License.
|
|||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 6px; // 50%
|
||||
left: 6px; // 50%
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
top: 6px; /* 50% */
|
||||
left: 6px; /* 50% */
|
||||
background-color: #ffffff; /* this is fine without a var because it's for both themes */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -369,7 +369,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&.mx_InviteDialog_tile--inviterError {
|
||||
grid-template-columns: max-content auto; // max-content = avatar width
|
||||
grid-template-columns: max-content auto; /* max-content = avatar width */
|
||||
margin-bottom: $spacing-24;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -450,5 +450,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InviteDialog_identityServer {
|
||||
margin-top: 1em; // TODO: Use a spacing variable
|
||||
margin-top: 1em; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ limitations under the License.
|
|||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
top: calc(50% - 8px); /* vertical centering */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ limitations under the License.
|
|||
height: 60vh;
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
/* To match the space around the title */
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
@ -119,7 +119,7 @@ limitations under the License.
|
|||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
top: calc(50% - 8px); /* vertical centering */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ limitations under the License.
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Emulate mx_EventTile[data-layout="group"]
|
||||
/* Emulate mx_EventTile[data-layout="group"] */
|
||||
.mx_EventTile {
|
||||
padding-top: 0 !important; // Override mx_EventTile:not([data-layout="bubble"])
|
||||
padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 16px; // 11px from the top will collapse, so this creates a 16px gap between options
|
||||
margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
|
||||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
|
|
@ -79,7 +79,7 @@ limitations under the License.
|
|||
|
||||
.mx_PollCreateDialog_addOption {
|
||||
padding: 0;
|
||||
margin-bottom: 40px; // arbitrary to create scrollable area under the poll
|
||||
margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_disabled {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// ICONS
|
||||
// ==========================================================
|
||||
/* ICONS */
|
||||
/* ========================================================== */
|
||||
|
||||
.mx_RoomSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
|
|
@ -34,7 +34,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSettingsDialog_bridgesIcon::before {
|
||||
// This icon is pants, please improve :)
|
||||
/* This icon is pants, please improve :) */
|
||||
mask-image: url('$(res)/img/feather-customised/bridge.svg');
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ limitations under the License.
|
|||
padding-right: 80px;
|
||||
}
|
||||
|
||||
// show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings
|
||||
/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
|
||||
.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
|
||||
mask: url("$(res)/img/feather-customised/image.svg");
|
||||
mask-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
padding: 5px;
|
||||
margin-bottom: $spacing-8;
|
||||
|
||||
// border-style around each bridge list item
|
||||
/* border-style around each bridge list item */
|
||||
border-width: 1px 1px;
|
||||
border-color: $primary-hairline-color;
|
||||
border-style: solid;
|
||||
|
|
|
|||
|
|
@ -38,13 +38,13 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
width: 115px;
|
||||
color: $muted-fg-color;
|
||||
line-height: 24px; // same as avatar
|
||||
line-height: 24px; /* same as avatar */
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_ServerOfflineDialog_content_context_timeline {
|
||||
display: inline-block;
|
||||
width: calc(100% - 155px); // 115px timestamp width + 40px right margin
|
||||
width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
|
||||
|
||||
.mx_ServerOfflineDialog_content_context_timeline_header {
|
||||
span {
|
||||
|
|
@ -58,7 +58,7 @@ limitations under the License.
|
|||
margin-top: 8px;
|
||||
|
||||
.mx_ServerOfflineDialog_content_context_txn_desc {
|
||||
width: calc(100% - 100px); // 100px is an arbitrary margin for the button
|
||||
width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// Not actually a component but things shared by settings components
|
||||
/* Not actually a component but things shared by settings components */
|
||||
.mx_UserSettingsDialog,
|
||||
.mx_RoomSettingsDialog,
|
||||
.mx_SpaceSettingsDialog,
|
||||
.mx_SpacePreferencesDialog {
|
||||
width: 90vw;
|
||||
max-width: 1000px;
|
||||
// set the height too since tabbed view scrolls itself.
|
||||
/* set the height too since tabbed view scrolls itself. */
|
||||
height: 80vh;
|
||||
|
||||
.mx_TabbedView {
|
||||
|
|
@ -35,8 +35,8 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Put some padding on the bottom to avoid the settings tab from
|
||||
// colliding harshly with the dialog when scrolled down.
|
||||
/* Put some padding on the bottom to avoid the settings tab from */
|
||||
/* colliding harshly with the dialog when scrolled down. */
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
margin: 10px 0;
|
||||
|
||||
.mx_CopyableText {
|
||||
width: unset; // full width
|
||||
width: unset; /* full width */
|
||||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@ limitations under the License.
|
|||
position: relative;
|
||||
height: 60%;
|
||||
padding: 0;
|
||||
contain: unset; // needed for #mx_SpotlightDialog_keyboardPrompt to not be culled
|
||||
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
|
||||
|
||||
#mx_SpotlightDialog_keyboardPrompt {
|
||||
position: absolute;
|
||||
padding: $spacing-8;
|
||||
border-radius: 8px;
|
||||
background-color: $background;
|
||||
top: -60px; // relative to the top of the modal
|
||||
top: -60px; /* relative to the top of the modal */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: $font-12px;
|
||||
|
|
@ -36,13 +36,13 @@ limitations under the License.
|
|||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px $spacing-4; // TODO: Use a spacing variable
|
||||
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
|
||||
margin: 0 $spacing-4;
|
||||
border-radius: 6px;
|
||||
background-color: $quinary-content;
|
||||
vertical-align: middle;
|
||||
color: $tertiary-content;
|
||||
// To avoid any styling inherent with <kbd> elements
|
||||
/* To avoid any styling inherent with <kbd> elements */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -76,7 +76,7 @@ limitations under the License.
|
|||
vertical-align: middle;
|
||||
color: $primary-content;
|
||||
position: relative;
|
||||
padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable
|
||||
padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
|
|
@ -190,7 +190,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
|
||||
margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_option {
|
||||
|
|
@ -209,7 +209,7 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin: 0 9px $spacing-4; // maintain centering
|
||||
margin: 0 9px $spacing-4; /* maintain centering */
|
||||
}
|
||||
|
||||
& + .mx_SpotlightDialog_option {
|
||||
|
|
@ -227,7 +227,7 @@ limitations under the License.
|
|||
.mx_SpotlightDialog_otherSearches,
|
||||
.mx_SpotlightDialog_hiddenResults {
|
||||
.mx_SpotlightDialog_option {
|
||||
padding: 6px $spacing-4; // TODO: Use a spacing variable
|
||||
padding: 6px $spacing-4; /* TODO: Use a spacing variable */
|
||||
border-radius: 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
|
@ -251,11 +251,11 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton {
|
||||
padding: $spacing-4 $spacing-20;
|
||||
margin: 2px $spacing-4; // TODO: Use a spacing variable
|
||||
margin: 2px $spacing-4; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_enterPrompt {
|
||||
margin-top: 9px; // TODO: Use a spacing variable
|
||||
margin-top: 9px; /* TODO: Use a spacing variable */
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
}
|
||||
|
|
@ -370,7 +370,7 @@ limitations under the License.
|
|||
.mx_AccessibleButton {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable
|
||||
padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -471,8 +471,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SpotlightDialog_enterPrompt {
|
||||
padding: 2px $spacing-4; // TODO: Use a spacing variable
|
||||
// To avoid any styling inherent with <kbd> elements
|
||||
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
|
||||
/* To avoid any styling inherent with <kbd> elements */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: $font-12px;
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// ICONS
|
||||
// ==========================================================
|
||||
/* ICONS */
|
||||
/* ========================================================== */
|
||||
|
||||
.mx_UserSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
|
|
|
|||
|
|
@ -37,16 +37,16 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
margin-top: 40px; // double normal
|
||||
margin-top: 40px; /* double normal */
|
||||
}
|
||||
|
||||
.mx_SettingsFlag {
|
||||
line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
|
||||
line-height: calc($font-14px + 7px + 7px); /* 7px top & bottom padding */
|
||||
color: $muted-fg-color;
|
||||
font-size: $font-12px;
|
||||
|
||||
.mx_ToggleSwitch {
|
||||
// downsize the switch + ball
|
||||
/* downsize the switch + ball */
|
||||
width: $font-32px;
|
||||
height: $font-15px;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ limitations under the License.
|
|||
height: 24px;
|
||||
margin-inline-end: $spacing-8;
|
||||
position: relative;
|
||||
top: 5px; // TODO: spacing variable
|
||||
top: 5px; /* TODO: spacing variable */
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_AccessSecretStorageDialog_resetBadge::before {
|
||||
// The image isn't capable of masking, so we use a background instead.
|
||||
/* The image isn't capable of masking, so we use a background instead. */
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: 24px;
|
||||
background-color: transparent;
|
||||
|
|
@ -81,7 +81,7 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
margin-inline-end: 5px; // TODO: spacing variable
|
||||
margin-inline-end: 5px; /* TODO: spacing variable */
|
||||
}
|
||||
|
||||
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
|
||||
|
|
@ -104,12 +104,12 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
$spacingStart: $spacing-24; // 16px icon + 8px padding
|
||||
$spacingStart: $spacing-24; /* 16px icon + 8px padding */
|
||||
|
||||
text-align: initial;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 14px; // TODO: spacing variable
|
||||
gap: 14px; /* TODO: spacing variable */
|
||||
|
||||
.mx_Dialog_buttons_additive {
|
||||
float: none;
|
||||
|
|
@ -125,7 +125,7 @@ limitations under the License.
|
|||
height: 16px;
|
||||
width: 16px;
|
||||
left: 0;
|
||||
top: 2px; // alignment
|
||||
top: 2px; /* alignment */
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -137,7 +137,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Dialog_buttons_row {
|
||||
gap: $spacing-16; // TODO: needs normalization
|
||||
gap: $spacing-16; /* TODO: needs normalization */
|
||||
padding-inline-start: $spacingStart;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_CreateCrossSigningDialog {
|
||||
// Why you ask? Because CompleteSecurityBody is 600px so this is the width
|
||||
// we end up when in there, but when in our own dialog we set our own width
|
||||
// so need to fix it to something sensible as otherwise we'd end up either
|
||||
// really wide or really narrow depending on the phase. I bet you wish you
|
||||
// never asked.
|
||||
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
|
||||
/* we end up when in there, but when in our own dialog we set our own width */
|
||||
/* so need to fix it to something sensible as otherwise we'd end up either */
|
||||
/* really wide or really narrow depending on the phase. I bet you wish you */
|
||||
/* never asked. */
|
||||
width: 560px;
|
||||
|
||||
details .mx_AccessibleButton {
|
||||
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
|
||||
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,6 +77,6 @@ limitations under the License.
|
|||
|
||||
.mx_CreateKeyBackupDialog {
|
||||
details .mx_AccessibleButton {
|
||||
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
|
||||
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_CreateSecretStorageDialog {
|
||||
// Why you ask? Because CompleteSecurityBody is 600px so this is the width
|
||||
// we end up when in there, but when in our own dialog we set our own width
|
||||
// so need to fix it to something sensible as otherwise we'd end up either
|
||||
// really wide or really narrow depending on the phase. I bet you wish you
|
||||
// never asked.
|
||||
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
|
||||
/* we end up when in there, but when in our own dialog we set our own width */
|
||||
/* so need to fix it to something sensible as otherwise we'd end up either */
|
||||
/* really wide or really narrow depending on the phase. I bet you wish you */
|
||||
/* never asked. */
|
||||
width: 560px;
|
||||
|
||||
.mx_SettingsFlag {
|
||||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
details .mx_AccessibleButton {
|
||||
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
|
||||
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ limitations under the License.
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-14px;
|
||||
border: none; // override default <button /> styles
|
||||
word-break: keep-all; // prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed
|
||||
border: none; /* override default <button /> styles */
|
||||
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
|
||||
|
||||
&.mx_AccessibleButton_kind_primary_sm,
|
||||
&.mx_AccessibleButton_kind_danger_sm,
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ limitations under the License.
|
|||
|
||||
.mx_CopyableText_copyButton {
|
||||
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;
|
||||
height: 1em;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
// center to first line
|
||||
/* center to first line */
|
||||
position: relative;
|
||||
top: .15em;
|
||||
|
||||
|
|
|
|||
|
|
@ -95,9 +95,9 @@ input.mx_Dropdown_option:focus {
|
|||
border: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
// XXX: hack to prevent text box being too big and pushing
|
||||
// its parent out / overlapping the dropdown arrow. Only really
|
||||
// works in the Country dropdown.
|
||||
/* XXX: hack to prevent text box being too big and pushing */
|
||||
/* its parent out / overlapping the dropdown arrow. Only really */
|
||||
/* works in the Country dropdown. */
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ limitations under the License.
|
|||
.mx_EditableItem_item {
|
||||
flex: auto 1 0;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
flex-direction: row-reverse;
|
||||
vertical-align: middle;
|
||||
|
||||
// Overlap the children
|
||||
/* Overlap the children */
|
||||
> * + * {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
margin: 1px; // to offset the border on the image
|
||||
margin: 1px; /* to offset the border on the image */
|
||||
}
|
||||
|
||||
.mx_FacePile_more {
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@ limitations under the License.
|
|||
font-weight: normal;
|
||||
font-size: $font-14px;
|
||||
border: none;
|
||||
// Even without a border here, we still need this avoid overlapping the rounded
|
||||
// corners on the field above.
|
||||
/* Even without a border here, we still need this avoid overlapping the rounded */
|
||||
/* corners on the field above. */
|
||||
border-radius: 4px;
|
||||
padding: 8px 9px;
|
||||
color: $primary-content;
|
||||
|
|
@ -57,7 +57,7 @@ limitations under the License.
|
|||
-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 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -108,11 +108,11 @@ limitations under the License.
|
|||
left: 0px;
|
||||
margin: 7px 8px;
|
||||
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;
|
||||
white-space: nowrap;
|
||||
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,
|
||||
|
|
@ -183,7 +183,7 @@ limitations under the License.
|
|||
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 {
|
||||
border: initial;
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@ limitations under the License.
|
|||
margin-block: 0;
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
order: 9; // TODO: Remove
|
||||
order: 9; /* TODO: Remove */
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
margin-inline-start: auto; // reduce clickable area
|
||||
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
|
||||
margin-inline-start: auto; /* reduce clickable area */
|
||||
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;
|
||||
}
|
||||
|
||||
// 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.
|
||||
/* 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. */
|
||||
&[data-expanded="true"] {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ $button-gap: 24px;
|
|||
.mx_ImageView_button_close {
|
||||
padding: calc($button-size - $button-size);
|
||||
border-radius: 100%;
|
||||
background: #21262c; // same on all themes
|
||||
background: #21262c; /* same on all themes */
|
||||
&::before {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
|
|
|
|||
|
|
@ -24,5 +24,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InlineSpinner_icon {
|
||||
display: inline-block !important; // Override regular mx_Spinner_icon
|
||||
display: inline-block !important; /* Override regular mx_Spinner_icon */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,19 +29,19 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
|
||||
top: 10px; // 8px chevron + 2px spacing
|
||||
top: 10px; /* 8px chevron + 2px spacing */
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
|
||||
left: 10px; // 8px chevron + 2px spacing
|
||||
left: 10px; /* 8px chevron + 2px spacing */
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
|
||||
right: 10px; // 8px chevron + 2px spacing
|
||||
right: 10px; /* 8px chevron + 2px spacing */
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
|
||||
bottom: 10px; // 8px chevron + 2px spacing
|
||||
bottom: 10px; /* 8px chevron + 2px spacing */
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
|
|
@ -55,8 +55,8 @@ limitations under the License.
|
|||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
|
||||
/* by Sebastiano Guerriero (@guerriero_se) */
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
height: 16px;
|
||||
|
|
@ -66,7 +66,7 @@ limitations under the License.
|
|||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(135deg);
|
||||
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;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
|
||||
/* by Sebastiano Guerriero (@guerriero_se) */
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_bottom {
|
||||
height: 16px;
|
||||
|
|
@ -92,6 +92,6 @@ limitations under the License.
|
|||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
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 */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
flex-direction: row;
|
||||
|
||||
.mx_Checkbox {
|
||||
margin-top: 3px; // visually align with label text
|
||||
margin-top: 3px; /* visually align with label text */
|
||||
}
|
||||
|
||||
.mx_LabelledCheckbox_labels {
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@ limitations under the License.
|
|||
position: relative;
|
||||
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 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: unset;
|
||||
width: max-content;
|
||||
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%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,47 +26,47 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
color: $accent-fg-color !important; // To override .markdown-body
|
||||
background-color: $pill-bg-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 */
|
||||
|
||||
&.mx_UserPill_me,
|
||||
&.mx_AtRoomPill {
|
||||
background-color: $alert !important; // To override .markdown-body
|
||||
background-color: $alert !important; /* To override .markdown-body */
|
||||
}
|
||||
|
||||
&: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 {
|
||||
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 {
|
||||
background-color: $alert !important; // To override .markdown-body
|
||||
background-color: $alert !important; /* To override .markdown-body */
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
&::before,
|
||||
.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;
|
||||
min-width: $font-16px; // ensure the avatar is not compressed
|
||||
min-width: $font-16px; /* ensure the avatar is not compressed */
|
||||
}
|
||||
|
||||
.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;
|
||||
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& {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-decoration: none !important; // To override .markdown-body
|
||||
text-decoration: none !important; /* To override .markdown-body */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ limitations under the License.
|
|||
|
||||
.mx_ReplyChain {
|
||||
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-radius: 2px;
|
||||
|
||||
.mx_ReplyChain_show {
|
||||
&.mx_AccessibleButton_kind_link_inline {
|
||||
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 {
|
||||
color: $links;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// XXX: bleurgh, what is this? These classes totally break the component
|
||||
// naming scheme; it's completely unclear where or how they're being used
|
||||
// --Matthew
|
||||
/* XXX: bleurgh, what is this? These classes totally break the component */
|
||||
/* naming scheme; it's completely unclear where or how they're being used */
|
||||
/* --Matthew */
|
||||
|
||||
.mx_Markdown_BOLD {
|
||||
font-weight: bold;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
// variant seems yield better results.
|
||||
|
||||
// compensate for Nunito italics being terrible
|
||||
// https://github.com/google/fonts/issues/1726
|
||||
// https://github.com/google/fonts/issues/172
|
||||
transform: skewX(-14deg);
|
||||
display: inline-block;
|
||||
*/
|
||||
|
|
@ -37,8 +37,8 @@
|
|||
}
|
||||
|
||||
.mx_Emoji {
|
||||
// Should be 1.8rem for our default message bodies, and scale with the
|
||||
// surrounding text
|
||||
/* Should be 1.8rem for our default message bodies, and scale with the */
|
||||
/* surrounding text */
|
||||
font-size: max($font-18px, 1em);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomAliasField {
|
||||
// if parent is a flex container, this allows the
|
||||
// width to be as wide as needed, and not 100%
|
||||
/* if parent is a flex container, this allows the */
|
||||
/* width to be as wide as needed, and not 100% */
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
|
@ -47,10 +47,10 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
// this allows the domain name to show
|
||||
// as long as it doesn't make the input shrink
|
||||
// if it's too big, it shows an ellipsis
|
||||
// 180: 28 for prefix, 152 for input
|
||||
/* this allows the domain name to show */
|
||||
/* as long as it doesn't make the input shrink */
|
||||
/* if it's too big, it shows an ellipsis */
|
||||
/* 180: 28 for prefix, 152 for input */
|
||||
max-width: calc(100% - 180px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,9 +61,9 @@ limitations under the License.
|
|||
|
||||
.mx_SSOButton_mini {
|
||||
box-sizing: border-box;
|
||||
width: 50px; // 48px + 1px border on all sides
|
||||
height: 50px; // 48px + 1px border on all sides
|
||||
min-width: 50px; // prevent crushing by the flexbox
|
||||
width: 50px; /* 48px + 1px border on all sides */
|
||||
height: 50px; /* 48px + 1px border on all sides */
|
||||
min-width: 50px; /* prevent crushing by the flexbox */
|
||||
padding: 12px;
|
||||
|
||||
> img {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
// Support code/pre elements in settings flag descriptions
|
||||
/* Support code/pre elements in settings flag descriptions */
|
||||
pre, code {
|
||||
font-family: $monospace-font-family !important;
|
||||
background-color: $rte-code-bg-color;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
|||
position: absolute;
|
||||
height: 1em;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ limitations under the License.
|
|||
.mx_Slider_selection {
|
||||
display: flex;
|
||||
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;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
|
@ -94,8 +94,8 @@ limitations under the License.
|
|||
color: $slider-background-color;
|
||||
}
|
||||
|
||||
// The following is a hack to center the labels without adding
|
||||
// any width to the slider's dots.
|
||||
/* The following is a hack to center the labels without adding */
|
||||
/* any width to the slider's dots. */
|
||||
.mx_Slider_labelContainer {
|
||||
width: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
input[type="radio"] {
|
||||
// Remove the OS's representation
|
||||
/* Remove the OS's representation */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
|
|
@ -63,7 +63,7 @@ limitations under the License.
|
|||
box-sizing: border-box;
|
||||
height: $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-radius: $font-16px;
|
||||
|
|
|
|||
|
|
@ -20,19 +20,19 @@ limitations under the License.
|
|||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
margin: 0; // override from field styles
|
||||
margin: 0; /* override from field styles */
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 70px;
|
||||
padding: 0 8px; // override from button styles
|
||||
margin-left: 16px; // distance from <Field>
|
||||
padding: 0 8px; /* override from button styles */
|
||||
margin-left: 16px; /* distance from <Field> */
|
||||
}
|
||||
|
||||
.mx_Field,
|
||||
.mx_Field input,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ limitations under the License.
|
|||
.mx_TagComposer_tags {
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
@ -73,7 +73,7 @@ limitations under the License.
|
|||
.mx_Tag_delete {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: 1.066666em; // 16px;
|
||||
width: 1.066666em; /* 16px; */
|
||||
height: 1.066666em;
|
||||
line-height: 1em;
|
||||
color: $secondary-content;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ limitations under the License.
|
|||
display: none;
|
||||
position: fixed;
|
||||
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;
|
||||
pointer-events: none;
|
||||
line-height: $font-14px;
|
||||
|
|
@ -71,7 +71,7 @@ limitations under the License.
|
|||
max-width: 300px;
|
||||
word-break: break-word;
|
||||
|
||||
background-color: #21262C; // Same on both themes
|
||||
background-color: #21262C; /* Same on both themes */
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
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 {
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-content;
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// when there are errors loading the map
|
||||
// the canvas is still inserted
|
||||
// and can overlap error message/close buttons
|
||||
// hide it
|
||||
/* when there are errors loading the map */
|
||||
/* the canvas is still inserted */
|
||||
/* and can overlap error message/close buttons */
|
||||
/* hide it */
|
||||
&.mx_LocationPicker_hasError {
|
||||
.maplibregl-canvas-container, .maplibregl-control-container {
|
||||
display: none;
|
||||
|
|
@ -43,8 +43,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.maplibregl-ctrl.maplibregl-ctrl-group {
|
||||
// place below the close button
|
||||
// padding-16 + 24px close button + padding-10
|
||||
/* place below the close button */
|
||||
/* padding-16 + 24px close button + padding-10 */
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue