MediaWiki:Common.css: Difference between revisions

Revision as of 01:40, 25 June 2025

/* MediaWiki:Common.css */

/* Tabelle mit ID 'example' */
#example {
  border: 2px solid #0077cc;
  border-collapse: collapse;
}

#example td,
#example th {
  border: 1px solid #ccc;
  padding: 8px;
}

#example tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}
#example td {
  font-family: "Georgia", serif;
  font-size: 0.7em;
}

/* Alle Tabellen mit Klasse 'display' (DataTables-Standardklasse) */
table.display {
  font-size: 1.5em;
  width: 100%;
  border-collapse: collapse;
}

/* Tabellenköpfe */
table.display th {
  background-color: #e0e0e0;
  color: #333;
  padding: 10px;
}

/* Tabellenzellen */
table.display td {
  padding: 18px;
  border-bottom: 11px solid #ddd;
}

/* Hover-Effekt für Zeilen */
table.display tbody tr:hover {
  background-color: #fcffcc;
}


/* ============================
   DataTables Custom Styling
   Ziel: Optisch ansprechendes Design für Tabelle mit ID #stylingtext
   ============================ */

/* --- Grundlegende Tabellenstruktur --- */
#stylingtext {
    width: 100%; /* Tabelle nimmt gesamte Breite des Containers ein */
    border-collapse: collapse; /* Entfernt doppelte Rahmen zwischen Zellen */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Moderner, gut lesbarer Font */
    font-size: 14px;
    background-color: #ffffff; /* Heller Hintergrund für bessere Lesbarkeit */
}

/* --- Tabellenkopf (thead) --- */
#stylingtext thead {
    background-color: #005288; /* Dunkelblauer Hintergrund für den Header */
    color: white; /* Weißer Text für guten Kontrast */
    text-align: left;
}

#stylingtext thead th {
    padding: 12px 8px; /* Innenabstand oben/unten und rechts/links */
    border-bottom: 2px solid #ccc; /* Dezente Trennlinie unter dem Header */
}

/* --- Tabellenkörper (tbody) --- */
#stylingtext tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Abwechselnde Zeilenfarbe (Zebra-Streifen) */
}

#stylingtext tbody tr:hover {
    background-color: #e0f0ff; /* Hover-Effekt bei Mouseover */
}

#stylingtext td {
    padding: 10px 8px;
    border-bottom: 1px solid #ddd; /* Trennung der Zeilen */
}

/* --- Suchfeld und Buttons (DataTables UI) --- */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
}

/* --- Paginierung unten rechts --- */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
    text-align: right;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #005288;
    color: white;
    border-color: #005288;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #005288;
    color: white !important;
    border-color: #005288;
}

/* --- Info unten links (z.B. "Zeige 1 bis 10 von 20 Einträgen") --- */
.dataTables_wrapper .dataTables_info {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

/* --- Responsives Verhalten (wenn DataTables responsive Extension aktiv ist) --- */
@media screen and (max-width: 768px) {
    #stylingtext thead {
        display: none; /* Header ausblenden auf kleinen Bildschirmen */
    }

    #stylingtext td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* Platz für Label */
    }

}