Main Page
Difference between revisions of "User:SynthSy/tweeki-white-theme.css"
Jump to navigation
Jump to search
(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | /* sortable tables and JS enhanced wikitables with thead, works with Safari. This is ideal. */ | ||
+ | /* But borders are broken: https://bugs.webkit.org/show_bug.cgi?id=128486 */ | ||
+ | .jquery-tablesorter > thead, | ||
+ | .jquery-tablesorter > tfoot, | ||
+ | .mw-sticky-header > thead, | ||
+ | .mw-sticky-header > tfoot { | ||
+ | position: -webkit-sticky; | ||
+ | } | ||
+ | /* Firefox and Chrome don't support sticky on a thead, and firefox's sticky support seems completely broken */ | ||
+ | /* This looks horrible on multi row headers or footers.... Please fix this browser manufacturer's */ | ||
+ | /* https://bugzilla.mozilla.org/show_bug.cgi?id=975644 */ | ||
+ | /* https://bugs.chromium.org/p/chromium/issues/detail?id=702927 */ | ||
+ | .jquery-tablesorter > thead > tr > th, | ||
+ | .jquery-tablesorter > tfoot > tr > th, | ||
+ | .mw-sticky-header > thead > tr > th, | ||
+ | .mw-sticky-header > tfoot > tr > th { | ||
+ | position: sticky; | ||
+ | } | ||
+ | /* wikitables don't have thead's, we need to guess which th's are part of the header in all browsers. | ||
+ | * This is in for backwards compatibility if JS enhanced wikitables (.mw-stick-header) isn't on */ | ||
+ | .wikitable:not(.sortable) > tbody > tr:first-child > th, | ||
+ | .wikitable:not(.sortable) > tbody > tr:last-child > th { | ||
+ | position: -webkit-sticky; | ||
+ | position: sticky; | ||
+ | } | ||
+ | .jquery-tablesorter > thead, | ||
+ | .mw-sticky-header > thead { | ||
+ | top: 0; | ||
+ | } | ||
+ | /* Take into account the border of the table and the th elements | ||
+ | * (both 1px, then collapsed, but chrome makes that 2px uncollapsed ?) */ | ||
+ | .jquery-tablesorter > thead > tr > th, | ||
+ | .mw-sticky-header > thead > tr > th, | ||
+ | .wikitable:not(.sortable) > tbody > tr:first-child > th { | ||
+ | top: -2px | ||
+ | } | ||
+ | .jquery-tablesorter > tfoot, | ||
+ | .jquery-tablesorter > tfoot > tr > th, | ||
+ | .mw-sticky-header > tfoot, | ||
+ | .mw-sticky-header > tfoot > tr > th, | ||
+ | .wikitable:not(.sortable) > tbody > tr:last-child > th { | ||
+ | bottom: 0; | ||
+ | } | ||
+ | /* On mobile, where we have tables in overflowable boxes to avoid viewport overflows, | ||
+ | * by using display:block, sticky never works though :( */ |
Revision as of 13:52, 25 December 2017
/* sortable tables and JS enhanced wikitables with thead, works with Safari. This is ideal. */ /* But borders are broken: https://bugs.webkit.org/show_bug.cgi?id=128486 */ .jquery-tablesorter > thead, .jquery-tablesorter > tfoot, .mw-sticky-header > thead, .mw-sticky-header > tfoot { position: -webkit-sticky; } /* Firefox and Chrome don't support sticky on a thead, and firefox's sticky support seems completely broken */ /* This looks horrible on multi row headers or footers.... Please fix this browser manufacturer's */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=975644 */ /* https://bugs.chromium.org/p/chromium/issues/detail?id=702927 */ .jquery-tablesorter > thead > tr > th, .jquery-tablesorter > tfoot > tr > th, .mw-sticky-header > thead > tr > th, .mw-sticky-header > tfoot > tr > th { position: sticky; } /* wikitables don't have thead's, we need to guess which th's are part of the header in all browsers. * This is in for backwards compatibility if JS enhanced wikitables (.mw-stick-header) isn't on */ .wikitable:not(.sortable) > tbody > tr:first-child > th, .wikitable:not(.sortable) > tbody > tr:last-child > th { position: -webkit-sticky; position: sticky; } .jquery-tablesorter > thead, .mw-sticky-header > thead { top: 0; } /* Take into account the border of the table and the th elements * (both 1px, then collapsed, but chrome makes that 2px uncollapsed ?) */ .jquery-tablesorter > thead > tr > th, .mw-sticky-header > thead > tr > th, .wikitable:not(.sortable) > tbody > tr:first-child > th { top: -2px } .jquery-tablesorter > tfoot, .jquery-tablesorter > tfoot > tr > th, .mw-sticky-header > tfoot, .mw-sticky-header > tfoot > tr > th, .wikitable:not(.sortable) > tbody > tr:last-child > th { bottom: 0; } /* On mobile, where we have tables in overflowable boxes to avoid viewport overflows, * by using display:block, sticky never works though :( */