element-web/res/css/_common.scss

748 lines
19 KiB
SCSS
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 - 2019 New Vector Ltd
Copyright 2019 - 2021 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 "./_font-sizes.scss";
2020-11-03 16:21:33 +03:00
@import "./_font-weights.scss";
@import "./_animations.scss";
@import "./_spacing.scss";
@import url("maplibre-gl/dist/maplibre-gl.css");
2020-09-24 17:23:06 +03:00
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
$selected-message-border-width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width);
$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.
2021-11-21 20:56:25 +03:00
$timeline-image-border-radius: 8px;
:root {
2020-06-04 18:23:28 +03:00
font-size: 10px;
--transition-short: .1s;
--transition-standard: .3s;
}
@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-family: $font-family;
font-size: $font-15px;
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;
}
2019-05-20 12:09:19 +03:00
pre, code {
2019-05-19 19:41:18 +03:00
font-family: $monospace-font-family;
font-size: 100% !important;
2019-05-19 19:41:18 +03:00
}
2020-03-07 03:43:10 +03:00
.error, .warning,
.text-error, .text-warning {
color: $alert;
}
2020-03-07 03:43:10 +03:00
.text-success {
color: $accent;
2020-03-07 03:43:10 +03:00
}
2020-11-19 22:06:24 +03:00
.text-muted {
color: $muted-fg-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-weight: 400;
font-size: $font-18px;
margin-top: 16px;
margin-bottom: 16px;
}
a:hover,
a:link,
a:visited {
color: $accent-alt;
}
2019-02-13 13:39:10 +03:00
input[type=text],
input[type=search],
input[type=password] {
font-family: inherit;
2019-02-13 13:39:10 +03:00
padding: 9px;
font-size: $font-14px;
2019-02-13 13:39:10 +03:00
font-weight: 600;
min-width: 0;
}
input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
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 {
background-image: url('$(res)/img/feather-customised/search-input.svg');
2019-02-13 13:39:10 +03: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 {
display: none;
}
// Override Firefox's UA style so we get a consistent look across browsers
input::placeholder,
textarea::placeholder {
opacity: initial;
}
input[type=text], input[type=password], textarea {
background-color: transparent;
color: $primary-content;
}
/* Required by Firefox */
textarea {
color: $primary-content;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
2019-05-21 05:41:48 +03:00
// 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;
}
legend {
padding-inline: unset;
border: none;
}
2019-02-18 16:43:18 +03:00
// .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],
.mx_textinput > input[type=search] {
border: none;
flex: 1;
color: $primary-content;
}
2019-02-18 16:43:18 +03:00
: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],
.mx_textinput {
display: block;
box-sizing: border-box;
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid rgba($primary-content, .1);
// these things should probably not be defined globally
2019-02-18 16:43:18 +03: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,
.mx_textinput input::placeholder {
color: rgba($input-darker-fg-color, .75);
2019-02-18 16:43:18 +03:00
}
}
/*** panels ***/
.dark-panel {
2019-02-18 16:50:17 +03:00
background-color: $dark-panel-bg-color;
2019-02-18 16:43:18 +03:00
: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],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $background;
2019-02-18 16:43:18 +03:00
border: none;
}
}
.light-panel {
: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],
.mx_textinput {
Color cleanup number six (#7050) * Remove $voip-decline-color and $voip-accept-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $dialog-background-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $mention-user-pill-bg-color -> $warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $plinth-bg-color -> $secondary-accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $input-lighter-fg-color -> $input-darker-fg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $input-valid-border-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $input-invalid-border-color -> $warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $button-bg-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $avatar-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $preview-widget-fg-color -> $greyed-fg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $settings-profile-button-fg-color -> $settings-profile-overlay-placeholder-fg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $presence-online -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $pinned-unread-color -> $notice-primary-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $event-highlight-fg-color -> $warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $tab-label-active-bg-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $button-primary-bg-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $button-danger-bg-color -> $notice-primary-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $button-link-fg-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $togglesw-on-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $slider-selection-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $progressbar-fg-color -> $accent-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $authpage-body-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix merge issue Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix second merge issue Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-11-08 14:50:53 +03:00
color: $input-darker-fg-color;
2019-02-18 16:43:18 +03:00
background-color: $input-lighter-bg-color;
border: none;
}
}
/* 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;
}
/* 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.
*/
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_Dialog {
background-color: $background;
color: $light-fg-color;
z-index: 4012;
font-size: $font-15px;
position: relative;
2020-10-06 16:48:43 +03:00
padding: 24px;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 8px;
overflow-y: auto;
}
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
contain: content;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-backdrop-color;
opacity: 0.8;
z-index: 4011;
}
.mx_Dialog_background.mx_Dialog_staticBackground {
z-index: 4009;
}
.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.
opacity: 0.4;
}
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 300ms;
}
.mx_Dialog_lightbox .mx_Dialog {
border-radius: 0px;
background-color: transparent;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
padding: 0;
}
2019-01-29 17:34:58 +03:00
.mx_Dialog_header {
position: relative;
padding: 3px 0;
margin-bottom: 10px;
}
2020-01-22 14:44:47 +03:00
.mx_Dialog_titleImage {
2020-06-24 18:12:46 +03:00
vertical-align: sub;
2020-01-22 14:44:47 +03:00
width: 25px;
height: 25px;
margin-left: -2px;
margin-right: 4px;
margin-bottom: 2px;
2020-01-22 14:44:47 +03:00
}
2019-01-29 17:34:58 +03:00
.mx_Dialog_title {
color: $dialog-title-fg-color;
display: inline-block;
width: 100%;
box-sizing: border-box;
2019-01-29 17:34:58 +03:00
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
.mx_Dialog_header.mx_Dialog_headerWithCancel {
padding-right: 20px; // leave space for the 'X' cancel button
}
2019-01-29 17:34:58 +03:00
.mx_Dialog_title.danger {
color: $alert;
2019-01-29 17:34:58 +03:00
}
@define-mixin customisedCancelButton {
mask: url('$(res)/img/feather-customised/cancel.svg');
2019-01-29 17:34:58 +03:00
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
background-color: $dialog-close-fg-color;
2019-01-29 17:34:58 +03:00
cursor: pointer;
position: unset;
width: unset;
height: unset;
}
.mx_Dialog_cancelButton {
@mixin customisedCancelButton;
width: 14px;
height: 14px;
2019-01-29 17:34:58 +03:00
position: absolute;
2020-11-03 16:18:18 +03:00
top: 10px;
right: 0;
}
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: $font-14px;
color: $primary-content;
word-wrap: break-word;
}
.mx_Dialog_buttons {
margin-top: $spacing-20;
margin-inline-start: auto;
text-align: right;
2020-11-19 22:06:24 +03:00
.mx_Dialog_buttons_additive {
// The consumer is responsible for positioning their elements.
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: $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
}
}
/* 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 12:40:53 +03:00
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
margin-right: 8px;
margin-bottom: 5px;
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent;
color: $accent;
2019-02-12 18:40:06 +03:00
background-color: $button-secondary-bg-color;
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):hover,
.mx_Dialog input[type="submit"]:hover,
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 12:40:53 +03:00
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
.mx_Dialog_buttons input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
.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 12:40:53 +03: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: $accent-fg-color;
background-color: $accent;
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: $alert;
border: solid 1px $alert;
color: $accent-fg-color;
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
.mx_Dialog input[type="submit"].warning {
border: solid 1px $alert;
color: $alert;
}
.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 12:40:53 +03: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-25 00:14:41 +03:00
/* Don't show scroll-bars on spinner dialogs */
overflow-x: hidden;
overflow-y: hidden;
}
Tweaks to informational architecture 1.1 (#7052) * Move user avatar to Space panel * Add room list header for 'Home' or 'Space Name' to room list Add existing Space context menus to room list header * Re-add pending room join spinner * Iterate RoomListHeader plus context menu * Iterate space context menu * Iterate room list + interactions * Move DND to new iA model * Replace composer custom status management with usermenu one * Cull Quick Actions * Iterate minimized room list state * delint * Merge the RoomListNumResults into the RoomListHeader * Make the search shortcut prompt semi-bold * Iterate RoomListHeader based on design review * Iterate UserMenu based on feedback * Add name to expanded spacepanel usermenu button * i18n * Make room sub list aux button components more generic * Change left panel explore button to only refer to room directory * Iterate RoomListHeader * Fix custom user status input field width in Chrome * Bring back Notification settings button * delint * i18n * post-merge fix * iterate pr * Remove unused state * update copy * Apply suggestions from PR review * delint * Update invite iconography * Iterate Space context menu to match Figma * Fix chevron alignment * Fix edge case for RoomListHeader on metaspaces * Wire up general rageshake-driven feedback mechanism * Add IA1.1 info toast * add missing alt attribute * delint * delint * tweak ia toast priority * e2e test account for new toast * autofocus feedback field and remove old subheading * tweak copy * Iterate space panel colours to match Figma * Iterate PR * delint * Fix feedback submission with object setting values * iterate based on review * Tweak colours and update splash image * Tweaks based on review * Remove room list prompt, made redundant by the big fat `+` * Fix edge cases around User Menu positioning and dnd * Add missing import, bad merge? * Update aria label in e2e test * Fix room list space rooms context menu explore button behaviour * Tweak copy * Revert order of options in the UserMenu * Tweak copy * i18n
2021-11-30 21:08:46 +03:00
.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
max-width: 636px; // match splash image width
.mx_AccessibleButton_kind_link {
font-size: inherit;
padding: 0;
}
}
// 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_GeneralButton:hover {
@mixin mx_DialogButton_hover;
}
.mx_linkButton {
cursor: pointer;
color: $accent;
}
.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_textButton {
2018-12-20 15:46:43 +03:00
@mixin mx_DialogButton_small;
}
.mx_textButton:hover {
@mixin mx_DialogButton_hover;
}
.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_Username_color7 {
color: $username-variant7-color;
}
.mx_Username_color8 {
color: $username-variant8-color;
}
@define-mixin mx_Tooltip_dark {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;
}
// 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;
}
}
@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
}
@define-mixin mx_Settings_tooltip {
// So it fits in the space provided by the page
max-width: 120px;
2019-08-20 22:24:51 +03:00
}
@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 12:40:53 +03: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;
}
@define-mixin CallButton {
box-sizing: border-box;
font-weight: 600;
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
}
@define-mixin ThreadsAmount {
$threadInfoLineHeight: calc(2 * $font-12px);
color: $secondary-content;
font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
}
@define-mixin ThreadInfoIcon {
content: "";
display: inline-block;
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 18px;
min-width: 18px;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}
@define-mixin ListResetDefault {
list-style: none;
padding: 0;
margin: 0;
}