By default, the sort arrows on sortable tables are black for Hydra wikis, and white for HydraDark wikis. If you use a dark background color for table headers on Hydra, or a light one on HydraDark wikis, the sort arrows can be difficult to see. Use the following code to switch arrow colors.
Switch to white arrows[]
/* White sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792) !important;
}
table.jquery-tablesorter th.headerSortUp {
background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9) !important;
}
table.jquery-tablesorter th.headerSortDown {
background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d) !important;
}
Switch to black arrows[]
/* Black sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%209%22%20height%3D%229%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%205l-4%204-4-4zM14.5%204l-4-4-4%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
table.jquery-tablesorter th.headerSortUp {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6.5%204l4-4%204%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
table.jquery-tablesorter th.headerSortDown {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%200l-4%204-4-4z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
Table headers with backgrounds or gradients[]
If your table headers are styled with background images or colour gradients, the same selectors should include that styling. For example (this example uses white arrows):
.skin-hydradark table.jquery-tablesorter th.headerSort {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}
.skin-hydradark table.jquery-tablesorter th.headerSortUp {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}
.skin-hydradark table.jquery-tablesorter th.headerSortDown {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}