riot-web/res/css/_common.pcss

890 lines
24 KiB
Plaintext
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 - 2019 New Vector Ltd
Copyright 2019 - 2023 The Matrix.org Foundation C.I.C
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css");
@import "./_font-sizes.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
@import url("maplibre-gl/dist/maplibre-gl.css");
:root {
2020-06-04 17:23:28 +02:00
font-size: 10px;
--container-border-width: 8px;
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
2022-12-12 12:24:14 +01:00
--transition-short: 0.1s;
--transition-standard: 0.3s;
Fix decryption failure bar covering the timeline (#10360) * Use grid layout instead - BEM naming style - Increase block gap from 4px to 8px - Use flexbox inside 'header' grid-area to let the buttons wrapped - Use variables - Remove 4px gap when one of the buttons is not rendered - Change 'body' to 'message' - Set 'align-self: start' to the icon and spinner Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Unset height of spinner Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Break lines at newline characters with white-space: pre-line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Edit tests to check decryption failure bars on narrow timeline - checkTimelineNarrow() looks for buttons by default - Test indicator as well Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix double underscores Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix double underscores - pcss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Iterate - buttons at the bottom - Set common spacing to buttons with variables - Remove line breaks, yarn run i18n - Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Check waiting headline as well Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Increase spacing between the message and the buttons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * lint Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Increase block gap between wrapped buttons for clickability Apply 8px between wrapped buttons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Revert bottom margin of buttons which are not expected to be wrapped Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Check visibility instead of existence This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element currently includes the button(s) only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * lint - prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow() The loading spinner is likely to disappear while checking the bar on the narrow timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Kerry <kerrya@element.io>
2023-03-30 11:11:16 +02:00
--buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8;
--MBody-border-radius: 8px;
/* Expected z-indexes for dialogs:
4000 - Default wrapper index
4009 - Static dialog background
4010 - Static dialog itself
4011 - Standard dialog background
4012 - Standard dialog itself
These are set up such that the static dialog always appears
underneath the standard dialogs.
*/
--dialog-zIndex-wrapper-default: 4000;
--dialog-zIndex-static-background: 4009;
--dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1); /* 4010 */
--dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1); /* 4011 */
--dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */
}
#matrixchat {
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
contain: strict;
}
#mx_ContextualMenu_Container,
#mx_PersistedElement_container,
#mx_Dialog_Container,
#mx_Dialog_StaticContainer {
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
isolation: isolate;
}
/**
2023-07-03 17:07:30 +02:00
* We need to increase the specificity of the selector to override the
* custom property set by the design tokens package
*/
[class^="cpd-theme"][class^="cpd-theme"] {
/**
* The design tokens package currently does not expose the fallback fonts
* We want to keep on re-using `$font-family` to not break custom themes
* and because we can to use `Twemoji` to display emoji rather than using
* system ones
*/
--cpd-font-family-sans: $font-family;
}
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
}
html {
/* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */
height: 100%;
overflow: hidden;
/* Stop similar overscroll bounce in Firefox Nightly for macOS */
overscroll-behavior: none;
}
body {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
/**
* We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
* We need to tweak the `letter-spacing` property and doing so, disables by
* default the optional ligatures
* `font-feature-settings` allows us to override this behaviour and have the
* correct ligatures and the proper dynamic metric spacing.
*/
font-feature-settings:
"kern" 1,
"liga" 1,
"calt" 1;
background-color: $background;
color: $primary-content;
border: 0px;
margin: 0px;
/* 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;
}
2022-12-12 12:24:14 +01:00
pre,
code {
2019-05-19 18:41:18 +02:00
font-family: $monospace-font-family;
font-size: 100% !important;
2019-05-19 18:41:18 +02:00
}
2022-12-12 12:24:14 +01:00
.error,
.warning,
.text-error,
.text-warning {
color: $alert;
}
2020-03-07 01:43:10 +01:00
.text-success {
color: $accent;
2020-03-07 01:43:10 +01:00
}
2020-11-19 20:06:24 +01:00
.text-muted {
color: $muted-fg-color;
}
.text-primary {
color: $primary-content;
}
.text-secondary {
color: $secondary-content;
}
.mx_Verified {
color: $e2e-verified-color;
}
.mx_Untrusted {
color: $e2e-warning-color;
}
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. */
font-weight: bold;
}
h2 {
color: $primary-content;
font: var(--cpd-font-heading-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
margin-top: 16px;
margin-bottom: 16px;
}
a:hover,
a:link,
a:visited {
color: $accent-alt;
}
input[type="text"],
input[type="search"],
input[type="password"] {
2019-02-13 11:39:10 +01:00
padding: 9px;
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
2019-02-13 11:39:10 +01:00
min-width: 0;
}
input[type="text"].mx_textinput_icon,
input[type="search"].mx_textinput_icon {
2019-02-13 11:39:10 +01:00
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}
/* 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 {
2022-12-12 12:24:14 +01:00
background-image: url("$(res)/img/feather-customised/search-input.svg");
2019-02-13 11:39:10 +01:00
}
/* 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,
input[type="search"]::-webkit-search-results-decoration {
2019-02-13 11:39:10 +01:00
display: none;
}
/* Override Firefox's UA style so we get a consistent look across browsers */
2019-02-13 11:39:10 +01:00
input::placeholder,
textarea::placeholder {
opacity: initial;
}
2022-12-12 12:24:14 +01:00
input[type="text"],
input[type="password"],
textarea {
background-color: transparent;
color: $primary-content;
}
/* Required by Firefox */
textarea {
color: $primary-content;
}
2022-12-12 12:24:14 +01:00
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
outline: none;
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. */
*:focus:not(:focus-visible) {
outline: none;
}
/* override defaults */
fieldset {
display: inline-block;
margin-inline: unset;
padding-block: unset;
padding-inline: unset;
min-inline-size: unset;
border: none;
}
summary {
cursor: pointer;
}
legend {
padding-inline: unset;
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 */
2019-02-18 14:43:18 +01:00
2022-12-12 12:24:14 +01:00
.mx_Dialog,
.mx_MatrixChat_wrapper {
.mx_textinput > input[type="text"],
.mx_textinput > input[type="search"] {
border: none;
flex: 1;
color: $primary-content;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
2019-02-18 14:43:18 +01:00
.mx_textinput {
display: block;
box-sizing: border-box;
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid $secondary-hairline-color;
/* these things should probably not be defined globally */
2019-02-18 14:43:18 +01:00
margin: 9px;
}
.mx_textinput {
display: flex;
align-items: center;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
2019-02-18 14:43:18 +01:00
.mx_textinput input::placeholder {
color: $input-placeholder;
2019-02-18 14:43:18 +01:00
}
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
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!! */
#mx_theme_accentColor {
color: $accent;
}
#mx_theme_secondaryAccentColor {
color: $secondary-accent-color;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: var(--dialog-zIndex-wrapper-default);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_Dialog_border {
z-index: var(--dialog-zIndex-standard);
position: relative;
max-height: calc(100% - var(--cpd-space-12x));
display: flex;
flex-direction: column;
2024-03-14 16:33:43 +01:00
.mx_Dialog_lightbox & {
/* The lightbox isn't so much of a dialog as a fullscreen overlay. We
don't want the glass border. */
display: contents;
}
}
.mx_Dialog {
background-color: $background;
color: $light-fg-color;
font-size: $font-15px;
position: relative;
padding: var(--cpd-space-8x) var(--cpd-space-10x);
box-sizing: border-box;
overflow-y: auto;
.mx_Dialog_staticWrapper & {
z-index: var(--dialog-zIndex-static);
contain: content;
}
.mx_Dialog_lightbox & {
border-radius: 0px;
background-color: transparent;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
padding: 0;
}
/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
.markdown-body {
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
2023-07-03 17:07:30 +02:00
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) */
pre,
code {
font-family: $monospace-font-family !important;
background-color: $codeblock-background-color;
}
/* 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 */
}
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 */
overflow-x: overlay;
overflow-y: visible;
&::-webkit-scrollbar-corner {
background: transparent;
}
code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
> * {
display: inline;
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
h1,
h2 {
font-size: 1.5em;
border-bottom: none !important; /* override GFM */
}
a {
color: $accent-alt;
}
blockquote {
border-left: 2px solid $blockquote-bar-color;
color: $secondary-content;
border-radius: 2px;
padding: 0 10px;
}
}
}
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-backdrop-color;
z-index: var(--dialog-zIndex-standard-background);
&.mx_Dialog_staticBackground {
z-index: var(--dialog-zIndex-static-background);
}
.mx_Dialog_wrapperWithStaticUnder & {
/* 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;
}
.mx_Dialog_lightbox & {
opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 300ms;
}
}
2020-01-22 12:44:47 +01:00
.mx_Dialog_titleImage {
2020-06-24 17:12:46 +02:00
vertical-align: sub;
2020-01-22 12:44:47 +01:00
width: 25px;
height: 25px;
margin-left: -2px;
margin-right: 4px;
margin-bottom: 2px;
2020-01-22 12:44:47 +01:00
}
2019-01-29 15:34:58 +01:00
.mx_Dialog_title {
color: $dialog-title-fg-color;
display: inline-block;
width: 100%;
box-sizing: border-box;
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
2019-01-29 15:34:58 +01:00
&.danger {
color: $alert;
}
}
2019-01-29 15:34:58 +01:00
.mx_Dialog_header {
position: relative;
padding: 0;
padding-inline-end: 20px; /* Reserve room for the close button */
margin-bottom: var(--cpd-space-2x);
&.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
2019-01-29 15:34:58 +01:00
}
@define-mixin customisedCancelButton {
2019-01-29 15:34:58 +01:00
cursor: pointer;
position: relative;
width: 28px;
height: 28px;
border-radius: 14px;
background-color: var(--cpd-color-bg-subtle-secondary);
&:hover {
background-color: var(--cpd-color-bg-subtle-primary);
}
&::before {
content: "";
width: 28px;
height: 28px;
position: absolute;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
}
.mx_Dialog_cancelButton {
@mixin customisedCancelButton;
2019-01-29 15:34:58 +01:00
position: absolute;
top: var(--cpd-space-4x);
right: var(--cpd-space-4x);
}
.mx_Dialog_content {
margin: 24px 0 68px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
word-wrap: break-word;
}
.mx_Dialog_buttons {
margin-top: $spacing-20;
margin-inline-start: auto;
text-align: right;
2020-11-19 20:06:24 +01:00
.mx_Dialog_buttons_additive {
/* The consumer is responsible for positioning their elements. */
2020-11-19 20:06:24 +01:00
float: left;
}
.mx_Dialog_buttons_row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
text-align: initial;
margin-inline-start: auto;
/* default gap among elements */
column-gap: var(--buttons-dialog-gap-column);
row-gap: var(--buttons-dialog-gap-row);
button {
margin: 0 !important; /* override the margin settings */
}
}
}
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 24px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
background-color: var(--cpd-color-bg-action-primary-rest);
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
&:not(:focus-visible) {
outline: none;
}
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
* We should go through and have one consistent set of styles for buttons throughout the app.
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
*
* Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
* For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
*/
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
.mx_Dialog input[type="submit"],
A11y - fix anchors-as-buttons (#7444) * add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
Fix decryption failure bar covering the timeline (#10360) * Use grid layout instead - BEM naming style - Increase block gap from 4px to 8px - Use flexbox inside 'header' grid-area to let the buttons wrapped - Use variables - Remove 4px gap when one of the buttons is not rendered - Change 'body' to 'message' - Set 'align-self: start' to the icon and spinner Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Unset height of spinner Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Break lines at newline characters with white-space: pre-line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Edit tests to check decryption failure bars on narrow timeline - checkTimelineNarrow() looks for buttons by default - Test indicator as well Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix double underscores Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix double underscores - pcss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Iterate - buttons at the bottom - Set common spacing to buttons with variables - Remove line breaks, yarn run i18n - Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Check waiting headline as well Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Increase spacing between the message and the buttons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * lint Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Increase block gap between wrapped buttons for clickability Apply 8px between wrapped buttons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Revert bottom margin of buttons which are not expected to be wrapped Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Check visibility instead of existence This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element currently includes the button(s) only. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * lint - prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow() The loading spinner is likely to disappear while checking the bar on the narrow timeline. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Kerry <kerrya@element.io>
2023-03-30 11:11:16 +02:00
margin-right: var(--buttons-dialog-gap-column);
margin-bottom: 5px;
/* flip colours for the secondary ones */
font-weight: var(--cpd-font-weight-semibold);
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
background-color: transparent;
font-family: inherit;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
margin-right: 0px;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
.mx_Dialog input[type="submit"]:focus,
A11y - fix anchors-as-buttons (#7444) * add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
filter: brightness($focus-brightness);
}
.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
min-width: 156px;
}
.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
color: var(--cpd-color-text-on-solid-primary);
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
border: solid 1px var(--cpd-color-border-critical-primary);
color: var(--cpd-color-text-critical-primary);
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
.mx_Dialog input[type="submit"]:disabled,
A11y - fix anchors-as-buttons (#7444) * add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {
background-color: $light-fg-color;
border: solid 1px $light-fg-color;
opacity: 0.7;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 8px;
box-shadow: none;
2020-04-24 23:14:41 +02:00
/* Don't show scroll-bars on spinner dialogs */
overflow-x: hidden;
overflow-y: hidden;
}
/* 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;
margin: auto;
}
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_TextInputDialog_input {
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-content;
background-color: $background;
}
.mx_button_row {
margin-top: 69px;
}
/* username colors */
/* used by SenderProfile & RoomPreviewBar */
.mx_Username_color1 {
color: $username-variant1-color;
}
.mx_Username_color2 {
color: $username-variant2-color;
}
.mx_Username_color3 {
color: $username-variant3-color;
}
.mx_Username_color4 {
color: $username-variant4-color;
}
.mx_Username_color5 {
color: $username-variant5-color;
}
.mx_Username_color6 {
color: $username-variant6-color;
}
.mx_AppWarning,
.mx_AppPermission {
text-align: center;
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
}
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
@define-mixin ProgressBarBgColour $colour {
background-color: $colour;
&::-webkit-progress-bar {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {
border-radius: $radius;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: $radius;
}
}
@define-mixin unreal-focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
/* WebKit gets its native focus styles. */
@media (-webkit-min-device-pixel-ratio: 0) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
A11y - fix anchors-as-buttons (#7444) * add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00
@define-mixin ButtonResetDefault {
appearance: none;
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
cursor: pointer;
}
Prepare for Element Call integration (#9224) * Improve accessibility and testability of Tooltip Adding a role to Tooltip was motivated by React Testing Library's reliance on accessibility-related attributes to locate elements. * Make the ReadyWatchingStore constructor safer The ReadyWatchingStore constructor previously had a chance to immediately call onReady, which was dangerous because it was potentially calling the derived class's onReady at a point when the derived class hadn't even finished construction yet. In normal usage, I guess this never was a problem, but it was causing some of the tests I was writing to crash. This is solved by separating out the onReady call into a start method. * Rename 1:1 call components to 'LegacyCall' to reflect the fact that they're slated for removal, and to not clash with the new Call code. * Refactor VideoChannelStore into Call and CallStore Call is an abstract class that currently only has a Jitsi implementation, but this will make it easy to later add an Element Call implementation. * Remove WidgetReady, ClientReady, and ForceHangupCall hacks These are no longer used by the new Jitsi call implementation, and can be removed. * yarn i18n * Delete call map entries instead of inserting nulls * Allow multiple active calls and consolidate call listeners * Fix a race condition when creating a video room * Un-hardcode the media device fallback labels * Apply misc code review fixes * yarn i18n * Disconnect from calls more politely on logout * Fix some strict mode errors * Fix another updateRoom race condition
2022-08-30 21:13:39 +02:00
@define-mixin LegacyCallButton {
box-sizing: border-box;
font-weight: var(--cpd-font-weight-semibold);
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
&::before {
2022-12-12 12:24:14 +01:00
content: "";
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
}
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
@define-mixin ThreadRepliesAmount {
color: $secondary-content;
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
}
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/element-icons/thread-summary.svg");
mask-position: center;
Improve style rules for thread summary (#8868) * Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * From threads amount to replies amount Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables and remove obsolete one Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a variable used only once Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Ensure the same line-height is applied Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove !important Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-04 21:07:50 +02:00
mask-repeat: no-repeat;
mask-size: contain;
height: 18px;
min-width: 18px;
background-color: $icon-button-color !important;
}
2022-11-14 19:31:20 +01:00
@define-mixin composerButtonHighLight {
background: var(--cpd-color-bg-subtle-primary);
2022-11-14 19:31:20 +01:00
&::before {
background-color: var(--cpd-color-icon-primary) !important;
2022-11-14 19:31:20 +01:00
}
}
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
2022-11-14 19:31:20 +01:00
--size: 26px;
position: relative;
cursor: pointer;
height: var(--size);
line-height: var(--size);
width: auto;
padding-left: var(--size);
border-radius: $border-radius;
&::before {
2022-12-12 12:24:14 +01:00
content: "";
2022-11-14 19:31:20 +01:00
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
z-index: 2;
2022-11-14 19:31:20 +01:00
}
&::after {
2022-12-12 12:24:14 +01:00
content: "";
2022-11-14 19:31:20 +01:00
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: var(--size);
height: var(--size);
border-radius: $border-radius;
}
&:hover {
&::after {
background: $hover-bg;
2022-11-14 19:31:20 +01:00
}
&::before {
background-color: $hover-color;
}
}
}
.mx_lineClamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--mx-line-clamp, 1);
overflow: hidden;
}