|
|
| (20 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* =========================================
| | .dt-container:not(.dts) { |
| SMW Datatables styling — cc-* integration
| | border-radius: 0.75rem !important; |
| Targets auto-generated SRF/DataTables classes
| |
| ========================================= */
| |
| | |
| /* Container */
| |
| .datatables-container { | |
| font-size: 0.875rem;
| |
| color: #1a1a1a;
| |
| }
| |
| | |
| /* Search and length controls */
| |
| .dt-length,
| |
| .dt-search { | |
| font-size: 0.82rem;
| |
| color: #555;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
| | |
| .dt-input {
| |
| border: 1px solid #e8e5e1;
| |
| border-radius: 0.375rem;
| |
| padding: 0.25rem 0.5rem;
| |
| font-size: 0.82rem;
| |
| color: #1a1a1a;
| |
| background: #ffffff;
| |
| outline: none;
| |
| transition: border-color 0.15s ease;
| |
| }
| |
| | |
| .dt-input:focus {
| |
| border-color: #2c5f8a;
| |
| } | | } |
|
| |
|
| /* Table base */
| | .cc-card-body--table .dt-container { |
| .srf-datatable { | | border: none !important; |
| border-collapse: collapse !important;
| |
| border: none !important;
| |
| width: 100% !important;
| |
| } | | } |
|
| |
|
| /* Header */
| | .cc-card-body--table .dt-container { |
| .srf-datatable thead th { | | font-size: 0.835rem !important; |
| background: #faf9f7 !important; | |
| font-weight: 500 !important; | | font-weight: 500 !important; |
| font-size: 0.82rem !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.03em !important;
| |
| color: #555 !important;
| |
| border-bottom: 2px solid #e8e5e1 !important;
| |
| border-top: none !important;
| |
| padding: 0.5rem 0.75rem !important;
| |
| }
| |
|
| |
| /* Sort icons — tone them down */
| |
| .srf-datatable thead th .dt-column-order::before,
| |
| .srf-datatable thead th .dt-column-order::after {
| |
| opacity: 0.3;
| |
| }
| |
|
| |
| .srf-datatable thead th.dt-ordering-asc .dt-column-order::before,
| |
| .srf-datatable thead th.dt-ordering-desc .dt-column-order::after {
| |
| opacity: 0.8;
| |
| color: #2c5f8a;
| |
| }
| |
|
| |
| /* Rows */
| |
| .srf-datatable tbody tr {
| |
| border-bottom: 1px solid #f0eeeb !important;
| |
| transition: background 0.15s ease;
| |
| }
| |
|
| |
| .srf-datatable tbody tr:last-child {
| |
| border-bottom: none !important;
| |
| }
| |
|
| |
| .srf-datatable tbody tr:hover {
| |
| background: #faf9f7 !important;
| |
| }
| |
|
| |
| .srf-datatable tbody td {
| |
| font-size: 0.875rem !important;
| |
| color: #1a1a1a !important;
| |
| border: none !important;
| |
| padding: 0.5rem 0.75rem !important;
| |
| vertical-align: middle;
| |
| }
| |
|
| |
| /* Links inside table */
| |
| .srf-datatable tbody td a {
| |
| color: #2c5f8a;
| |
| text-decoration: none;
| |
| border-bottom: 1px solid transparent;
| |
| transition: border-color 0.15s ease, color 0.15s ease;
| |
| }
| |
|
| |
| .srf-datatable tbody td a:hover {
| |
| color: #1a4266;
| |
| border-bottom-color: #2c5f8a;
| |
| }
| |
|
| |
| /* Footer info and pagination */
| |
| .dt-info {
| |
| font-size: 0.78rem;
| |
| color: #999;
| |
| padding-top: 0.5rem;
| |
| }
| |
|
| |
| .dt-paging {
| |
| padding-top: 0.375rem;
| |
| }
| |
|
| |
| .dt-paging-button {
| |
| border: 1px solid #e8e5e1 !important;
| |
| border-radius: 0.375rem !important;
| |
| background: #ffffff !important;
| |
| color: #555 !important; | | color: #555 !important; |
| font-size: 0.78rem !important; | | letter-spacing: 0.01em !important; |
| padding: 0.2rem 0.6rem !important;
| |
| margin: 0 0.1rem !important;
| |
| cursor: pointer;
| |
| transition: background 0.15s ease, border-color 0.15s ease;
| |
| } | | } |
|
| |
|
| .dt-paging-button:hover:not(.disabled) { | | .dt-container input.dt-input,select.dt-input,button.dtsp-showAll,button.dtsp-collapseAll { |
| background: #faf9f7 !important;
| | border-radius: 0.5rem !important; |
| border-color: #2c5f8a !important;
| |
| color: #2c5f8a !important;
| |
| } | | } |
|
| |
|
| .dt-paging-button.current { | | .dt-container button.dtsp-showAll,button.dtsp-collapseAll { |
| background: #2c5f8a !important;
| | margin-left: 0.5rem !important; |
| border-color: #2c5f8a !important;
| |
| color: #ffffff !important;
| |
| } | | } |
|
| |
|
| .dt-paging-button.disabled { | | dataTable.display > tbody > tr > .sorting_1 { |
| opacity: 0.4 !important;
| | background-color: #f8f8f8 !important; |
| cursor: default !important;
| |
| } | | } |
|
| |
|
| /* Processing spinner — hide the default ugly one */
| | .dataTable.display > tbody > tr:nth-child(odd) > * { |
| .datatables-spinner { | | background-color: #f5f5f3 !important; |
| display: none !important;
| |
| } | | } |
|
| |
|
| /* Responsive expand control (dtr-control) */
| | .dtsp-emptyMessage { |
| .srf-datatable tbody td.dtr-control::before { | | display: none !important; |
| border-color: #2c5f8a !important;
| |
| background: #2c5f8a !important;
| |
| } | | } |
.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;
}