Template:Sticky header/styles.css
/* {{pp-template}} */
@media screen {
.sticky {
position: sticky;
top: 0;
}
body.vector-sticky-header-visible .sticky {
top: 3.125rem;
}
.sticky-header > thead {
position: sticky;
top: 0;
z-index: 10;
}
body.vector-sticky-header-visible .sticky-header > thead {
top: 3.125rem;
}
/**
* Fix scroll transparency on thead's cell background.
*/
.sticky-header {
background-color: white;
}
.sticky-header thead,
.sticky-header tbody,
.sticky-header tfoot,
.sticky-header tr,
.sticky-header td,
.sticky-header:not(.wikitable) th {
background-color: inherit;
}
/**
* Fix scroll transparency on thead's cell spacing.
*/
.sticky-header:not(.wikitable) {
border-collapse: collapse;
}
/**
* Fix missing borders due to position sticky and "wikitable" collapsed
* borders.
*/
.sticky-header.wikitable {
border-collapse: separate;
border-color: #a2a9b1; /* Set so same on mobile version (#54595d). */
border-spacing: 0;
border-width: 0 1px 1px 0;
}
.sticky-header.wikitable td,
.sticky-header.wikitable th,
.sticky-header.static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
border-color: #a2a9b1; /* Set so same on mobile version (#eaecf0). */
border-width: 1px 0 0 1px !important;
}
.sticky-header.static-row-numbers.wikitable thead tr::before,
.sticky-header.static-row-numbers.wikitable .static-row-header::before {
border-left: 1px solid #a2a9b1;
}
.sticky-header.static-row-numbers.wikitable thead tr:first-child::before,
.sticky-header.static-row-numbers.wikitable .sortbottom::before, /* Sortbotton #1: all. When supported, consolidate #1-2 to tr:nth-child(1 of .sortbottom)::before */
.sticky-header.static-row-numbers.wikitable:not(.sortable) tr:first-child::before {
border-top: 1px solid #a2a9b1;
}
.sticky-header.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before { /* Sortbottom #2: all minus 1st. */
border-top: 0;
}
}
/**
* Reset Wikipedia styles causing sticky and float issues on mobile.
* Note: Fixes mobile version on Windows desktop, but not Android portrait mode.
*/
@media all and (max-width: 720px) {
.sticky-header {
display: table; /* Was "block" */
}
.sticky-header caption {
display: table-caption; /* Was "block" */
}
}