238 lines
9.9 KiB
CSS
238 lines
9.9 KiB
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;
|
||
|
|
}
|