MediaWiki:CustomDatatable.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* =========================================
   SMW Datatables styling — cc-* integration
   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 */
.srf-datatable {
  border-collapse: collapse !important;
  border: none !important;
  width: 100% !important;
}

/* Header */
.srf-datatable thead th {
  background: #faf9f7 !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;
  font-size: 0.78rem !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) {
  background: #faf9f7 !important;
  border-color: #2c5f8a !important;
  color: #2c5f8a !important;
}

.dt-paging-button.current {
  background: #2c5f8a !important;
  border-color: #2c5f8a !important;
  color: #ffffff !important;
}

.dt-paging-button.disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

/* Processing spinner — hide the default ugly one */
.datatables-spinner {
  display: none !important;
}

/* Responsive expand control (dtr-control) */
.srf-datatable tbody td.dtr-control::before {
  border-color: #2c5f8a !important;
  background: #2c5f8a !important;
}