roundcube_themes/beetroot/styles/widgets/messages.less

/**
 * Roundcube Webmail styles for the Elastic skin
 *
 * Copyright (c) The Roundcube Dev Team
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original authors in the README.md file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

/*** UI Messages ***/

// .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()

.ui.alert {
    margin: 0;
    margin-bottom: .2rem;
    opacity: .95;
    width: 100%;
    padding: .75em;
    color: @color-message;
    border: 1px solid @color-message-border;
    background-color: @color-message-background;
    display: flex;
    align-items: center;

    @media screen and (max-width: @screen-width-xs) {
        border: 0;
    }

    span {
        margin: auto 0;
    }

    & > i.icon {
        line-height: 1;
        color: lighten(@color-black, 25%);
        margin: auto 0;
    }

    & > i.icon:before {
        &:extend(.font-icon-class);
        content: @fa-var-info-circle;
        margin-right: .6rem;
    }

    .btn {
        margin-left: .5rem;
    }

    &.loading {
        color: @color-message-loading;

        & > i.icon:before {
            content: @fa-var-circle-notch;
            .animated-icon-class;
            width: 1em;
        }
    }

    &.alert-success > i.icon:before {
        content: @fa-var-check-circle;
        color: @color-message-success;
    }

    &.alert-warning > i.icon:before {
        content: @fa-var-exclamation-triangle;
        color: @color-message-warning;
    }

    &.alert-danger > i.icon:before {
        content: @fa-var-exclamation-circle;
        color: @color-message-error;
    }

    &.vcardattachment > i.icon:before {
        content: @fa-var-address-card; // vcard_attachments plugin
    }

    &.enigmaattachment > i.icon:before {
        content: @fa-var-key; // enigma plugin
    }

    &.signed > i.icon:before,
    &.encrypted > i.icon:before {
        content: @fa-var-lock; // enigma plugin
    }

    &.chat > i.icon:before {
        content: @fa-var-comment;
    }

    // #6797: Fix for long buttons issue
    .boxbuttons {
        white-space: nowrap;

        .btn {
            .overflow-ellipsis;
            max-width: 220px;
        }

        @media screen and (max-width: @screen-width-xs) {
            display: flex;
            flex-direction: column;

            .btn {
                max-width: 160px;

                &:not(:first-child) {
                    margin-top: .25rem;
                }
            }
        }
    }

    // This works with following structure: <i> <span> [button].
    // <span> here is a one-line text, and button can be anything but <span>.
    &.aligned-buttons {
        display: flex;

        span {
            flex: 1;
        }
    }

    a:not(.btn) {
        color: @color-message-link;
        font-weight: @color-message-link-font-weight;
    }

    h3 {
        font-weight: bold;
        font-size: 1.2rem;
    }

    p {
        margin: 1rem 0;
    }

    &.boxerror,
    &.boxconfirmation,
    &.boxinformation,
    &.boxwarning {
        padding: .5em;
        border-radius: 0;

        i.icon {
            font-size: 1.5em !important;
        }
    }

    &.boxerror {
        background-color: @color-message-error-box-background;
        & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
    }

    &.boxinformation {
        background-color: @color-message-information-box-background;
        & when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
    }

    &.boxconfirmation {
        background-color: @color-message-success-box-background;
        & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
    }

    &.boxwarning {
        background-color: @color-message-warning-box-background;
        & when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
    }

    & + table {
        margin-top: 1em;
    }
}

#messagestack {
    position: absolute;
    bottom: .5em;
    right: .7em;
    z-index: 105; // needs to be above .ui-widget-overlay
    width: 320px;
    height: auto;
    max-height: 85%;

    @media screen and (max-width: @screen-width-xs) {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
    }

    div {
        background-color: @color-message;
        color: @color-message-text;

        @media screen and (max-width: @screen-width-xs) {
            margin: 0;
            border-radius: 0;
            min-height: 4.2rem;
        }

        &.voice {
            position: absolute;
            top: -1000px;
        }

        i.icon {
            font-size: 1.5em !important;
        }

        & > i.icon:before {
            color: @color-message-text;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .loading {
        background-color: @color-message-loading;
        & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
        & > i.icon:before {
            & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
        }
    }

    .alert-info.information {
        background-color: @color-message-information;
        & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
        & > i.icon:before {
            & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
        }
    }

    .alert-success {
        background-color: @color-message-success;
        & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
        & > i.icon:before {
            & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
        }
    }

    .alert-warning {
        background-color: @color-message-warning;
        & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
        & > i.icon:before {
            & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
        }
    }

    .alert-danger {
        background-color: @color-message-error;
        & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
        & > i.icon:before {
            & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
        }
    }

    a {
        color: inherit !important;
        text-decoration: underline;
        cursor: pointer;
    }
}