Vmeda.Online/src/addon/messages/pages/discussion/discussion.scss

// Messages.
$item-message-bg: $white !default;
$item-message-note-text: $gray-dark !default;
$item-message-note-font-size: 75% !default;
$item-message-mine-bg: $gray-light !default;

ion-app.app-root page-addon-messages-discussion {
    .toolbar-title {
        padding: 0;
    }

    ion-content {
        background-color: $gray-lighter !important;
    }

    .addon-messages-discussion-container {
        display: flex;
        flex-direction: column;
        padding-bottom: 15px;
    }

    .addon-messages-date {
        font-weight: normal;
        font-size: 1.4rem;
    }

    .addon-messages-unreadfrom {
        color: $core-color;
        background-color: transparent;
        margin-top: 6px;
        ion-icon {
            color: $core-color;
            background-color: transparent;
        }
    }

    // Message item.
    .addon-message {
        border: 0;
        border-radius: 4px;
        padding: 8px;
        @include margin(8px, 8px, 0, 8px);
        background-color: $item-message-bg;
        align-self: flex-start;
        width: 90%;
        max-width: 90%;
        min-height: 0;
        position: relative;
        @include core-transition(width);
        // This is needed to display bubble tails.
        overflow: visible;

        core-format-text > p:only-child {
            display: inline;
        }


        .addon-message-user {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .5rem!important;
            margin-top: 0;

            ion-avatar {
                display: block;
                min-width: 30px;
                min-height: 30px;
                margin: 0;
                img {
                    width: 30px;
                    height: 30px;
                }
            }

            div {
                font-weight: 500;
                flex-grow: 1;
                @include padding-horizontal(.5rem);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .note {
                @include text-align('end');
                color: $item-message-note-text;
                font-size: $item-message-note-font-size;
            }
        }

        &.addon-message-no-user .addon-message-user .note {
            width: 100%;
        }

        &.activated {
            background-color: darken($item-message-bg, 10%);
        }

        &.item-block .item-inner {
            border-bottom: 0;
            padding: 0;
            margin: 0;
        }

        .label {
            margin: 0;
            padding: 0;
        }

        .addon-message-text {
            display: inline-flex;
        }

        .addon-messages-delete-button {
            min-height: initial;
            line-height: initial;
            @include margin(0, 0, 0, 10px);
            height: 1.6em !important;
            -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
            align-self: flex-end;
            vertical-align: middle;
            @include float('end');

            .icon {
                font-size: 1.4em;
                line-height: initial;
            }
        }

        .tail {
            content: '';
            width: 0;
            height: 0;
            border: 0.5rem solid transparent;
            position: absolute;
            touch-action: none;
        }
    }

    .addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
    .addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine {
        h2 {
            margin-bottom: 0;
        }
        margin-top: -4px;
        padding-top: 0;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }

    // Defines when an item-message is the user's.
    .addon-message-mine {
        background-color: $item-message-mine-bg;
        align-self: flex-end;

        &.activated {
            background-color: darken($item-message-mine-bg, 10%);
        }

        .spinner {
            @include float(end);
            @include margin(2px, -3px, -2px, 5px);

            svg {
              width: 16px;
              height: 16px;
            }
        }

        .tail {
            @include position(null, 0, 0, null);
            @include margin-horizontal(null, -0.5rem);
            border-bottom-color: $item-message-mine-bg;
        }

        &.activated .tail {
            border-bottom-color: darken($item-message-mine-bg, 10%);
        }
    }

    .addon-message-not-mine .tail {
        @include position(null, null, 0, 0);
        @include margin-horizontal(-0.5rem, null);
        border-bottom-color: $item-message-bg;
    }

    .addon-message-not-mine.activated .tail {
        border-bottom-color: darken($item-message-bg, 10%);
    }

    .toolbar-title {
        img {
            @include margin-horizontal(null, 6px);
        }
        display: flex;
        align-items: center;

        core-format-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 1;
        }

        ion-icon {
            @include margin-horizontal(6px, null);
        }
    }
}

ion-app.app-root.ios page-addon-messages-discussion ion-footer .toolbar:last-child {
    padding-bottom: 4px;
    min-height: 0;
}