mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-30 11:38:36 -07:00
1c1ad5ab30
Add option on tables to show/hide columns. Add option in settings to manually check for updates. Add option in config to toggle github update checks. Remove the hidden danger zone link to wipe database.
693 lines
No EOL
12 KiB
CSS
693 lines
No EOL
12 KiB
CSS
/*
|
|
* File: demo_table.css
|
|
* CVS: $Id$
|
|
* Description: CSS descriptions for DataTables demo pages
|
|
* Author: Allan Jardine
|
|
* Created: Tue May 12 06:47:22 BST 2009
|
|
* Modified: $Date$ by $Author$
|
|
* Language: CSS
|
|
* Project: DataTables
|
|
*
|
|
* Copyright 2009 Allan Jardine. All Rights Reserved.
|
|
*
|
|
* ***************************************************************************
|
|
* DESCRIPTION
|
|
*
|
|
* The styles given here are suitable for the demos that are used with the standard DataTables
|
|
* distribution (see www.datatables.net). You will most likely wish to modify these styles to
|
|
* meet the layout requirements of your site.
|
|
*
|
|
* Common issues:
|
|
* 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
|
|
* no conflict between the two pagination types. If you want to use full_numbers pagination
|
|
* ensure that you either have "example_alt_pagination" as a body class name, or better yet,
|
|
* modify that selector.
|
|
* Note that the path used for Images is relative. All images are by default located in
|
|
* ../images/ - relative to this CSS file.
|
|
*/
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* DataTables features
|
|
*/
|
|
|
|
.dataTables_wrapper {
|
|
position: relative;
|
|
clear: both;
|
|
zoom: 1; /* Feeling sorry for IE */
|
|
|
|
}
|
|
|
|
.dataTables_processing {
|
|
width: 50%;
|
|
float: left;
|
|
margin-top: -60px;
|
|
margin-left: 25%;
|
|
margin-bottom: 12px;
|
|
height: 40px;
|
|
padding: 8px 0px 0px 20px;
|
|
border: none;
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
background-color: rgba(0,0,0,.5);
|
|
border-radius: 8px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.dataTables_length {
|
|
width: 40%;
|
|
float: left;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.dataTables_length {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dataTables_filter {
|
|
float: right;
|
|
text-align: right;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.dataTables_info {
|
|
width: 60%;
|
|
float: left;
|
|
margin-top: 12px;
|
|
margin-left: 15px;
|
|
margin-bottom: 12px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.dataTables_info {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dataTables_paginate {
|
|
float: right;
|
|
text-align: right;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
/* Pagination nested */
|
|
.paginate_disabled_previous, .paginate_enabled_previous,
|
|
.paginate_disabled_next, .paginate_enabled_next {
|
|
height: 19px;
|
|
float: left;
|
|
cursor: pointer;
|
|
*cursor: hand;
|
|
color: #fff !important;
|
|
}
|
|
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
|
|
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
|
|
.paginate_disabled_next:active, .paginate_enabled_next:active {
|
|
outline: none;
|
|
}
|
|
|
|
.paginate_disabled_previous,
|
|
.paginate_disabled_next {
|
|
color: #666 !important;
|
|
}
|
|
.paginate_disabled_previous, .paginate_enabled_previous {
|
|
padding-left: 23px;
|
|
}
|
|
.paginate_disabled_next, .paginate_enabled_next {
|
|
padding-right: 23px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.paginate_disabled_previous {
|
|
background: url('../images/back_disabled.png') no-repeat top left;
|
|
}
|
|
|
|
.paginate_enabled_previous {
|
|
background: url('../images/back_enabled.png') no-repeat top left;
|
|
}
|
|
.paginate_enabled_previous:hover {
|
|
background: url('../images/back_enabled_hover.png') no-repeat top left;
|
|
}
|
|
|
|
.paginate_disabled_next {
|
|
background: url('../images/forward_disabled.png') no-repeat top right;
|
|
}
|
|
|
|
.paginate_enabled_next {
|
|
background: url('../images/forward_enabled.png') no-repeat top right;
|
|
}
|
|
.paginate_enabled_next:hover {
|
|
background: url('../images/forward_enabled_hover.png') no-repeat top right;
|
|
}
|
|
|
|
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* DataTables display
|
|
*/
|
|
table.display {
|
|
margin: 0 auto;
|
|
clear: both;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
/* Note Firefox 3.5 and before have a bug with border-collapse
|
|
* ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
|
|
* border-spacing: 0; is one possible option. Conditional-css.com is
|
|
* useful for this kind of thing
|
|
*
|
|
* Further note IE 6/7 has problems when calculating widths with border width.
|
|
* It subtracts one px relative to the other browsers from the first column, and
|
|
* adds one to the end...
|
|
*
|
|
* If you want that effect I'd suggest setting a border-top/left on th/td's and
|
|
* then filling in the gaps with other borders.
|
|
*/
|
|
}
|
|
|
|
table.display thead th {
|
|
white-space:nowrap;
|
|
padding: 0px 0px 0px 18px;
|
|
cursor: pointer;
|
|
color: #999;
|
|
background-color: #212121;
|
|
font-size: 11px;
|
|
}
|
|
|
|
|
|
table.display thead th i {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
table.display thead .sorting,
|
|
table.display thead .sorting_asc,
|
|
table.display thead .sorting_desc {
|
|
cursor: pointer;
|
|
*cursor: hand;
|
|
height: 35px;
|
|
}
|
|
table.display thead .sorting,
|
|
table.display thead .sorting_asc,
|
|
table.display thead .sorting_desc,
|
|
table.display thead .sorting_asc_disabled,
|
|
table.display thead .sorting_desc_disabled {
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
}
|
|
table.display thead .sorting {
|
|
background-image: url("../images/sort_both.png");
|
|
}
|
|
table.display thead .sorting_asc {
|
|
background-image: url("../images/sort_asc.png");
|
|
}
|
|
table.display thead .sorting_desc {
|
|
background-image: url("../images/sort_desc.png");
|
|
}
|
|
table.display thead .sorting_asc_disabled {
|
|
background-image: url("../images/sort_asc_disabled.png");
|
|
}
|
|
table.display thead .sorting_desc_disabled {
|
|
background-image: url("../images/sort_desc_disabled.png");
|
|
}
|
|
|
|
table.display tfoot th {
|
|
padding: 3px 18px 3px 10px;
|
|
border-top: 1px solid black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
table.display tr.heading2 td {
|
|
border-bottom: 1px solid #aaa;
|
|
}
|
|
|
|
table.display td {
|
|
padding: 5px 0 5px 5px;
|
|
}
|
|
|
|
table.display td.title {
|
|
padding: 5px;
|
|
white-space: normal;
|
|
min-width: 400px;
|
|
}
|
|
|
|
table.display td.center {
|
|
text-align: center;
|
|
}
|
|
|
|
table.display tr:hover {
|
|
background-color: rgba(255,255,255,0.075);
|
|
}
|
|
|
|
table.display tr:hover a {
|
|
text-decoration:none;
|
|
|
|
}
|
|
|
|
table.display td:hover a {
|
|
color: #F9AA03;
|
|
}
|
|
|
|
table.display thead tr:hover {
|
|
background-color: #212121;
|
|
}
|
|
|
|
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* DataTables sorting
|
|
*/
|
|
|
|
.sorting_asc {
|
|
|
|
}
|
|
|
|
.sorting_desc {
|
|
|
|
}
|
|
|
|
.sorting {
|
|
|
|
}
|
|
|
|
.sorting_asc_disabled {
|
|
|
|
}
|
|
|
|
.sorting_desc_disabled {
|
|
|
|
}
|
|
|
|
table.display thead th:active,
|
|
table.display thead td:active {
|
|
outline: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* DataTables row classes
|
|
*/
|
|
table.display tr.odd.gradeA {
|
|
background-color: #ddffdd;
|
|
}
|
|
|
|
table.display tr.even.gradeA {
|
|
background-color: #eeffee;
|
|
}
|
|
|
|
table.display tr.odd.gradeC {
|
|
background-color: #ddddff;
|
|
}
|
|
|
|
table.display tr.even.gradeC {
|
|
background-color: #eeeeff;
|
|
}
|
|
|
|
table.display tr.odd.gradeX {
|
|
background-color: #ffdddd;
|
|
}
|
|
|
|
table.display tr.even.gradeX {
|
|
background-color: #ffeeee;
|
|
}
|
|
|
|
table.display tr.odd.gradeU {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
table.display tr.even.gradeU {
|
|
background-color: #eee;
|
|
}
|
|
|
|
|
|
tr.odd {
|
|
border-top: 0px solid #343434;
|
|
border-bottom: 0px solid #343434;
|
|
background-color: rgba(255,255,255,0.010);
|
|
}
|
|
|
|
tr.even {
|
|
border-top: 0px solid #343434;
|
|
border-bottom: 0px solid #343434;
|
|
background-color: rgba(255,255,255,0.035);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* Misc
|
|
*/
|
|
.dataTables_scroll {
|
|
clear: both;
|
|
}
|
|
|
|
.dataTables_scrollBody {
|
|
*margin-top: -1px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.top, .bottom {
|
|
|
|
}
|
|
|
|
.top .dataTables_info {
|
|
float: none;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.dataTables_empty {
|
|
text-align: center;
|
|
}
|
|
|
|
tfoot input {
|
|
margin: 0.5em 0;
|
|
width: 100%;
|
|
color: #444;
|
|
}
|
|
|
|
tfoot input.search_init {
|
|
color: #999;
|
|
}
|
|
|
|
td.group {
|
|
background-color: #d1cfd0;
|
|
border-bottom: 2px solid #A19B9E;
|
|
border-top: 2px solid #A19B9E;
|
|
}
|
|
|
|
td.details {
|
|
background-color: #d1cfd0;
|
|
border: 2px solid #A19B9E;
|
|
}
|
|
|
|
|
|
.example_alt_pagination div.dataTables_info {
|
|
width: 40%;
|
|
}
|
|
|
|
.paging_full_numbers {
|
|
width: 400px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.paging_full_numbers a:active {
|
|
outline: none
|
|
}
|
|
|
|
.paging_full_numbers a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active {
|
|
border: 1px solid #aaa;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
padding: 2px 5px;
|
|
margin: 0 3px;
|
|
cursor: pointer;
|
|
*cursor: hand;
|
|
color: #333 !important;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button:hover {
|
|
background-color: #ccc;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_active {
|
|
background-color: #99B3FF;
|
|
}
|
|
|
|
table.display tr.even.row_selected td {
|
|
background-color: #B0BED9;
|
|
}
|
|
|
|
table.display tr.odd.row_selected td {
|
|
background-color: #9FAFD1;
|
|
}
|
|
|
|
|
|
/*
|
|
* Sorting classes for columns
|
|
*/
|
|
/* For the standard odd/even */
|
|
tr.odd td.sorting_1 {
|
|
|
|
}
|
|
|
|
tr.odd td.sorting_2 {
|
|
|
|
}
|
|
|
|
tr.odd td.sorting_3 {
|
|
|
|
}
|
|
|
|
tr.even td.sorting_1 {
|
|
|
|
}
|
|
|
|
tr.even td.sorting_2 {
|
|
background-color: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
tr.even td.sorting_3 {
|
|
background-color: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
|
|
/* For the Conditional-CSS grading rows */
|
|
/*
|
|
Colour calculations (based off the main row colours)
|
|
Level 1:
|
|
dd > c4
|
|
ee > d5
|
|
Level 2:
|
|
dd > d1
|
|
ee > e2
|
|
*/
|
|
tr.odd.gradeA td.sorting_1 {
|
|
background-color: #c4ffc4;
|
|
}
|
|
|
|
tr.odd.gradeA td.sorting_2 {
|
|
background-color: #d1ffd1;
|
|
}
|
|
|
|
tr.odd.gradeA td.sorting_3 {
|
|
background-color: #d1ffd1;
|
|
}
|
|
|
|
tr.even.gradeA td.sorting_1 {
|
|
background-color: #d5ffd5;
|
|
}
|
|
|
|
tr.even.gradeA td.sorting_2 {
|
|
background-color: #e2ffe2;
|
|
}
|
|
|
|
tr.even.gradeA td.sorting_3 {
|
|
background-color: #e2ffe2;
|
|
}
|
|
|
|
tr.odd.gradeC td.sorting_1 {
|
|
background-color: #c4c4ff;
|
|
}
|
|
|
|
tr.odd.gradeC td.sorting_2 {
|
|
background-color: #d1d1ff;
|
|
}
|
|
|
|
tr.odd.gradeC td.sorting_3 {
|
|
background-color: #d1d1ff;
|
|
}
|
|
|
|
tr.even.gradeC td.sorting_1 {
|
|
background-color: #d5d5ff;
|
|
}
|
|
|
|
tr.even.gradeC td.sorting_2 {
|
|
background-color: #e2e2ff;
|
|
}
|
|
|
|
tr.even.gradeC td.sorting_3 {
|
|
background-color: #e2e2ff;
|
|
}
|
|
|
|
tr.odd.gradeX td.sorting_1 {
|
|
background-color: #ffc4c4;
|
|
}
|
|
|
|
tr.odd.gradeX td.sorting_2 {
|
|
background-color: #ffd1d1;
|
|
}
|
|
|
|
tr.odd.gradeX td.sorting_3 {
|
|
background-color: #ffd1d1;
|
|
}
|
|
|
|
tr.even.gradeX td.sorting_1 {
|
|
background-color: #ffd5d5;
|
|
}
|
|
|
|
tr.even.gradeX td.sorting_2 {
|
|
background-color: #ffe2e2;
|
|
}
|
|
|
|
tr.even.gradeX td.sorting_3 {
|
|
background-color: #ffe2e2;
|
|
}
|
|
|
|
tr.odd.gradeU td.sorting_1 {
|
|
background-color: #c4c4c4;
|
|
}
|
|
|
|
tr.odd.gradeU td.sorting_2 {
|
|
background-color: #d1d1d1;
|
|
}
|
|
|
|
tr.odd.gradeU td.sorting_3 {
|
|
background-color: #d1d1d1;
|
|
}
|
|
|
|
tr.even.gradeU td.sorting_1 {
|
|
background-color: #d5d5d5;
|
|
}
|
|
|
|
tr.even.gradeU td.sorting_2 {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
tr.even.gradeU td.sorting_3 {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
|
|
/*
|
|
* Row highlighting example
|
|
*/
|
|
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
|
|
background-color: #ECFFB3;
|
|
}
|
|
|
|
.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
|
|
background-color: #E6FF99;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.even:hover {
|
|
background-color: #ECFFB3;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.even:hover td.sorting_1 {
|
|
background-color: #DDFF75;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.even:hover td.sorting_2 {
|
|
background-color: #E7FF9E;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.even:hover td.sorting_3 {
|
|
background-color: #E2FF89;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.odd:hover {
|
|
background-color: #E6FF99;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.odd:hover td.sorting_1 {
|
|
background-color: #D6FF5C;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.odd:hover td.sorting_2 {
|
|
background-color: #E0FF84;
|
|
}
|
|
|
|
.ex_highlight_row #example tr.odd:hover td.sorting_3 {
|
|
background-color: #DBFF70;
|
|
}
|
|
|
|
|
|
/*
|
|
* KeyTable
|
|
*/
|
|
table.KeyTable td {
|
|
border: 3px solid transparent;
|
|
}
|
|
|
|
table.KeyTable td.focus {
|
|
border: 3px solid #3366FF;
|
|
}
|
|
|
|
table.display tr.gradeA {
|
|
background-color: #eeffee;
|
|
}
|
|
|
|
table.display tr.gradeC {
|
|
background-color: #ddddff;
|
|
}
|
|
|
|
table.display tr.gradeX {
|
|
background-color: #ffdddd;
|
|
}
|
|
|
|
table.display tr.gradeU {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
div.box {
|
|
height: 100px;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
border: 1px solid #8080FF;
|
|
background-color: #E5E5FF;
|
|
}
|
|
|
|
td.no-wrap, th.no-wrap {
|
|
white-space:nowrap;
|
|
}
|
|
|
|
div.colVis {
|
|
|
|
}
|
|
|
|
button.ColVis_Button {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
margin-bottom: 0;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: 1.42857143;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
-ms-touch-action: manipulation;
|
|
touch-action: manipulation;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
background-image: none;
|
|
background-color: #444;
|
|
border: 1px solid transparent;
|
|
border-radius: 14.5px;
|
|
} |