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 global styling
   Applies to all format=datatables outputs
   wiki-wide, regardless of context.

   Add this to MediaWiki:Common.css
   ========================================= */

/* ----- Container ----- */
.datatables-container {
  font-size: 0.875rem;
  color: #1a1a1a;
}

/* ----- Controls (length + search) ----- */
.dt-length,
.dt-search {
  font-size: 0.82rem;
  color: #555;
  padding: 0.5rem 0 0.25rem;
}

.dt-input {
  border: 1px solid #e8e5e1;
  border-radius: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  color: #1a1a1a;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease;
}

.dt-input:focus {
  border-color: #aaa;
}

/* ----- Table base ----- */
.srf-datatable {
  border-collapse: collapse !important;
  border: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ----- Header ----- */
.srf-datatable thead th {
  background: #faf9f7 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #555 !important;
  border-bottom: 2px solid #e8e5e1 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0.5rem 0.75rem !important;
  white-space: nowrap;
}

/* ----- Sort icons ----- */
.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.7;
}

/* ----- 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 ----- */
.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 ----- */
.dt-info {
  font-size: 0.78rem;
  color: #999;
  padding-top: 0.5rem;
}

/* ----- Pagination ----- */
.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: #aaa !important;
  color: #1a1a1a !important;
}

.dt-paging-button.current {
  background: #faf9f7 !important;
  border-color: #aaa !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

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

/* ----- Spinner ----- */
.datatables-spinner {
  display: none !important;
}

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