rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2024-12-01 13:24:10 +01:00
Code Issues Releases Activity
3827b96b7d
DataTables/media/css/jquery.dataTables.css

238 lines
11 KiB
CSS
Raw Normal View History

New: Basic CSS for creating a DataTable - similar to what is in the demo_table.css file but doesn't have all the bits and bobs needed for the demos (which could conflict with other elements on the page or are just wasted bandwidth). This file is suitable for distibution on a CDN. Ultimatly this should replace the majority of what is in demo_table.css (that should basically become "examples.css") and become the main file in the distribution for CSS. Will probably need a JUI version as well.
2012-01-08 21:06:33 +01:00
/*
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
* Table styles
New: Basic CSS for creating a DataTable - similar to what is in the demo_table.css file but doesn't have all the bits and bobs needed for the demos (which could conflict with other elements on the page or are just wasted bandwidth). This file is suitable for distibution on a CDN. Ultimatly this should replace the majority of what is in demo_table.css (that should basically become "examples.css") and become the main file in the distribution for CSS. Will probably need a JUI version as well.
2012-01-08 21:06:33 +01:00
*/
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
/*
* Header and footer styles
*/
/*
* Body styles
*/ }
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
padding: 10px 18px; }
table.dataTable thead th,
table.dataTable tfoot th {
font-weight: bold; }
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 1px solid #111111; }
table.dataTable thead th:active,
table.dataTable thead td:active {
outline: none; }
table.dataTable tfoot th,
table.dataTable tfoot td {
border-top: 1px solid #111111; }
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
cursor: pointer;
*cursor: hand; }
table.dataTable thead .sorting {
background: url("../images/sort_both.png") no-repeat center right; }
table.dataTable thead .sorting_asc {
background: url("../images/sort_asc.png") no-repeat center right; }
table.dataTable thead .sorting_desc {
background: url("../images/sort_desc.png") no-repeat center right; }
table.dataTable thead .sorting_asc_disabled {
background: url("../images/sort_asc_disabled.png") no-repeat center right; }
table.dataTable thead .sorting_desc_disabled {
background: url("../images/sort_desc_disabled.png") no-repeat center right; }
table.dataTable tbody th,
table.dataTable tbody td {
padding: 8px 10px; }
table.dataTable th.center,
table.dataTable td.center,
table.dataTable td.dataTables_empty {
text-align: center; }
table.dataTable th.right,
table.dataTable td.right {
text-align: right; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
border-top: 1px solid #dddddd; }
table.dataTable.row-border tbody tr:first-child th,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
border-top: none; }
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd; }
table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
border-left: 1px solid #dddddd; }
table.dataTable.cell-border tbody tr:first-child th,
table.dataTable.cell-border tbody tr:first-child td,
table.dataTable.cell-border tbody tr:last-child th,
table.dataTable.cell-border tbody tr:last-child td {
border-top: none; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #f9f9f9; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: white; }
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: whitesmoke; }
table.dataTable.sort-column tbody tr > .sorting_1,
table.dataTable.sort-column tbody tr > .sorting_2,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #f9f9f9; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1, table.dataTable.display.stripe tbody tr.odd > .sorting_1 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #f1f1f1; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_2, table.dataTable.display.stripe tbody tr.odd > .sorting_2 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #f3f3f3; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3, table.dataTable.display.stripe tbody tr.odd > .sorting_3 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: whitesmoke; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.even > .sorting_1, table.dataTable.display.stripe tbody tr.even > .sorting_1 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #f9f9f9; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.even > .sorting_2, table.dataTable.display.stripe tbody tr.even > .sorting_2 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #fbfbfb; }
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.stripe tbody tr.even > .sorting_3, table.dataTable.display.stripe tbody tr.even > .sorting_3 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #fdfdfd; }
table.dataTable.sort-column.hover tbody tr:hover > .sorting_1,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_1,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_1, table.dataTable.display.hover tbody tr:hover > .sorting_1,
table.dataTable.display.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.display.hover tbody tr.even:hover > .sorting_1 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #eaeaea; }
table.dataTable.sort-column.hover tbody tr:hover > .sorting_2,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_2,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_2, table.dataTable.display.hover tbody tr:hover > .sorting_2,
table.dataTable.display.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.display.hover tbody tr.even:hover > .sorting_2 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #ebebeb; }
table.dataTable.sort-column.hover tbody tr:hover > .sorting_3,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_3,
New - CSS: Add 'display' class to the options list. - 'display' is a short cut for using the classes: 'hover stripe row-border sort-column'
2013-06-15 10:22:16 +02:00
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_3, table.dataTable.display.hover tbody tr:hover > .sorting_3,
table.dataTable.display.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.display.hover tbody tr.even:hover > .sorting_3 {
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
background-color: #eeeeee; }
New: Basic CSS for creating a DataTable - similar to what is in the demo_table.css file but doesn't have all the bits and bobs needed for the demos (which could conflict with other elements on the page or are just wasted bandwidth). This file is suitable for distibution on a CDN. Ultimatly this should replace the majority of what is in demo_table.css (that should basically become "examples.css") and become the main file in the distribution for CSS. Will probably need a JUI version as well.
2012-01-08 21:06:33 +01:00
/*
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
* Control feature layout
New: Basic CSS for creating a DataTable - similar to what is in the demo_table.css file but doesn't have all the bits and bobs needed for the demos (which could conflict with other elements on the page or are just wasted bandwidth). This file is suitable for distibution on a CDN. Ultimatly this should replace the majority of what is in demo_table.css (that should basically become "examples.css") and become the main file in the distribution for CSS. Will probably need a JUI version as well.
2012-01-08 21:06:33 +01:00
*/
Dev: Completing the work on the new SCSS stylesheet for DataTables - The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
2013-06-15 09:27:18 +02:00
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1; }
.dataTables_wrapper .dataTables_length {
float: left; }
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.55em; }
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333 !important;
border: 1px solid transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: white !important;
border: 1px solid black;
background-color: #474747;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, black));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #474747 0%, black 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #474747 0%, black 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #474747 0%, black 100%);
/* IE10+ */
background: -o-linear-gradient(top, #474747 0%, black 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #474747 0%, #000000 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid gainsboro;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
/* IE10+ */
background: -o-linear-gradient(top, white 0%, gainsboro 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #d7d7d7));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
/* IE10+ */
background: -o-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #f6f6f6 0%, #d7d7d7 100%);
/* W3C */
box-shadow: inset 0 0 3px #111; }
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #333333; }
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch; }
Reference in New Issue Copy Permalink