107 lines
4.1 KiB
CSS
107 lines
4.1 KiB
CSS
/* Modern Enterprise DataTables Styling */
|
|
.card { box-shadow: 0 0 15px rgba(0,0,0,0.05); border: 1px solid #e9ecef; }
|
|
|
|
table.dataTable { font-family: inherit; border-collapse: collapse; margin-top: 15px !important; margin-bottom: 15px !important; }
|
|
table.dataTable thead th {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
border-top: 1px solid #dee2e6;
|
|
padding: 12px 30px 12px 15px;
|
|
color: #495057;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
position: relative;
|
|
}
|
|
table.dataTable tbody td { padding: 12px 15px; border-bottom: 1px solid #e9ecef; vertical-align: middle; font-size: 15px; color: #333; }
|
|
table.dataTable tbody tr { transition: background-color 0.2s; }
|
|
table.dataTable tbody tr:hover { background-color: #f1f7fd; }
|
|
|
|
/* Remove default DataTables sort images completely */
|
|
table.dataTable thead th,
|
|
table.dataTable thead td {
|
|
background-image: none !important;
|
|
}
|
|
/* Hide any possible ::before pseudo-elements from DataTables default */
|
|
table.dataTable thead th::before,
|
|
table.dataTable thead td::before {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
/* Custom FontAwesome Sorting Icons */
|
|
table.dataTable thead th.sorting::after,
|
|
table.dataTable thead th.sorting_asc::after,
|
|
table.dataTable thead th.sorting_desc::after {
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 15px;
|
|
}
|
|
table.dataTable thead th.sorting::after { content: "\f0dc" !important; color: blue !important; opacity: 0.3 !important; }
|
|
table.dataTable thead th.sorting_asc::after { content: "\f161" !important; color: blue !important; opacity: 0.7 !important; }
|
|
table.dataTable thead th.sorting_desc::after { content: "\f160" !important; color: blue !important; opacity: 0.7 !important; }
|
|
|
|
/* Excel Export Button Styling */
|
|
.dt-buttons { margin-left: 15px; }
|
|
.dt-buttons .dt-button.buttons-excel {
|
|
background: #fff !important;
|
|
color: #198754 !important;
|
|
border: 1px solid #198754 !important;
|
|
border-radius: 4px !important;
|
|
padding: 6px 14px !important;
|
|
font-size: 14px !important;
|
|
font-family: 'Sarabun', sans-serif !important;
|
|
font-weight: 600;
|
|
box-shadow: none !important;
|
|
transition: all 0.2s !important;
|
|
}
|
|
.dt-buttons .dt-button.buttons-excel:hover { background: #198754 !important; color: #fff !important; }
|
|
|
|
/* Controls Layout */
|
|
.dt-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 15px;}
|
|
.dt-top-left { display: flex; align-items: center; }
|
|
|
|
.dataTables_length select {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 6px;
|
|
padding: 6px 30px 6px 12px;
|
|
font-family: 'Sarabun', sans-serif;
|
|
outline: none;
|
|
margin: 0 5px;
|
|
background-color: #fff;
|
|
transition: all 0.2s ease-in-out;
|
|
appearance: auto;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
.dataTables_length select:focus {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
.dataTables_filter input {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 20px;
|
|
padding: 8px 18px;
|
|
outline: none;
|
|
transition: all 0.3s ease-in-out;
|
|
font-family: 'Sarabun', sans-serif;
|
|
width: 250px;
|
|
background-color: #f8f9fa;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
|
|
}
|
|
.dataTables_filter input:focus {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
background-color: #fff;
|
|
width: 280px;
|
|
}
|
|
|
|
.dt-bottom-row { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 14px; color: #6c757d;}
|
|
.dataTables_paginate .paginate_button { padding: 5px 10px !important; margin: 0 2px; border-radius: 4px; border: 1px solid #dee2e6 !important; background: #fff !important; color: #007bff !important; cursor: pointer; }
|
|
.dataTables_paginate .paginate_button:hover { background: #e9ecef !important; color: #0056b3 !important; }
|
|
.dataTables_paginate .paginate_button.current { background: #007bff !important; color: #fff !important; border-color: #007bff !important; font-weight: bold;}
|