plekit/table/table.css

   1 /* Thierry Parmentelat - INRIA */
   2
   3 table.plekit_table {
   4     width: auto;
   5     padding: 0;
   6     margin: 0 auto 1.5em auto;
   7     border-collapse:collapse;
   8 /* this used to be hard-wired in the <table> tag, but looks useless now
   9     cellpadding:0;
  10     cellspacing:0;
  11     border:0;
  12     */
  13 }
  14 table.plekit_table>thead>tr, table.plekit_table>tbody>tr {
  15     border-left: 1px solid #C1DAD7;
  16 }
  17 /* remove border for search/pagesize area */
  18 table.plekit_table>thead>tr.pagesize_area, table.plekit_table>thead>tr.search_area {
  19     border-left: 0px;
  20 }
  21 table.plekit_table fieldset {
  22     border: 0px; margin: 0px; padding: 0px;
  23 }
  24
  25 th.plekit_table {
  26     font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  27     color: #4f6b72;
  28     border-right: 1px solid #C1DAD7;
  29     border-bottom: 1px solid #C1DAD7;
  30     border-top: 1px solid #C1DAD7;
  31     letter-spacing: 1px;
  32     text-transform: uppercase;
  33     text-align: left;
  34     padding: 8px 12px 4px 12px;
  35     background: #CAE8EA url(/plekit/icons/tablesort-header.jpg) no-repeat;
  36     vertical-align:middle;
  37 }
  38 table.plekit_table>tbody>tr>td, table.plekit_table textarea, table.plekit_table input [type="text"] {
  39     font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  40     border-right: 1px solid #C1DAD7;
  41     border-bottom: 1px solid #C1DAD7;
  42 }
  43 table.plekit_table>tbody>tr>td {
  44 /*    padding: 6px 12px 6px 12px; */
  45     padding: 4px 8px 4px 8px;
  46     color: #4f6b72;
  47 }
  48 table.plekit_table>tbody>tr>td a {
  49     font-weight:normal;
  50 }
  51
  52 th.sortable,
  53 th.sortable-text,
  54 th.sortable-date,
  55 th.sortable-keep,
  56 th.sortable-date-dmy,
  57 th.sortable-numeric,
  58 th.sortable-currency,
  59 th.sortable-sortByTwelveHourTimestamp,
  60 th.sortable-sortIPAddress,
  61 th.sortable-sortEnglishLonghandDateFormat,
  62 th.sortable-sortScientificNotation,
  63 th.sortable-sortImage,
  64 th.sortable-sortFileSize,
  65 th.sortable-sortBandwidth,
  66 th.sortable-sortLastContact,
  67 th.sortable-sortAlphaNumeric,
  68 th.sortable-sortAlphaNumericTop,
  69 th.sortable-sortAlphaNumericBottom,
  70 th.sortable-sortEnglishDateTime {
  71     cursor:pointer;
  72     background: #CAE8EA url(/plekit/icons/tablesort-header-sortable.jpg) no-repeat;
  73     padding: 8px 12px 4px 16px;
  74 }
  75 th.forwardSort {
  76     background:#CAE8EA url(/plekit/icons/tablesort-header-down.jpg) no-repeat 0 0;
  77 }
  78 th.reverseSort {
  79     background:#CAE8EA url(/plekit/icons/tablesort-header-up.jpg) no-repeat 0 0;
  80 }
  81 table thead th.forwardSort a,
  82 table thead th.reverseSort a {
  83     color:#000;
  84     text-decoration:none;
  85 }
  86 /* rows with odd index */
  87 tr.alt {
  88     background: #F5FAFA;
  89     color: #797268;
  90 }
  91
  92 /* sort columns */
  93 /* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
  94    as it trys to download the image each and every time that it is used (which means a 1000 row table
  95    will produce 1000 http requests for the image in question) */
  96 tr[class="alt"]>td {
  97     background: #F5FAFA url(/plekit/icons/tablesort-td-alt.jpg) no-repeat;
  98 }
  99 table.plekit_table>tbody>tr>td [class~="alt"] {
 100     background: #edf3f3 url(/plekit/icons/tablesort-col-alt.jpg) no-repeat !important;
 101 }
 102 /* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
 103 table.bullets1>tbody>tr.alt>td:first-child {
 104     background-color: #F5FAFA;
 105     background-image: url(/plekit/icons/tablesort-bullet2.gif);
 106     background-repeat: no-repeat;
 107 }
 108 table.bullets1>tbody>tr>td:first-child {
 109     background-image: url(/plekit/icons/tablesort-bullet1.gif);
 110     background-repeat: no-repeat;
 111 }
 112
 113 /* table decorations */
 114 td.search_area {
 115     text-align:right;
 116     padding-right: 30px;
 117     padding-bottom: 5px;
 118 }
 119 td.pagesize_area {
 120     text-align:right;
 121     padding-right: 30px;
 122     padding-bottom: 5px;
 123 }
 124 .pagesize_label, .pagesize_input {
 125     font-style: oblique;
 126     font-size: .5em;
 127 }
 128 .search_label{
 129     font-weight:bold;
 130 }
 131 .reset {
 132     border:1px;
 133 }
 134
 135 /* Pagination list styles */
 136 ul.fdtablePaginater {
 137     display:table;
 138     list-style:none;
 139     padding:0;
 140     margin:0 auto;
 141     text-align:center;
 142     height:1.5em;
 143     width:auto;
 144     margin-bottom:1em;
 145 }
 146 ul.fdtablePaginater li {
 147     display:table-cell;
 148     padding-right:4px;
 149     color:#666;
 150     list-style:none;
 151
 152     -moz-user-select:none;
 153     -khtml-user-select:none;
 154 }
 155 ul.fdtablePaginater li a.currentPage {
 156     border-color:#a84444 !important;
 157     color:#000;
 158 }
 159 ul.fdtablePaginater li a:active {
 160     border-color:#222 !important;
 161     color:#222;
 162 }
 163 ul.fdtablePaginater li a,
 164 ul.fdtablePaginater li div {
 165     display:block;
 166     width:2em;
 167     font-size:1em;
 168     color:#666;
 169     padding:0;
 170     margin:0;
 171     text-decoration:none;
 172     outline:none;
 173     border:1px solid #ccc;
 174     font-family:georgia, serif;
 175 }
 176 ul.fdtablePaginater li div {
 177     cursor:normal;
 178     opacity:.5;
 179     filter:alpha(opacity=50);
 180 }
 181 ul.fdtablePaginater li a span,
 182 ul.fdtablePaginater li div span {
 183     display:block;
 184     line-height:2em;
 185     border:1px solid #fff;
 186     background:#fff url(/plekit/icons/tablesort-gradient.gif) repeat-x 0 -20px;
 187 }
 188 ul.fdtablePaginater li a {
 189     cursor:pointer;
 190 }
 191 ul.fdtablePaginater li a:focus {
 192     color:#333;
 193     text-decoration:none;
 194     border-color:#aaa;
 195 }
 196 .fdtablePaginaterWrap {
 197     text-align:center;
 198     clear:both;
 199     text-decoration:none;
 200 }
 201 ul.fdtablePaginater li .next-page span,
 202 ul.fdtablePaginater li .previous-page span,
 203 ul.fdtablePaginater li .first-page span,
 204 ul.fdtablePaginater li .last-page span {
 205     font-weight:bold !important;
 206 }
 207 /* Keep the table columns an equal size during pagination */
 208 td.sized1 {
 209     width:16em;
 210     text-align:left;
 211 }
 212 td.sized2 {
 213     width:10em;
 214     text-align:left;
 215 }
 216 td.sized3 {
 217     width:7em;
 218     text-align:left;
 219 }
 220 /*
 221    tfoot td
 222         {
 223         text-align:right;
 224         font-weight:bold;
 225         text-transform:uppercase;
 226         letter-spacing:1px;
 227         }
 228    */
 229 #visibleTotal {
 230     text-align:center;
 231     letter-spacing:auto;
 232 }
 233 * html ul.fdtablePaginater li div span,
 234 * html ul.fdtablePaginater li div span {
 235     background:#eee;
 236 }
 237 tr.invisibleRow {
 238     display:none;
 239     visibility:hidden;
 240 }
 241 p.paginationText {
 242     font-style:oblique;
 243 }
 244 p.table_note {
 245     font-style:oblique;
 246     font-size:0.6em;
 247     font-family: georgia;
 248     text-align: center;
 249 }
 250 span.table_note_title {
 251     font-weight:bold;
 252     font-size:1.5em;
 253     font-family: georgia;
 254     text-align: center;
 255 }
 256
 257 span.bold {
 258     font-weight:bold;
 259 }
 260
 261 /* for IE */
 262 ul.fdtablePaginater {display:inline-block;}
 263 mul.fdtablePaginater {display:inline;}
 264 ul.fdtablePaginater li {float:left;}
 265 ul.fdtablePaginater {text-align:center;}
 266 /*table.plekit_table { border-bottom:1px solid #C1DAD7; }*/
 267
 268 .search_input:focus ,.pagesize_input:focus {
 269     background-color: #8cd;
 270     outline-color: #696;
 271 }