MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary Tag: Reverted |
||
Line 44: | Line 44: | ||
table.display tbody tr:hover { | table.display tbody tr:hover { | ||
background-color: #fcffcc; | 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 */ | |||
} | |||
} | } |
Revision as of 02: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 */ } }