element-web/res/css/_common.scss

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 New Vector Ltd

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";

:root {
    font-size: 10px;
}

html {
    /* hack to stop overscroll bounce on OSX and iOS.
       N.B. Breaks things when we have legitimate horizontal overscroll */
    height: 100%;
    overflow: hidden;
}

body {
    font-family: $font-family;
    font-size: $font-15px;
    background-color: $primary-bg-color;
    color: $primary-fg-color;
    border: 0px;
    margin: 0px;

    // needed to match the designs correctly on macOS
    // see https://github.com/vector-im/riot-web/issues/11425
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

pre, code {
    font-family: $monospace-font-family;
    font-size: 100% !important;
}

.error, .warning,
.text-error, .text-warning {
    color: $warning-color;
}

.text-success {
    color: $accent-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-fg-color;
    font-weight: 400;
    font-size: $font-18px;
    margin-top: 16px;
    margin-bottom: 16px;
}

a:hover,
a:link,
a:visited {
    color: $accent-color-alt;
}

input[type=text],
input[type=search],
input[type=password] {
    padding: 9px;
    font-family: $font-family;
    font-size: $font-14px;
    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');
}

// 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-fg-color;
}

/* Required by Firefox */
textarea {
    font-family: $font-family;
    color: $primary-fg-color;
}

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;
}

// .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 {
    .mx_textinput > input[type=text],
    .mx_textinput > input[type=search] {
        border: none;
        flex: 1;
        color: $primary-fg-color;
    }

    :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 $dialog-close-fg-color;
        // these things should probably not be defined
        // globally
        margin: 9px;
        flex: 0 0 auto;
    }

    .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: $roomsublist-label-fg-color;
    }
}

/*** panels ***/
.dark-panel {
    background-color: $dark-panel-bg-color;

    :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: $primary-bg-color;
        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: $input-lighter-fg-color;
        background-color: $input-lighter-bg-color;
        border: none;
    }
}

/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
    border: 0;
}

/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

// These are magic constants which are excluded from tinting, to let themes
// (which only have CSS, unlike skins) 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-color;
}

#mx_theme_secondaryAccentColor {
    color: $secondary-accent-color;
}

#mx_theme_tertiaryAccentColor {
    color: $roomsublist-label-bg-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: $primary-bg-color;
    color: $light-fg-color;
    z-index: 4012;
    font-weight: 300;
    font-size: $font-15px;
    position: relative;
    padding: 25px 30px 30px 30px;
    max-height: 80%;
    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
    border-radius: 4px;
    overflow-y: auto;
}

.mx_Dialog_fixedWidth {
    width: 60vw;
    max-width: 704px;
}

.mx_Dialog_staticWrapper .mx_Dialog {
    z-index: 4010;
}

.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: 0.85;
    background-color: $lightbox-background-bg-color;
}

.mx_Dialog_lightbox .mx_Dialog {
    border-radius: 0px;
    background-color: transparent;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

.mx_Dialog_header {
    position: relative;
    margin-bottom: 10px;
}

.mx_Dialog_titleImage {
    vertical-align: sub;
    width: 25px;
    height: 25px;
    margin-left: -2px;
    margin-right: 4px;
}

.mx_Dialog_title {
    font-size: $font-22px;
    line-height: $font-36px;
    color: $dialog-title-fg-color;
}

.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
    text-align: center;
}
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
    margin-right: 20px; // leave space for the 'X' cancel button
}

.mx_Dialog_title.danger {
    color: $warning-color;
}

.mx_Dialog_cancelButton {
    mask: url('$(res)/img/feather-customised/cancel.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    width: 14px;
    height: 14px;
    background-color: $dialog-close-fg-color;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0px;
}

.mx_Dialog_content {
    margin: 24px 0 68px;
    font-size: $font-14px;
    color: $primary-fg-color;
    word-wrap: break-word;
}

.mx_Dialog_buttons {
    margin-top: 20px;
    text-align: right;
}

/* 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.
 */
.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] {
    @mixin mx_DialogButton;
    margin-left: 0px;
    margin-right: 8px;

    // flip colours for the secondary ones
    font-weight: 600;
    border: 1px solid $accent-color;
    color: $accent-color;
    background-color: $button-secondary-bg-color;
}

.mx_Dialog button:last-child {
    margin-right: 0px;
}

.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover {
    @mixin mx_DialogButton_hover;
}

.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus {
    filter: brightness($focus-brightness);
}

.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
    color: $accent-fg-color;
    background-color: $accent-color;
    min-width: 156px;
}

.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger {
    background-color: $warning-color;
    border: solid 1px $warning-color;
    color: $accent-fg-color;
}

.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning {
    border: solid 1px $warning-color;
    color: $warning-color;
}

.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button: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: 0px;
    box-shadow: none;

    /* 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/riot-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-color;
}

.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-fg-color;
    background-color: $primary-bg-color;
}

.mx_textButton {
    @mixin mx_DialogButton_small;
}

.mx_textButton:hover {
    @mixin mx_DialogButton_hover;
}

.mx_button_row {
    margin-top: 69px;
}

.mx_Beta {
    color: red;
    margin-right: 10px;
    position: relative;
    top: -3px;
    background-color: white;
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid darkred;
    cursor: help;
    transition-duration: 200ms;
    font-size: smaller;
    filter: opacity(0.5);
}

.mx_Beta:hover {
    color: white;
    border: 1px solid gray;
    background-color: darkred;
}

.mx_TintableSvgButton {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

.mx_TintableSvgButton object {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.mx_TintableSvgButton span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

// 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;
}

// A context menu that largely fits the | [icon]    [label] | format.
.mx_IconizedContextMenu {
    min-width: 146px;

    .mx_IconizedContextMenu_optionList {
        & > * {
            padding-left: 20px;
            padding-right: 20px;
        }

        // the notFirst class is for cases where the optionList might be under a header of sorts.
        &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
            // This is a bit of a hack when we could just use a simple border-top property,
            // however we have a (kinda) good reason for doing it this way: we need opacity.
            // To get the right color, we need an opacity modifier which means we have to work
            // around the problem. PostCSS doesn't support the opacity() function, and if we
            // use something like postcss-functions we quickly run into an issue where the
            // function we would define gets passed a CSS variable for custom themes, which
            // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
            //
            // Therefore, we just hack in a line and border the thing ourselves
            &::before {
                border-top: 1px solid $primary-fg-color;
                opacity: 0.1;
                content: '';

                // Counteract the padding problems (width: 100% ignores the 40px padding,
                // unless we position it absolutely then it does the right thing).
                width: 100%;
                position: absolute;
                left: 0;
            }
        }

        // round the top corners of the top button for the hover effect to be bounded
        &:first-child .mx_AccessibleButton:first-child {
            border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu
        }

        // round the bottom corners of the bottom button for the hover effect to be bounded
        &:last-child .mx_AccessibleButton:last-child {
            border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu
        }

        .mx_AccessibleButton {
            // pad the inside of the button so that the hover background is padded too
            padding-top: 12px;
            padding-bottom: 12px;
            text-decoration: none;
            color: $primary-fg-color;
            font-size: $font-15px;
            line-height: $font-24px;

            // Create a flexbox to more easily define the list items
            display: flex;
            align-items: center;

            &:hover {
                background-color: $menu-selected-color;
            }

            img, .mx_IconizedContextMenu_icon { // icons
                width: 16px;
                min-width: 16px;
                max-width: 16px;
            }

            span.mx_IconizedContextMenu_label { // labels
                padding-left: 14px;
                width: 100%;
                flex: 1;

                // Ellipsize any text overflow
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }

    &.mx_IconizedContextMenu_compact {
        .mx_IconizedContextMenu_optionList > * {
            padding: 8px 16px 8px 11px;
        }
    }
}

@define-mixin ProgressBarColour $colour {
    color: $colour;
    &::-moz-progress-bar {
        background-color: $colour;
    }
    &::-webkit-progress-value {
        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;
    }
}