@import "mediawiki.mixins";
-/* Table Sorting */
+// Table Sorting
-table.jquery-tablesorter th.headerSort {
+.client-js table.jquery-tablesorter th.headerSort {
.background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
cursor: pointer;
+ // Keep synchronized with mediawiki.skinning.content styles
background-repeat: no-repeat;
background-position: center right;
padding-right: 21px;
}
-table.jquery-tablesorter th.headerSortUp {
+.client-js table.jquery-tablesorter th.headerSortUp {
.background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
}
-table.jquery-tablesorter th.headerSortDown {
+.client-js table.jquery-tablesorter th.headerSortDown {
.background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
}
div.tleft {
margin: .5em 1.4em 1.3em 0;
}
+
+/* Make space for the jquery.tablesorter icon and display a placeholder if JavaScript is loaded, while
+ tablesorter is still loading and setting up the tables for sorting. This avoids a flash of
+ unstyled content during page load (FOUC). The styles can also be used by WYSIWYG editors. */
+.client-js table.sortable th:not(.unsortable) {
+ background-image: url(images/sort_both_readonly.png);
+ /* @embed */
+ background-image: linear-gradient(transparent, transparent), url(images/sort_both_readonly.svg);
+ /* Keep synchronised with jquery.tablesorter styles */
+ background-repeat: no-repeat;
+ background-position: center right;
+ padding-right: 21px;
+}
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 9" height="9" width="21">
+ <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z" style="fill-opacity: 0.5;"/>
+</svg>