roundcubemail/skins/elastic/styles/widgets/messages.less

/*** UI Messages ***/

#messagestack {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    z-index: 50000;
    width: 320px;
    height: auto;
    max-height: 85%;
    overflow-y: auto;

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

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

        a:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

.ui.alert {
    margin: 0;
    margin-bottom: 0.2em;
    opacity: 0.95;
    float: left;
    width: 100%;
    padding: 0.75em;

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

    &.loading > i.icon:before {
        content: @fa-var-circle-o-notch;
        .animated-icon-class;
    }

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

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

/* TODO: #message-objects colors, make <a> buttons, icons using <i>? */

#message-objects div {
    margin: 0;
    margin-bottom: 0.2em;
    width: 100%;
    padding: 0.75em;

    &:before {
        &:extend(.font-icon-class);
    }

    &.notice:before {
        content: @fa-var-info-circle;
    }

    &.warning:before {
        content: @fa-var-warning;
    }

    &.error:before {
        content: @fa-var-exclamation-circle;
    }
}

@media screen and (max-width: 480px) {
    #messagestack {
        left: 0.5em;
        width: auto;
    }
}