MediaWiki:Common.css

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.

/* MediaWiki:Common.css */

/*Styling for CharacterInsert toolbar*/
#mw-edittools-charinsert {
	margin: 10px 0;
	padding: 5px;
	background: #f8f9fa;
	border: 1px solid #ccc;
	box-shadow: 0 2px 1px 0 rgba(0,0,0,0.1);
}

#mw-edittools-charinsert input, #mw-edittools-charinsert select {
	margin: 2px;
	padding: 4px 8px;
	border: 1px solid #a2a9b1;
	font-size: 0.7em;
	color: #54595d;
}


/* 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: 1em;
  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;
}
/* ================================
   Custom CSS for #styling-test table
   MediaWiki with Vector 2022 skin
   ================================ */

/* --- Base table styling --- */
#styling-test {
    width: 100%;                /* Make table span full container width */
    border-collapse: collapse;  /* Remove space between borders */
    background-color: #ffffff;  /* Background color for the table */
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 1em;
}

/* --- Table headers --- */
#styling-test thead th {
    background-color: #f8f9fa;  /* Light gray background */
    color: #202122;             /* Dark text for contrast */
    padding: 10px;
    border: 1px solid #a2a9b1;
    text-align: left;
    font-weight: bold;
}

/* --- Table body cells --- */
#styling-test tbody td {
    padding: 8px;
    border: 1px solid #ddd;     /* Light border */
    vertical-align: top;
}

/* --- Row hover effect --- */
#styling-test tbody tr:hover {
    background-color: #eef6ff;  /* Light blue highlight */
}

/* --- Alternating row colors (zebra striping) --- */
#styling-test tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

/* --- Sorting indicators (DataTables) --- */
#styling-test thead th.sorting,
#styling-test thead th.sorting_asc,
#styling-test thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 25px;
}

#styling-test thead th.sorting::after,
#styling-test thead th.sorting_asc::after,
#styling-test thead th.sorting_desc::after {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -6px;
    content: "";
    border: 6px solid transparent;
}

/* Ascending arrow */
#styling-test thead th.sorting_asc::after {
    border-bottom-color: #000;
}

/* Descending arrow */
#styling-test thead th.sorting_desc::after {
    border-top-color: #000;
}

/* --- Pagination, info, and filter (DataTables UI) --- */
.dataTables_wrapper {
    font-size: 14px;
    margin-top: 10px;
}

/* Pagination controls */
.dataTables_wrapper .dataTables_paginate {
    text-align: right;
    margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate a {
    margin: 0 3px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    color: #202122;
    background-color: #f8f9fa;
}

.dataTables_wrapper .dataTables_paginate a.current {
    background-color: #36c;
    color: white;
    border-color: #36c;
}

/* Filter box (search) */
.dataTables_wrapper .dataTables_filter input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Length menu (show X entries) */
.dataTables_wrapper .dataTables_length select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Info text (Showing X to Y of Z entries) */
.dataTables_wrapper .dataTables_info {
    margin-top: 10px;
    color: #555;
}