Main Page

Difference between revisions of "User:SynthSy/tweeki-white-theme.css"

From Arks-Visiphone
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 :( */