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

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

@var-listing-line-height:   2.4em;

.listing {
    tbody td,
    li {
        display: block;
        border-bottom: 1px solid #f4f4f4;
        cursor: default;
        font-weight: normal;
        line-height: @var-listing-line-height;
    }

    tbody td,
    li a {
        display: block;
        text-decoration: none;
        cursor: default;
        padding: 0 0.5em;
        white-space: nowrap;
        vertical-align: middle;
        line-height: @var-listing-line-height;
        color: @color-list;
    }

    tbody td {
        display: table-cell;
        outline: none;
    }

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

    td.selection {
        padding: 0 1em;
        width: 3em;
        text-align: center;
    }

    td.selection > input {
        vertical-align: middle;
    }

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

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

table.listing {
    width: 100%;
    table-layout: fixed;
}

ul.listing {
    display: block;
    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 #f4f4f4;
            padding-left: 1.5em;

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

        input[type=checkbox] {
            position: absolute;
            top: 0;
            right: 0.2em;
            height: @var-listing-line-height;
            vertical-align: middle;
        }
    }
}


/* icons */

.listing.iconized li {
    a:before {
        &:extend(.font-icon-class);
    }
    &.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;
    }

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

.listing.iconized tr {
    td:before {
        &:extend(.font-icon-class);
    }
    &.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;
    }
}

ul.treelist li {
    div.treetoggle {
        position: absolute;
        top: 1.2em;
        left: 1.3em;
        width: 0.8em;
        height: 0.8em;
        line-height: 0.8em;
        cursor: pointer;

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-plus-square-o;
            font-size: 0.8em;
            width: 0.8em;
            height: 0.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 + 0.8em); }

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

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

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

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

/*** Folders list widget ***/

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

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

            .unreadcount {
                position: absolute;
                top: 0;
                right: 0;
                min-width: 2em;
                line-height: 1.4em;
                margin: 0.5em 0.2em;
                padding: 0 0.3em;
                background:  /* todo */ #1e70bf;
                border-radius: 0.4em;
                color: @color-list-badge;
                text-align: center;
                font-weight: bold;
            }

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

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

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

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

    td.subject {
        width: 99%;
        white-space: wrap;
        position: relative; /* for span.date positioning in Firefox */

        span {
            line-height: 2em;

            &.date {
                right: 2px;
                top: 3px;
                position: absolute;
                color: #666; /* TODO */
            }

            &.fromto {
                padding-left: 1.5em;
                display: block;
                margin-right: 10em;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666; /* TODO */
            }

            &.subject {
                clear: both;
                display: block;
                font-size: 1em;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    td.threads {
        vertical-align: bottom;
    }

    td.flags {
        span {
            width: 20px;
            height: 20px;
            display: block;
            margin-left: 1px;

            &.flag {
                cursor: pointer;
            }
        }
    }

    tr.flagged td.subject span.date,
    tr.flagged td.subject span.fromto {
        color: #ff5c33; /* TODO */
    }

    tr.deleted td.subject span.date,
    tr.deleted td.subject span.fromto {
        color: #ccc; /* TODO */
    }

    tr.unread td.subject span.subject {
        /* TODO 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-caret-square-o-right;
    }
    tr.thread.expanded td.threads div:before {
        content: @fa-var-caret-square-o-down;
    }
    td.subject span.msgicon.status:before {
        &:extend(.font-icon-class);
        content: @fa-var-circle;
        cursor: pointer;
        font-size: 0.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 {
            content: @fa-var-paperclip;
        }
        &.report:before {
            content: @fa-var-file-text-o;
        }
        &.encrypted:before {
            content: @fa-var-lock;
        }
    }

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

/* Attachments list */

.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: #ddd; /* TODO: use color variable */
    }

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