|
|
| (38 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* =============================
| | .dt-container:not(.dts) { |
| General Table Styling
| | border-radius: 0.75rem !important; |
| ============================= */
| |
| table.srf-datatable {
| |
| width: 100% !important;
| |
| margin-bottom: 1rem;
| |
| color: #212529;
| |
| background-color: #fff;
| |
| border-collapse: collapse;
| |
| } | | } |
|
| |
|
| table.srf-datatable thead th {
| | .cc-card-body--table .dt-container { |
| vertical-align: bottom;
| | border: none !important; |
| border-bottom: 2px solid #dee2e6;
| |
| background-color: #f8f9fa;
| |
| font-weight: 600;
| |
| padding: 0.75rem;
| |
| } | | } |
|
| |
|
| table.srf-datatable tbody td { | | .cc-card-body--table .dt-container { |
| border-top: 1px solid #dee2e6; | | font-size: 0.835rem !important; |
| padding: 0.75rem; | | font-weight: 500 !important; |
| | color: #555 !important; |
| | letter-spacing: 0.01em !important; |
| } | | } |
|
| |
|
| table.srf-datatable tbody tr:nth-child(even) {
| | .dt-container input.dt-input,select.dt-input,button.dtsp-showAll,button.dtsp-collapseAll { |
| background-color: #f2f2f2;
| | border-radius: 0.5rem !important; |
| } | | } |
|
| |
|
| table.srf-datatable tbody tr:hover {
| | .dt-container button.dtsp-showAll,button.dtsp-collapseAll { |
| background-color: #e9ecef;
| | margin-left: 0.5rem !important; |
| } | | } |
|
| |
|
| /* =============================
| | dataTable.display > tbody > tr > .sorting_1 { |
| Paging Controls
| | background-color: #f8f8f8 !important; |
| ============================= */
| |
| div.srf-datatable-wrapper .dataTables_paginate {
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| padding: 0.75rem;
| |
| } | | } |
|
| |
|
| div.srf-datatable-wrapper .dataTables_paginate .paginate_button {
| | .dataTable.display > tbody > tr:nth-child(odd) > * { |
| font-size: 0.875rem;
| | background-color: #f5f5f3 !important; |
| color: #007bff !important;
| |
| background-color: #fff;
| |
| border: 1px solid #dee2e6;
| |
| padding: 0.375rem 0.75rem;
| |
| margin-left: 0.25rem;
| |
| border-radius: 0.25rem;
| |
| cursor: pointer;
| |
| } | | } |
|
| |
|
| div.srf-datatable-wrapper .dataTables_paginate .paginate_button.current,
| | .dtsp-emptyMessage { |
| div.srf-datatable-wrapper .dataTables_paginate .paginate_button.current:hover {
| | display: none !important; |
| background-color: #007bff;
| |
| color: #fff !important;
| |
| }
| |
| | |
| div.srf-datatable-wrapper .dataTables_paginate .paginate_button:hover {
| |
| background-color: #e2e6ea;
| |
| }
| |
| | |
| /* =============================
| |
| Info Text (e.g., "Showing 1 to 10 of 100 entries")
| |
| ============================= */
| |
| div.srf-datatable-wrapper .dataTables_info {
| |
| padding: 0.75rem;
| |
| font-size: 0.875rem;
| |
| color: #6c757d;
| |
| }
| |
| | |
| /* =============================
| |
| Search Filter
| |
| ============================= */
| |
| div.srf-datatable-wrapper .dataTables_filter {
| |
| float: right;
| |
| padding: 0.75rem;
| |
| }
| |
| | |
| div.srf-datatable-wrapper .dataTables_filter label {
| |
| font-size: 0.875rem;
| |
| color: #495057;
| |
| }
| |
| | |
| div.srf-datatable-wrapper .dataTables_filter input {
| |
| margin-left: 0.5rem;
| |
| display: inline-block;
| |
| width: auto;
| |
| padding: 0.375rem 0.75rem;
| |
| font-size: 0.875rem;
| |
| line-height: 1.5;
| |
| color: #495057;
| |
| background-color: #fff;
| |
| background-clip: padding-box;
| |
| border: 1px solid #ced4da;
| |
| border-radius: 0.25rem;
| |
| }
| |
| | |
| /* =============================
| |
| Length Selector (dropdown)
| |
| ============================= */
| |
| div.srf-datatable-wrapper .dataTables_length {
| |
| float: left;
| |
| padding: 0.75rem;
| |
| }
| |
| | |
| div.srf-datatable-wrapper .dataTables_length label {
| |
| font-size: 0.875rem;
| |
| color: #495057;
| |
| }
| |
| | |
| div.srf-datatable-wrapper .dataTables_length select {
| |
| margin-left: 0.5rem;
| |
| display: inline-block;
| |
| width: auto;
| |
| padding: 0.375rem 0.75rem;
| |
| font-size: 0.875rem;
| |
| line-height: 1.5;
| |
| color: #495057;
| |
| background-color: #fff;
| |
| border: 1px solid #ced4da;
| |
| border-radius: 0.25rem;
| |
| }
| |
| | |
| /* =============================
| |
| Sorting Icons (Optional enhancement)
| |
| ============================= */
| |
| table.srf-datatable thead th.sorting:after,
| |
| table.srf-datatable thead th.sorting_asc:after,
| |
| table.srf-datatable thead th.sorting_desc:after {
| |
| content: "";
| |
| float: right;
| |
| margin-left: 0.5rem;
| |
| }
| |
| | |
| table.srf-datatable thead th.sorting:after {
| |
| content: "\f0dc";
| |
| font-family: "Font Awesome 5 Free";
| |
| font-weight: 900;
| |
| color: #6c757d;
| |
| }
| |
| | |
| table.srf-datatable thead th.sorting_asc:after {
| |
| content: "\f0de";
| |
| font-family: "Font Awesome 5 Free";
| |
| font-weight: 900;
| |
| color: #007bff;
| |
| }
| |
| | |
| table.srf-datatable thead th.sorting_desc:after {
| |
| content: "\f0dd";
| |
| font-family: "Font Awesome 5 Free";
| |
| font-weight: 900;
| |
| color: #007bff;
| |
| } | | } |
.dt-container:not(.dts) {
border-radius: 0.75rem !important;
}
.cc-card-body--table .dt-container {
border: none !important;
}
.cc-card-body--table .dt-container {
font-size: 0.835rem !important;
font-weight: 500 !important;
color: #555 !important;
letter-spacing: 0.01em !important;
}
.dt-container input.dt-input,select.dt-input,button.dtsp-showAll,button.dtsp-collapseAll {
border-radius: 0.5rem !important;
}
.dt-container button.dtsp-showAll,button.dtsp-collapseAll {
margin-left: 0.5rem !important;
}
dataTable.display > tbody > tr > .sorting_1 {
background-color: #f8f8f8 !important;
}
.dataTable.display > tbody > tr:nth-child(odd) > * {
background-color: #f5f5f3 !important;
}
.dtsp-emptyMessage {
display: none !important;
}