bestSMS/best/static/rapidsms/stylesheets/tables.css

/* vim:set et ts=4 sw=4 */

table {
    border-collapse: collapse; 
    width:100%;}

    col { }

        /* highlight sorted columns just a little tiny bit. some people
         * won't be able to see it, but the header should contain some
         * kind of indication, too. darker colors interfere with the
         * grid lines, which are also very light. */
        col.sorted {
            background: #fcfcff; }

    tr{ }

            td, th {
                padding: 0.5em;
                border: 1px solid #ddd;

                /* reset the "look" of headers to match regular cells,
                 * since they can appear anywhere (col or row scope) */
                font-weight: normal;
                text-align: left;
            }

            /* if this table is directly following a header, we don't
             * need a border top. it'd probably get lost, anyway */
            h2 + table thead th {
                border-top: none; }

                thead th {
                    background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0;
                    color: #888;
                }

                    thead th a,
                    thead th span.unsortable {
                        color: #888;
                        outline: 0;
                        border-left: 1px solid #f8f8f8;

                        /* the padding/margin magic overlaps the padding
                         * of the th, to make it all clickable */
                        padding: 0.5em;
                        margin: -0.5em;

                        /* if a sort marker is within this link, it'll
                         * need to position absolutely within */
                        position: relative;
                        display: block;
                    }

                        /* highlight it when the th is hovered, a bit
                         * like (most) native controls. this is crappy,
                         * since the background image is sitting on top
                         * of the th bg, not replacing it */
                        thead th a:hover {
                            background-image: url(../images/table-header-bg-highlight.png);
                            color: #000;
                        }

                    thead th.sorted a {
                        padding-right: 26px;
                        color: #000;
                     }

                        /* unfortunately, an extra element (a span) is
                         * needed to display the sort marker. all of the
                         * other backgrounds are already busy. snap it
                         * to the right/middle of the th */
                        thead th.sorted a span {
                            display: block;
                            position: absolute;
                            right: 5px;
                            top: 50%;
                            width: 16px;
                            height: 16px;
                            margin-top: -8px;
                            overflow: hidden;
                            text-indent: -9999px;
                        }

                        thead th.asc  a span { background-image: url("../icons/silk/sort_ascending.png"); }
                        thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); }

                /* make the grid lighter within the tbody, since it's
                 * only a visual hint to distinguish the rows + cols */
                tbody th, tbody td {
                    border-color: #f8f8f8; }

                /* stripe the rows
                tbody tr:nth-child(odd) {
                    background: #f8f8f8; }*/

                /* restore the dark outer borders of the tbody */
                tbody tr:first-child th, tbody tr:first-child td { border-top-color:    #ddd; }
                tbody th:last-child,     tbody td:last-child     { border-right-color:  #ddd; }
                tbody tr:last-child th,  tbody tr:last-child td  { border-bottom-color: #ddd; }
                tbody th:first-child,    tbody td:first-child    { border-left-color:   #ddd; }

            /* some cells have nothing important to say, (like "none" or
             * "never"), but are required none the less. make them dull,
             * to highlight the rows which contain real data */
            td.na, th.na, td span.na, th span.na {
                font-style: italic;
                color: #aaa;
            }

    /* when a row is "active" (eg. it is being viewed, edited, etc), it
     * is dimly highlighted. the bgcolor is 10% of #33a7d2 (links)
     * applied to the cells (not the row), to mask the stripes */
    tr.active td, tr.active th {
        background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; }

    tr.no-data { }

            tr.no-data td {
                text-align: center;
                background: #f8f8ff no-repeat 50% 50%;
                padding: 2em;
                color: #aaa;
            }

            /* since no-data rows usually only have a single <td>, the
             * last-child rule above breaks their huge padding. this is
             * a hack to restore it. */
            body:last-child tr.no-data td:last-child {
                padding-right: 2em; }

            tr.no-data td a.add {
                display: block;
                padding-top: 0.625em;
                font-size: 80%;
            }

            /* since there is no data, it might be useful to point the
             * user in the right direction. these arrows are very light,
             * and displayed behind the "You haven't..." text. */
            tr.no-data.look-up    td { background-image: url("../images/big-arrows/up.png");    }
            tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); }
            tr.no-data.look-down  td { background-image: url("../images/big-arrows/down.png");  }
            tr.no-data.look-left  td { background-image: url("../images/big-arrows/left.png");  }

            /* if there is no data because an error occurred, make the
             * table obviously busted by highlighting it in red. */
            tr.no-data.error td {
                color: #f66;
                background-color: #fff8f8;
                background-image: url("../images/big-arrows/error.png");
            }

    tr.depth-1 td.indent { padding-left: 2em;  }
    tr.depth-2 td.indent { padding-left: 4em;  }
    tr.depth-3 td.indent { padding-left: 6em;  }
    tr.depth-4 td.indent { padding-left: 8em;  }
    tr.depth-5 td.indent { padding-left: 10em; }
    tr.depth-6 td.indent { padding-left: 12em; }
    tr.depth-7 td.indent { padding-left: 14em; }
    tr.depth-8 td.indent { padding-left: 16em; }

    tfoot {
        background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
        font-size: 80%;
    }

        /* no padding in the footer cell; the links will float and pad
         * themselves, so the clickable blocks are easier to hit */
        tfoot td {
            padding: 0; }

            /* footer links are dull, because they're less important
             * than the data. TODO: is this totally stupid? (i don't
             * really care, it's pretty) */
            tfoot a,
            tfoot span {
                display: block;
                float: right;
                padding: 0.625em;
                color: #aaa;
            }

                /* footer links can be broken up with spans, which look
                 * the same, except super dull (for things like disabled
                 * pagination links */
                tfoot span {
                    color: #ddd; }

                /* highlight hover links brighter than usual, since
                 * they're harder to spot */
                tfoot a:hover {
                    background: #fff; }

            /* move all paginator links to the left, to separate from
             * additional views and export, which lives on the right */
            tfoot .paginator,
            tfoot .paginator a,
            tfoot .paginator span {
                float: left; }

                tfoot .paginator a.active {
                    background: #ddd;
                    color: #fff;
                }

                tfoot .paginator .first,
                tfoot .paginator .prev,
                tfoot .paginator .next,
                tfoot .paginator .last {
                    background-repeat: no-repeat;
                    background-position: 0 50%;
                    text-indent: -9999px;
                    overflow: hidden;
                    padding-right: 0;
                    padding-left: 0;
                    width: 16px;
                }

                /* links look something like:
                 *  <<  <  1 2 3 4  >  >> */
                tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png");    }
                tfoot .paginator .prev  { background-image: url("../icons/silk/resultset_previous.png"); }
                tfoot .paginator .next  { background-image: url("../icons/silk/resultset_next.png");     }
                tfoot .paginator .last  { background-image: url("../icons/silk/resultset_last.png");     }

                /* when a link is disabled, move the background image
                 * over to reveal the transparent sprite to the left */
                tfoot .paginator span.na {
                    background-position: -16px 50%; }

                /* the ... to indicate that page links have been hidden
                 * (because there were too many) should be quite dull */
                tfoot .paginator span.elipsis {
                    letter-spacing: 1px;
                    color: #888;
                 }