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

/**
 * Roundcube webmail styles for the Elastic skin
 *
 * Copyright (c) 2017, 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.
 */

/*** List and treelist widgets ***/

.listing {
    tbody td,
    li {
        border-bottom: 1px solid @color-list-border;
        cursor: default;
        font-weight: normal;
        line-height: @listing-line-height;
    }

    tbody td,
    li a {
        display: block;
        text-decoration: none;
        cursor: default;
        padding: 0 .5rem;
        white-space: nowrap;
        vertical-align: middle;
        color: @color-list;
    }

    tbody td {
        display: table-cell;
        outline: none;
        overflow: hidden;
        text-overflow: ellipsis;

        a {
            color: @color-list;
        }
    }

    li.selected,
    tr.selected td {
        color: @color-list-selected;
        background-color: @color-list-selected-background;
    }

    td.selection {
        padding: 0 0 0 .5em;
        width: 2em;
        text-align: center;

        & > input {
            vertical-align: middle;
        }
    }

    td.name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.action {
        /* TODO */
        padding: 0 .5em;
        width: 2em;
        text-align: center;

        &:empty {
            width: 0;
        }
    }

    li.droptarget > a,
    tr.droptarget > td {
        background-color: @color-list-droptarget-background;
    }

    li.disabled,
    tr.disabled td {
        color: @color-list-deleted;
    }

    /* Focus indicator */
    /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
    @media screen and (min-width: @screen-width-large) {
        li > a,
        tbody tr > td:first-child {
            border-left: 2px solid transparent;
        }
        li > a:focus,
        &.focus tbody tr.focused > td:first-child {
            border-left: 2px solid @color-list-focus-indicator;
            outline: 0;
        }
    }
}

table.listing {
    width: 100%;
    table-layout: fixed;
    /*
      border-spacing/border-collapse here fix problem with our focus indicator
      when the table cells use overflow: hidden. I.e. we use border-spacing:0
      instead of Bootstrap's border-collapse:collapse. Is this cross-browser?
    */
    border-spacing: 0;
    border-collapse: unset;
}

ul.listing {
    list-style: none;
    margin: 0;
    padding: 0;

    & > ul {
        padding: 0;
    }

    li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;

        ul {
            border-top: 1px solid @color-list-border;
            padding-left: 1.5em;

            li:last-child {
                border-bottom: none;
            }
        }

        input.icon-checkbox + label,
        input[type=checkbox] {
            position: absolute;
            top: 0;
            right: .5rem;
            height: @listing-line-height;
            vertical-align: middle;
        }
    }
}

html.touch {
    .listing:not(.toolbar) li,
    .listing tbody td {
        line-height: @listing-touch-line-height;
        font-size: 1.2rem;
    }

    input.icon-checkbox + label,
    li input[type=checkbox] {
        height: @listing-touch-line-height;
    }

    td.selection {
        padding: 0;
        width: 3em;
    }
}

/* icons */

.listing.iconized li {
    a:before {
        &:extend(.font-icon-class);
        height: 2em; /* TODO: ? */
        margin-right: .5rem;
    }
    &.preferences > a:before {
        content: @fa-var-sliders;
    }
    &.folders > a:before {
        content: @fa-var-folder;
    }
    &.responses > a:before {
        content: @fa-var-comment;
    }
    &.identities > a:before {
        content: @fa-var-at;
    }
    &.password > a:before {
        content: @fa-var-lock;
    }
    &.addressbook a:before {
        content: @fa-var-book;
    }
    &.contactgroup a:before {
        content: @fa-var-group;
    }
    &.contactsearch a:before {
        content: @fa-var-search;
    }
    &.filter > a:before {
        content: @fa-var-filter;
    }
    &.vacation > a:before {
        content: @fa-var-clock-o;
    }
    &.enigma.keys > a:before {
        content: @fa-var-key;
    }
    &.userinfo > a:before {
        content: @fa-var-info-circle;
    }

    a.help:before {
        content: @fa-var-life-bouy;
    }
    a.about:before {
        content: @fa-var-question-circle-o;
    }
    a.license:before {
        content: @fa-var-shield;
    }

    /* autocomplete popup */
    & > i:before {
        &:extend(.font-icon-class);
        content: @fa-var-user;
        margin-left: .5rem;
    }
    &.group > i:before {
        content: @fa-var-group;
    }
}

html.ie11 .listing.iconized li a:before {
    font-size: 1.25rem;
}

.listing.iconized tr {
    td:before {
        &:extend(.font-icon-class);
        margin-right: .5rem;
    }
    &.contact.person td.name:before {
        content: @fa-var-user;
    }
    &.contact.group td.name:before {
        content: @fa-var-group;
    }
    &.general > td.section:before {
        content: @fa-var-desktop;
    }
    &.mailbox > td.section:before {
        content: @fa-var-envelope-o;
    }
    &.mailview > td.section:before {
        content: @fa-var-inbox;
    }
    &.compose > td.section:before {
        content: @fa-var-paper-plane;
    }
    &.addressbook > td.section:before {
        content: @fa-var-user;
    }
    &.folders > td.section:before {
        content: @fa-var-folder-o;
    }
    &.server > td.section:before {
        content: @fa-var-server;
    }
    &.enigma > td.section:before {
        content: @fa-var-lock;
    }
}

/* selecatable list: e.g. spellcheck language selection */
.listing.iconized.selectable li {
    a:before {
        &:extend(.font-icon-class);
        content: "";
    }
    a.selected:before {
        content: @fa-var-check;
    }
}

.popupmenu .listing {
    li.selected {
        color: @color-toolbarmenu-hover;
        background-color: @color-toolbarmenu-hover-background;
    }

    td {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

ul.treelist li {
    div.treetoggle {
        position: absolute;
        top: (@listing-line-height * 0.5);
        left: 1.4em;
        width: .8em;
        height: .8em;
        line-height: .8em;
        cursor: pointer;

        html.touch & {
            top: (@listing-touch-line-height * 0.5);
        }

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-plus-square-o;
            font-size: .8em;
            width: .8em;
            height: .8em;
            background-color: white;
        }

        &.expanded:before {
            content: @fa-var-minus-square-o;
        }
    }

    & > a {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.selected > a {
        color: @color-list-selected;
        background-color: @color-list-selected-background;
    }

    &.selected {
        color: inherit;
        background-color: transparent;
    }

    ul {
        padding: 0;

        li {
            padding-left: 0;
            a { padding-left: 1.5em; }
            div.treetoggle { left: (1.5em + .9em); }

            li {
                a { padding-left: (2 * 1.5em); }
                div.treetoggle { left: (2 * 1.5em + .9em); }

                li {
                    a { padding-left: (3 * 1.5em); }
                    div.treetoggle { left: (3 * 1.5em + .9em); }

                    li {
                        a { padding-left: (4 * 1.5em); }
                        div.treetoggle { left: (4 * 1.5em + .9em); }

                        li {
                            a { padding-left: (5 * 1.5em); }
                            div.treetoggle { left: (5 * 1.5em + .9em); }
                        }
                    }
                }
            }
        }
    }
}

/*** Folders list widget ***/

.folderlist {
    li {
        &.mailbox {
            &.unread {
                /* TODO */
                & > a {
                    padding-right: 2.8em;
                }
            }

            &.recent {
                color: @color-list-recent;
            }

            .unreadcount {
                position: absolute;
                top: 0;
                right: 0;
                min-width: 2em;
                line-height: 1.4rem;
                margin: (@listing-line-height - 1.4rem)/2;
                padding: 0 .3em;
                border-radius: .4em;
                background: @color-list-badge-background;
                color: @color-list-badge;
                text-align: center;
                font-weight: bold;

                html.touch & {
                    line-height: 2rem;
                    margin: (@listing-touch-line-height - 2rem)/2;
                }
            }

            &.selected .unreadcount {
                /* todo */;
            }

            &.recent > .unreadcount {
                background: @color-list-recent-badge-background;
                color: @color-list-recent-badge;
            }

            &.root {
                display: none !important;
                /* FIXME: This element is confusing, I propose to not use it */
            }
        }

        a:before {
            &:extend(.font-icon-class);
            content: @fa-var-folder-o;
            margin-right: .5rem;
        }

        &.inbox a:before {
            content: @fa-var-inbox;
        }
        &.trash a:before {
            content: @fa-var-trash;
        }
        &.trash.empty a:before {
            content: @fa-var-trash-o;
        }
        &.drafts a:before {
            content: @fa-var-edit;
        }
        &.sent a:before {
            content: @fa-var-paper-plane;
        }
        &.junk a:before {
            content: @fa-var-recycle;
        }
        &.archive a:before {
            content: @fa-var-archive;
        }
    }
}

/*** Messages list widget ***/

.messagelist > thead,
.messagelist .branch,
table.fixedcopy {
    display: none;
}

.messagelist {
    td {
        border-left: 0;
        width: 2em;
        vertical-align: top;
        font-size: 1rem !important;
    }

    td.subject {
        width: 99%;
        position: relative; /* for span.date positioning in Firefox */
        background-clip: padding-box; /* fixes Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */
        padding-right: 0;

        a {
            text-decoration: none;
            cursor: default;
        }

        span {
            line-height: 2em;

            &.date {
                right: 0;
                top: 0;
                position: absolute;
                font-size: 90%;
                color: @color-list-secondary;
            }

            &.fromto {
                padding-left: 1.5em;
                display: block;
                margin-right: 10em;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 90%;
                color: @color-list-secondary;
            }

            &.subject {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    td.threads {
        padding: 0 0 0 .25rem;
        width: 1.5em;
    }

    td.flags {
        width: 2.5em;

        & > span {
            height: 1.7em;
            line-height: 1.7em;
            display: block;

            &.flag {
                cursor: pointer;
            }
        }
    }

    tr.flagged td,
    tr.flagged td.subject span.subject a,
    tr.flagged td.subject span.date,
    tr.flagged td.subject span.fromto {
        color: @color-list-flagged;
    }

    tr.deleted td,
    tr.deleted td.subject span.subject a,
    tr.deleted td.subject span.date,
    tr.deleted td.subject span.fromto {
        color: @color-list-deleted;
    }

    tr.unread td.subject span.subject {
        font-weight: bold;
    }

    /* thread parent message with unread children */
    tr.unroot td.subject a {
        text-decoration: underline;
    }

    tr.thread td.threads div:before {
        &:extend(.font-icon-class);
        content: @fa-var-angle-right;
        cursor: pointer;
    }
    tr.thread.expanded td.threads div:before {
        content: @fa-var-angle-down;
    }
    td.subject span.msgicon.status:before {
        &:extend(.font-icon-class);
        content: @fa-var-circle;
        cursor: pointer;
        font-size: .4em;
        width: 3em;
    }
    td.subject span.msgicon.status.unread:before {
        content: @fa-var-star;
        font-size: 1.2em;
        width: 1em;
    }
    td.subject span.msgicon.status.unreadchildren:before {
        content: @fa-var-star-half-o;
        font-size: 1.2em;
        width: 1em;
    }
    td.subject span.msgicon.status.replied:before {
        content: @fa-var-mail-reply;
        font-size: 1.2em;
        width: 1em;
    }
    td.subject span.msgicon.status.forwarded:before {
        content: @fa-var-mail-forward;
        font-size: 1.2em;
        width: 1em;
    }
    td.subject span.msgicon.status.replied.forwarded:before {
        content: @fa-var-mail-forward; /* TODO */
        font-size: 1.2em;
        width: 1em;
    }
    tr.deleted td.subject span.msgicon.status:before {
        content: @fa-var-ban;
        font-size: 1.2em;
        width: 1em;
    }

    span.attachment span {
        &:extend(.font-icon-class);

        &:before {
            margin: 0;
            content: @fa-var-paperclip;
        }
        &.report:before {
            content: @fa-var-file-text-o;
        }
        &.encrypted:before {
            content: @fa-var-lock;
        }
        &.vcard:before {
            content: @fa-var-user-o; /* vcard_attachments plugin */
        }
    }

    span.flagged:before {
        &:extend(.font-icon-class);
        content: @fa-var-flag;
    }

    tr:hover span.unflagged:before {
        &:extend(.font-icon-class);
        content: @fa-var-flag-o;
    }

}


html.layout-phone,
html.touch {
    .messagelist {
        td.flags {
            display: none;
        }
        td.subject {
            padding-right: 1em;
            span.date {
                right: 1em;
            }
        }
        td.threads {
            padding: 0;
            width: 2em;
        }
    }
}


/* Attachments list */

.attachmentslist {
    padding: 0;
}
.attachmentslist li {
    display: inline-block;
    line-height: 1.25em;

    &:before {
        &:extend(.font-icon-class);
        content: @fa-var-file-o;
    }

    &.txt:before,
    &.text:before {
        content: @fa-var-file-text-o;
    }

    &.pdf:before {
        content: @fa-var-file-pdf-o;
    }

    &.odt:before,
    &.doc:before,
    &.docx:before,
    &.msword:before {
        content: @fa-var-file-word-o;
    }

    &.ods:before,
    &.xls:before,
    &.xlsx:before,
    &.msexcel:before {
        content: @fa-var-file-excel-o;
    }

    &.rar:before,
    &.zip:before,
    &.gz:before {
        content: @fa-var-file-zip-o;
    }

    &.image:before,
    &.jpg:before,
    &.jpeg:before,
    &.png:before {
        content: @fa-var-file-image-o;
    }

    &.mp3:before,
    &.audio:before {
        content: @fa-var-file-audio-o;
    }

    &.m4p:before,
    &.video:before {
        content: @fa-var-file-video-o;
    }

    &.ics:before,
    &.calendar:before {
        /* TODO */
    }

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

    &.html:before {
        content: @fa-var-file-code-o;
    }

    &.eml:before,
    &.rfc822:before {
        /* TODO */
    }

    &.odp:before,
    &.otp:before,
    &.ppt:before,
    &.pptx:before,
    &.ppsx:before,
    &.vnd.mspowerpoint:before {
        content: @fa-var-file-powerpoint-o;
    }

    &.sig:before,
    &.pgp-signature:before,
    &.pkcs7-signature:before {
        /* TODO */
    }

    &.application.asc:before {
        /* TODO */
    }

    &.application.pgp-keys:before {
        /* TODO */
    }

    .attachment-size {
        color: @color-list-secondary;
    }

    a.button {
        float: right;
    }

    a.delete:before {
        float: right;
        &:extend(.font-icon-class);
        content: @fa-var-trash;
    }

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

        a.cancelupload:before {
            float: right;
            &:extend(.font-icon-class);
            content: @fa-var-remove;
        }
    }
}