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

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

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

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

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

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

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

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

    /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
    tbody tr > td:first-child {
        border-left: 2px solid transparent;
    }
    &.focus tbody tr.focused > td:first-child {
        border-left: 2px solid @list-focus-indicator-color;
    }
}

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

ul.listing {
    display: block;
    list-style: none;
    margin: 0;
    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: 2.4em;
            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;
    }
    &.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;
    }
}

/*** Folders list widget ***/

.folderlist {
    li {
        &.mailbox {
            .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: @badge-font-color;
                text-align: center;
                font-weight: bold;
            }

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

            &.recent > .unreadcount {
                background: /* todo */;
            }

            &.unread {
                /* TODO */
            }

            &.recent {
                /* TODO */
            }
        }

        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;

    a.button {
        float: right;
    }

    &: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 */
    }
}