src/assets/dashboard.css
.table {
margin-bottom: 10px;
text-align: center;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover,
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: #f4f8fb !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > thead > tr > th,
.table-bordered {
border-top: 1px solid #ebeff2;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ebeff2;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ebeff2;
}
tbody {
color: #5b616b;
}
th {
color: #666666;
font-weight: 600;
}
.table-bordered {
border: 1px solid #ebeff2;
}
table.focus-on tbody tr.focused th {
background-color: #71b6f9;
color: #ffffff;
}
table.focus-on tbody tr.focused td {
background-color: #71b6f9;
color: #ffffff;
}
.table-rep-plugin .table-responsive {
border: none !important;
}
.table-rep-plugin tbody th {
font-size: 14px;
font-weight: normal;
}
.table-rep-plugin .checkbox-row {
padding-left: 40px;
}
.table-rep-plugin .checkbox-row label {
display: inline-block;
padding-left: 5px;
position: relative;
}
.table-rep-plugin .checkbox-row label::before {
-o-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
background-color: #ffffff;
border-radius: 3px;
border: 1px solid #cccccc;
content: "";
display: inline-block;
height: 17px;
left: 0;
margin-left: -20px;
position: absolute;
transition: 0.3s ease-in-out;
width: 17px;
outline: none !important;
}
.table-rep-plugin .checkbox-row label::after {
color: #555555;
display: inline-block;
font-size: 11px;
height: 16px;
left: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
position: absolute;
top: -1px;
width: 16px;
}
.table-rep-plugin .checkbox-row input[type="checkbox"] {
cursor: pointer;
opacity: 0;
z-index: 1;
outline: none !important;
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label {
opacity: 0.65;
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:focus + label::before {
outline-offset: -2px;
outline: none;
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
content: "\f00c";
font-family: 'FontAwesome';
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::before {
background-color: #71b6f9;
border-color: #71b6f9;
}
.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
color: #ffffff;
}
.fixed-table-container tbody .selected td {
background-color: #f4f8fb;
}
.modal-block {
background: transparent;
margin: 40px auto;
max-width: 600px;
padding: 0;
position: relative;
text-align: left;
}
/* editable table */
#datatable-editable .actions a {
padding: 5px;
}
#datatable-editable .form-control {
background-color: #ffffff;
width: 100%;
}
#datatable-editable .icon-trash {
color: #ff5b5b;
}
#datatable-editable .icon-cancel {
color: #ff5b5b;
}
#datatable-editable .icon-pencil {
color: #10c469;
}
#datatable-editable .icon-floppy {
color: #10c469;
}
/* Data tables */
#datatable td {
font-weight: normal;
}
.paginate_button {
display: inline-block !important;
}
div.dataTables_paginate ul.pagination {
margin-top: 30px;
}
div.dataTables_info {
padding-top: 38px;
}
.dt-buttons {
float: left;
}
div#datatable-buttons_info {
float: left;
}
/* Responsive data table */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
box-shadow: 0 0 3px rgba(67, 89, 102, 0.2);
background-color: #188ae2;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
background-color: #ff5b5b;
}
/* Fixed table */
.fixedHeader-floating {
top: 124px !important;
}
/* Key Table */
table.dataTable th.focus,
table.dataTable td.focus {
outline: 3px solid #71b6f9 !important;
outline-offset: -1px;
}
/* Tablesaw */
.tablesaw thead {
background: #ebeff2;
background-image: none;
border: none;
}
.tablesaw thead th {
text-shadow: none;
letter-spacing: 0.06em;
}
.tablesaw thead tr:first-child th {
padding-top: 1.1em;
padding-bottom: 0.9em;
}
.tablesaw thead tr:first-child th {
font-weight: 600;
font-family: inherit;
border: none;
}
.tablesaw td,
.tablesaw tbody th {
font-size: inherit;
line-height: inherit;
padding: 10px !important;
}
.tablesaw-stack tbody tr,
.tablesaw tbody tr {
border-bottom: none;
}
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after,
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
font-family: FontAwesome;
font-size: 10px;
}
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after {
content: "\f176";
}
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
content: "\f175";
}
.tablesaw-bar .btn-select.btn-small:after,
.tablesaw-bar .btn-select.btn-micro:after {
font-size: 8px;
padding-right: 10px;
}
.tablesaw-swipe .tablesaw-cell-persist {
box-shadow: none;
}
.tablesaw-enhanced .tablesaw-bar .btn {
text-shadow: none;
background-image: none;
}
.tablesaw-enhanced .tablesaw-bar .btn.btn-select:hover {
background: #ffffff;
}
.tablesaw-enhanced .tablesaw-bar .btn:hover,
.tablesaw-enhanced .tablesaw-bar .btn:focus,
.tablesaw-enhanced .tablesaw-bar .btn:active {
color: #188ae2 !important;
background-color: #ebeff2;
outline: none !important;
box-shadow: none !important;
background-image: none;
}
#circle-red {
width: 25px;
height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
text-align: center;
vertical-align: middle;
display:inline-flex;
}
#circle-yellow {
width: 25px;
height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: yellow;
text-align:center;
vertical-align: middle;
display:inline-flex;
}
#circle-green {
width: 25px;
height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: green;
text-align:center;
vertical-align: middle;
display:inline-flex;
}