MediaWiki:CustomDatatable.css

From The Seven Sages of Rome
Revision as of 10:25, 13 January 2026 by Noeth (talk | contribs)

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.
/* ============================================
   ShadCN-style CSS for MediaWiki DataTables
   Targets Semantic Result Formats structure
   ============================================ */

/* CSS Variables for easy theming */
:root {
  --dt-background: hsl(0 0% 100%);
  --dt-foreground: hsl(222.2 47.4% 11.2%);
  --dt-muted: hsl(210 40% 96.1%);
  --dt-muted-foreground: hsl(215.4 16.3% 46.9%);
  --dt-border: hsl(214.3 31.8% 91.4%);
  --dt-hover: hsl(210 40% 98%);
  --dt-selected: hsl(210 40% 96.1%);
  --dt-radius: 8px;
  --dt-radius-sm: 6px;
}

/* Base container styling */
.dt-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--dt-foreground);
  font-size: 14px;
  line-height: 1.5;
}

/* Layout adjustments */
.dt-layout-row {
  margin-bottom: 16px;
}

.dt-layout-cell {
  padding: 0;
}

/* ============================================
   Search Panes Styling
   ============================================ */

.dtsp-panesContainer {
  background: var(--dt-background);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 16px;
  margin-bottom: 16px;
}

.dtsp-titleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dt-border);
}

.dtsp-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dt-foreground);
  flex: 1;
}

.dtsp-clearAll,
.dtsp-showAll,
.dtsp-collapseAll {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  background: var(--dt-background);
  color: var(--dt-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dtsp-clearAll:hover:not(.dtsp-disabledButton),
.dtsp-showAll:hover,
.dtsp-collapseAll:hover:not(.dtsp-disabledButton) {
  background: var(--dt-muted);
  border-color: hsl(214.3 31.8% 85%);
}

.dtsp-disabledButton {
  opacity: 0.5;
  cursor: not-allowed;
}

.dtsp-searchPanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.dtsp-searchPane {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  background: var(--dt-background);
  overflow: hidden;
}

.dtsp-hidden {
  display: none;
}

.dtsp-topRow {
  padding: 12px;
  background: var(--dt-muted);
  border-bottom: 1px solid var(--dt-border);
}

.dtsp-searchCont {
  position: relative;
  margin-bottom: 8px;
}

.dtsp-paneInputButton {
  width: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  font-size: 14px;
  background: var(--dt-background);
  outline: none;
  transition: all 0.15s ease;
}

.dtsp-paneInputButton:focus {
  border-color: var(--dt-foreground);
  box-shadow: 0 0 0 2px hsl(222.2 47.4% 11.2% / 0.1);
}

.dtsp-searchButtonCont {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.dtsp-paneButton {
  padding: 4px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--dt-radius-sm);
  transition: background 0.15s ease;
}

.dtsp-paneButton:hover:not(.dtsp-disabledButton) {
  background: var(--dt-hover);
}

.dtsp-buttonGroup {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* ============================================
   Table Wrapper Styling
   ============================================ */

.dt-scroll {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  overflow: hidden;
  background: var(--dt-background);
}

/* Header styling */
.dt-scroll-head {
  background: var(--dt-muted);
}

.dt-scroll-headInner,
.dt-scroll-bodyInner {
  width: 100% !important;
}

/* ============================================
   Table Styling
   ============================================ */

table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0 !important;
}

/* Header cells */
table.dataTable thead th {
  padding: 12px 16px !important;
  font-weight: 500;
  text-align: left;
  font-size: 13px;
  color: var(--dt-muted-foreground);
  background: var(--dt-muted);
  border-bottom: 1px solid var(--dt-border);
  border-right: none;
  white-space: nowrap;
  position: relative;
}

table.dataTable thead th:first-child {
  border-left: none;
}

/* Sortable columns */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  cursor: pointer;
  padding-right: 30px !important;
}

/* Sort indicators */
table.dataTable thead th.dt-orderable-asc:after,
table.dataTable thead th.dt-orderable-desc:after,
table.dataTable thead th.dt-ordering-asc:after,
table.dataTable thead th.dt-ordering-desc:after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  font-size: 12px;
  content: "⇅";
}

table.dataTable thead th.dt-ordering-asc:after {
  content: "↑";
  opacity: 1;
}

table.dataTable thead th.dt-ordering-desc:after {
  content: "↓";
  opacity: 1;
}

/* Body rows */
table.dataTable tbody tr {
  border-bottom: 1px solid var(--dt-border);
  transition: background-color 0.15s ease;
}

table.dataTable tbody tr:hover {
  background: var(--dt-hover);
}

table.dataTable tbody tr:last-child {
  border-bottom: none;
}

table.dataTable tbody td {
  padding: 16px !important;
  vertical-align: middle;
  color: var(--dt-foreground);
  border-right: none;
}

/* Selected rows */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.dt-selected {
  background: var(--dt-selected);
}

table.dataTable tbody tr.selected:hover,
table.dataTable tbody tr.dt-selected:hover {
  background: var(--dt-muted);
}

/* Checkboxes */
table.dataTable input[type="checkbox"],
.dt-checkboxes-select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 1px solid var(--dt-border);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--dt-foreground);
}

/* ============================================
   Info and Pagination Controls
   ============================================ */

.dt-info {
  font-size: 14px;
  color: var(--dt-muted-foreground);
  padding: 12px 0;
}

.dt-length {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.dt-length label {
  color: var(--dt-muted-foreground);
  font-size: 14px;
}

.dt-length select {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  outline: none;
  background: var(--dt-background);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dt-length select:focus {
  border-color: var(--dt-foreground);
  box-shadow: 0 0 0 2px hsl(222.2 47.4% 11.2% / 0.1);
}

/* Search/Filter */
.dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.dt-search label {
  color: var(--dt-muted-foreground);
  font-size: 14px;
}

.dt-search input {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
  background: var(--dt-background);
}

.dt-search input:focus {
  border-color: var(--dt-foreground);
  box-shadow: 0 0 0 2px hsl(222.2 47.4% 11.2% / 0.1);
}

/* Pagination */
.dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}

.dt-paging button,
.dt-paging .dt-paging-button {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  background: var(--dt-background);
  color: var(--dt-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dt-paging button:hover:not(.disabled),
.dt-paging .dt-paging-button:hover:not(.disabled) {
  background: var(--dt-muted);
  border-color: hsl(214.3 31.8% 85%);
}

.dt-paging button.current,
.dt-paging .dt-paging-button.current {
  background: var(--dt-foreground);
  color: var(--dt-background);
  border-color: var(--dt-foreground);
}

.dt-paging button.disabled,
.dt-paging .dt-paging-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   Processing and Empty States
   ============================================ */

.dt-processing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--dt-background);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 16px 24px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  z-index: 100;
}

table.dataTable tbody td.dt-empty {
  text-align: center;
  padding: 48px 16px !important;
  color: var(--dt-muted-foreground);
  font-size: 14px;
}

/* ============================================
   Buttons and Actions
   ============================================ */

.dt-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.dt-button {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  padding: 8px 16px;
  font-size: 14px;
  background: var(--dt-background);
  color: var(--dt-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dt-button:hover {
  background: var(--dt-muted);
  border-color: hsl(214.3 31.8% 85%);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
  .dtsp-searchPanes {
    grid-template-columns: 1fr;
  }

  .dt-layout-row {
    flex-direction: column;
  }

  .dt-length,
  .dt-search,
  .dt-info,
  .dt-paging {
    justify-content: center;
  }

  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 12px 8px !important;
    font-size: 13px;
  }
}

/* ============================================
   Additional MediaWiki Overrides
   ============================================ */

/* Remove any default MediaWiki table styling */
.mw-parser-output table.dataTable {
  background: var(--dt-background) !important;
  border: none !important;
}

/* Fix any conflicting margins */
.dt-container table {
  margin: 0 !important;
}

/* Ensure proper box-sizing */
.dt-container *,
.dt-container *:before,
.dt-container *:after {
  box-sizing: border-box;
}
Retrieved from "https://db.seven-sages-of-rome.org/index.php?title=MediaWiki:CustomDatatable.css&oldid=14209"
This page was last edited on 13 January 2026, at 10:25.
Privacy policy
About The Seven Sages of Rome
Disclaimers