MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 44: | Line 44: | ||
table.display tbody tr:hover { | table.display tbody tr:hover { | ||
background-color: #fcffcc; | 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; | |||
} | } | ||