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:
 
/* ======================================================= */
/* 1. MOBILE STICKY HEADERFIX (Minerva Skin) */
/* ======================================================= */
 
/* ApplyA. stickySticky ONLYHeader (Only when searchNOT is CLOSED.searching) */
We use :not(.mw-mf-search-mode) to disable sticky positioning
the moment you click search. This prevents the "white screen"
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 {
position: -webkit-sticky;
position: sticky;
top: 0;
/* Z-Index: 999 sits above images/text, but below your
custom TOC overlay (which is 1001) */
z-index: 999;
/* Background must be white to cover scrolling text */
background-color: #fff;
border-bottom: 1px solid #eaecf0;
Line 152 ⟶ 143:
}
 
/* FIX: ForceB. Search Input Text ColorFix (Force Visible Text) */
/* This Just in case, we forceforces the text to be black and background white so ityou iscan neversee invisibleit. */
.minerva-header .search-box .search {
color: #000202122 !important; /* Dark grey/black text */
opacitybackground-color: 1#fff !important; /* White background */
opacity: 1 !important; /* Ensure it's not transparent */
text-shadow: none !important; /* Remove any text shadows */
-webkit-text-fill-color: #202122 !important; /* iOS fix */
}
 
/* C. Search Icon Displacement Fix */
/* This prevents the search box from stretching too wide and pushing the icon */
.minerva-header .search-box {
box-sizing: border-box !important;
position: stickyrelative !important;▼
/* Ensure there is room for the icon on the right */
padding-right: 0 !important;
}
 
/* Force the icon overlay to stay in the correct spot */
.minerva-header .search-box .search-box-icon-overlay {
right: 0 !important;
left: auto !important;
top: 0 !important;
bottom: 0 !important;
width: 44px !important; /* Standard touch target size */
height: 100% !important;
display: flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
z-index: 2 !important; /* Sit on top of the input */
pointer-events: none; /* Allow clicking "through" to the input if needed */
}
 
/* Adjust input padding so text doesn't go under the icon */
.minerva-header .search-box input.search {
padding-right: 40px !important;
box-sizing: border-box !important;
width: 100% !important;
}
 
 
/* ======================================================= */
/* 2. DESKTOP STICKY HEADERFIX (Vector 2022 Skin) */
/* ======================================================= */
 
/* Use FIXED instead of STICKY.
/* This targets the main top bar in Vector 2022 */
Sticky stops working if its parent container ends.
Fixed forces it to stay on screen forever. */
.vector-header-container {
position: -webkit-stickyfixed !important;
▲ position: sticky;
top: 0;
left: 0;
right: 0;
/* Z-Index: 100 ensures it stays above the article content
width: 100%;
but doesn't block higher priority modals */
z-index: 1001000;
background-color: #fffffffff;▼
/* 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);
}
 
/* PADDING COMPENSATION (Important!)
Since the header is now "fixed" (floating above everything),
it no longer takes up space in the page flow.
We must push the page content down so it isn't hidden behind the header. */
body.skin-vector-2022 {
padding-top: 60px; /* Adjust this number if the header covers your title */
}
 
/* Ensure the scrollable content container behaves correctly */
.mw-page-container {
margin-top: 10px;
}
Retrieved from "https://insurerbrain.mediawiki.site/wiki/MediaWiki:Mobile.css"