/* Plus Datatable – Frontend-Styles. * * Konsumiert die Design-Tokens der Host-Seite (--color-neutral-*, --color-accent-*, * --font-*) und baut Zebra-Streifen + Dark-Mode genau wie die seiteneigene * .meisterschaft-table / .results-table: alle Hintergruende laufen ueber Tokens, * die unter [data-theme="dark"] auf umgeschaltet werden. * * WICHTIG: Das Plugin "make-tables-responsive" faerbt gerade Zeilen sonst mit * #ffffff !important (Dark-Mode-blind). Deshalb muss die Klasse "plusdt-table" in * dessen Ausschlussliste stehen (Einstellungen -> Make Tables Responsive -> * Exclude HTML classes). Sonst gewinnt dessen !important gegen diese Datei. * * Jeder var() hat einen Hex-Fallback fuer den Einsatz ohne diese Tokens. */ .plusdt-table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--color-neutral-200, #e2e8f0); border-radius: 0.75rem; } .plusdt-table { width: 100%; border-collapse: collapse; background: var(--color-neutral-50, #ffffff); color: var(--color-neutral-800, #1e293b); font-family: var(--font-body, inherit); font-size: 0.95rem; } .plusdt-table caption { caption-side: top; text-align: left; font-family: var(--font-headline, inherit); font-weight: 600; font-size: 1.15rem; color: var(--color-neutral-800, #1e293b); padding: 0.85rem 1rem; } .plusdt-table th, .plusdt-table td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-neutral-200, #e2e8f0); } .plusdt-table thead th { background: var(--color-neutral-100, #f1f5f9); color: var(--color-neutral-700, #334155); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } /* Zebra ueber Tokens (flippt im Dark Mode), wie .meisterschaft-table. * !important, weil make-tables-responsive gerade Zeilen sonst mit #ffffff !important * uebermalt (Dark-Mode-blind). So gewinnt unser flippendes Token auch ohne den * mtr-Ausschluss. */ .plusdt-table tbody tr:nth-child(even) { background: var(--color-neutral-100, #f1f5f9) !important; } .plusdt-table tbody tr:nth-child(odd) { background: var(--color-neutral-50, #ffffff) !important; } .plusdt-table tbody tr:hover, .plusdt-table tbody tr:nth-child(even):hover, .plusdt-table tbody tr:nth-child(odd):hover { background: var(--color-neutral-200, #e2e8f0) !important; } /* Falls mtr die Zellen in Span-Wrapper packt: deren Hintergrund neutralisieren, * damit der Zeilen-Hintergrund durchscheint. */ .plusdt-table .mtr-td-tag, .plusdt-table .mtr-th-tag { background: transparent !important; } .plusdt-table tbody tr:last-child td { border-bottom: 0; } /* Bewusste Trennzeile (alle Zellen leer) – dezente Akzentlinie. * !important, um die Zebra-!important-Regeln oben zu uebersteuern. */ .plusdt-table tbody tr.plusdt-row-empty, .plusdt-table tbody tr.plusdt-row-empty:nth-child(even), .plusdt-table tbody tr.plusdt-row-empty:nth-child(odd), [data-theme="dark"] .plusdt-table tbody tr.plusdt-row-empty, [data-theme="dark"] .plusdt-table tbody tr.plusdt-row-empty:nth-child(even), [data-theme="dark"] .plusdt-table tbody tr.plusdt-row-empty:nth-child(odd) { background: transparent !important; } .plusdt-table tbody tr.plusdt-row-empty td { padding: 0.3rem; border-bottom: 2px solid var(--color-accent-primary, #709932); } /* Expliziter Dark-Mode (analog .results-table / .meisterschaft-table), * damit Kontrast und Zebra im Dark Mode sauber sind – auch ohne flippende * Host-Tokens (Standalone-Fallback ueber die Hex-Werte). */ [data-theme="dark"] .plusdt-table-wrap { border-color: var(--color-neutral-200, #334155); } [data-theme="dark"] .plusdt-table { background: var(--color-neutral-100, #1e293b); color: var(--color-neutral-800, #f1f5f9); } [data-theme="dark"] .plusdt-table thead th { background: var(--color-neutral-200, #334155); color: var(--color-neutral-800, #f1f5f9); } [data-theme="dark"] .plusdt-table th, [data-theme="dark"] .plusdt-table td { border-bottom-color: var(--color-neutral-200, #334155); } [data-theme="dark"] .plusdt-table tbody tr:nth-child(even) { background: var(--color-neutral-50, #0f172a) !important; } [data-theme="dark"] .plusdt-table tbody tr:nth-child(odd) { background: var(--color-neutral-100, #1e293b) !important; } [data-theme="dark"] .plusdt-table tbody tr:hover, [data-theme="dark"] .plusdt-table tbody tr:nth-child(even):hover, [data-theme="dark"] .plusdt-table tbody tr:nth-child(odd):hover { background: var(--color-neutral-200, #334155) !important; } [data-theme="dark"] .plusdt-table caption { color: var(--color-neutral-800, #f1f5f9); }