Insurer Brain

MediaWiki:Mobile.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 129:
 
/* ======================================================= */
/* HIDE1. "VIEWMOBILE EDITSTICKY HISTORY"HEADER (StrictMinerva ModeSkin) */
/* ======================================================= */
 
/* Apply sticky ONLY when search is CLOSED.
/* Target the wrapper link */
We use :not(.mw-mf-search-mode) to disable sticky positioning
body a.last-modified-bar {
the moment you click search. This prevents the "white screen"
display: none !important;▼
and "invisible text" bugs by letting the native full-screen
}▼
search work exactly as designed. */
 
body:not(.mw-mf-search-mode) .header-container.header-chrome {▼
/* Target the content inside it */
position: -webkit-sticky; /* Safari */▼
body .last-modified-bar__content {
display: none !important;▼
}
 
/* Target the text specifically */
body .last-modified-bar__text {
display: none !important;
}
 
/* ======================================================= */▼
/* FLOATING (STICKY) HEADER (Minerva Skin - Mobile & Desktop) */
/* ======================================================= */▼
 
/* 1. Apply Sticky Positioning */
.header-container.header-chrome {
▲ position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
/* Z-Index: 999 sits above images/text, but below your
999custom isTOC highoverlay enough(which to float overis articles,1001) */
but lower than your TOC (1001) and the native Search Overlay */
z-index: 999;
 
/* Background must be white to cover scrolling text */
/* Visuals:
White background prevents text from showing through when scrolling.
Border provides a clean separation from the content. */
background-color: #fff;
border-bottom: 1px solid #eaecf0;
Line 170 ⟶ 152:
}
 
/* 2.FIX: FixForce Search OverlayInput CompatibilityText */Color
Just in case, we force the text to be black so it is never invisible. */
/* When you click search, Minerva adds 'mw-mf-search-mode' to the body.
.minerva-header .search-box .search {
We must ensure the header behaves correctly during this native animation. */
▲ displaycolor: none#000 !important;
▲ displayopacity: none1 !important;
▲}
 
▲/* ======================================================= */
▲body.mw-mf-search-mode .header-container.header-chrome {
/* 2. DESKTOP STICKY HEADER (Vector 2022 Skin) */
/* When search is active, we let Minerva take control of the border
▲/* ======================================================= */
and positioning to prevent visual glitches */
 
border-bottom: none;
/* This targets the main top bar in Vector 2022 */
▲.vector-header-container.header-chrome {
position: -webkit-sticky;
position: sticky;
top: 0;
/* Z-Index: 100 ensures it stays above the article content
but doesn't block higher priority modals */
z-index: 100;
/* Ensure background is solid white */
background-color: #ffffff;
/* Add a subtle shadow so you can see where the header ends */
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"