chaloBEST/smsBEST/static/rapidsms/stylesheets/tables.css
2012-05-15 18:33:43 +05:30

238 lines
9.9 KiB
CSS
Executable File

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