Disallow invalid inline style comments in stylesheets (#9099)
This commit is contained in:
Germain
@@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user