mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-05 03:08:52 +00:00
53742a0dd2
This is needed to get rid of the negative margin sticky header background hack. Since it looks weird on wikis with background imgae.
137 lines
2.8 KiB
Plaintext
137 lines
2.8 KiB
Plaintext
#citizen-page-header-sticky-sentinel {
|
|
grid-area: afterHeader; // align right above content
|
|
height: 1px;
|
|
margin-top: -1px;
|
|
visibility: hidden;
|
|
contain: strict;
|
|
}
|
|
|
|
#citizen-page-header-sticky-placeholder {
|
|
grid-area: afterHeader;
|
|
}
|
|
|
|
.ve-activated,
|
|
.action-edit {
|
|
// HACK: So sticky header will never trigger in edit action
|
|
#citizen-page-header-sticky-sentinel {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.citizen-page-header {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: @z-index-bottom;
|
|
height: 100%;
|
|
content: '';
|
|
background-color: var( --color-surface-0 );
|
|
filter: opacity( 0.9 );
|
|
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
|
|
backdrop-filter: saturate( 50% ) blur( 16px );
|
|
opacity: 0;
|
|
transition: var( --transition-hover );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
|
|
.citizen-page-header--sticky {
|
|
.citizen-page-header {
|
|
top: 0;
|
|
z-index: @z-index-stacking-3;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
// So that it won't change the height of the header
|
|
box-shadow: 0 0 0 1px var( --border-color-base );
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mw-indicators {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.citizen-page-heading {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.firstHeading {
|
|
overflow: hidden;
|
|
font-size: var( --font-size-large );
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.citizen-jumptotop {
|
|
position: absolute;
|
|
inset: 0 0 0 0;
|
|
margin: ~'calc( var( --space-xs ) * -1 )';
|
|
border-radius: var( --border-radius-base );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
}
|
|
}
|
|
|
|
// Collapse page tools label in sticky header
|
|
.page-actions > .mw-portlet li > a {
|
|
gap: 0;
|
|
font-size: 0;
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-padding-top: ~'calc( var( --height-sticky-header ) + var( --space-xl ) )';
|
|
}
|
|
|
|
/*
|
|
* T289817 `.mw-sticky-header-element` provides an API for template developers
|
|
* to make their templates compatible with the Citizen sticky header.
|
|
*/
|
|
.mw-sticky-header-element {
|
|
top: var( --height-sticky-header ) !important;
|
|
}
|
|
|
|
// Hide sticky header on scroll down on smaller screens
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.citizen-page-header {
|
|
.citizen-page-header--sticky & {
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
|
|
.citizen-page-heading {
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-delay: var( --transition-delay-menu );
|
|
transition-property: opacity;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make sticky header more compact if there are less screen estate
|
|
@media ( max-height: 800px ) {
|
|
.citizen-page-header--sticky {
|
|
.citizen-page-header-inner {
|
|
padding-top: var( --space-sm );
|
|
padding-bottom: var( --space-sm );
|
|
}
|
|
|
|
.firstHeading,
|
|
.mw-page-title-parenthesis {
|
|
font-size: var( --font-size-medium );
|
|
}
|
|
}
|
|
}
|