|
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
| /* ============================================
| |
| 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;
| |
| }
| |