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 153:
 
/* ======================================================= */
/* 2. MOBILE STICKY HEADER (Minerva Skin) - REVISED */
/* ======================================================= */
 
/* We1. applyMake 'position:the header sticky' ONLYby whendefault the search overlay is CLOSED.*/
body:not(.mw-mf-search-mode) .header-container.header-chrome {▼
The ':not(.mw-mf-search-mode)' part is the magic switch.
position: -webkit-sticky !important;▼
*/
position: relativesticky !important;▼
▲body:not(.mw-mf-search-mode) .header-container.header-chrome {
▲ position: -webkit-sticky;
position: sticky;
top: 0;
/* Zz-Indexindex: 99; is/* sufficientKeep forthis readingreasonably modelow */
zbackground-indexcolor: 99#fff;
background-color: #ffffff;▼
border-bottom: 1px solid #eaecf0;
width: 100%;
}
 
/* 2. CRITICAL FIX: When search is ACTIVE, reset sticky positioning */
/* Safeguard: Ensure the search box sits on top of the white header background▼
/* This prevents the search overlay from getting "trapped" or clipped */
so text doesn't get buried behind it.
*/
body:not(.mw-mf-search-mode) .minerva-header .search-box {▼
position: relative;▼
z-index: 100; ▼
}▼
 
/* ======================================================= */
/* FIX: MOBILE SEARCH INPUT VISIBILITY (THE NUCLEAR FIX) */▼
/* ======================================================= */
 
/* 1. When search is active, ensure header background is white and on top */
body.mw-mf-search-mode .header-container.header-chrome {
background-colorposition: #ffffffrelative !important;
z-index: 1000 !important;
}
 
▲/* FIX: MOBILE3. SEARCH INPUTBOX VISIBILITY (THE NUCLEAR FIX) */
/* 2. Target ALL inputs inside the search box during search mode
▲/* Safeguard: EnsureForce the search boxcontainer sitsto onsit top ofabove the white header background */
We use [type="search"] to target the REAL input, not the "trigger"
▲body:not(.mw-mf-search-mode) .minerva-header .search-box {
*/
▲ z-index: 100;1001 !important;
body.mw-mf-search-mode .minerva-header .search-box input[type="search"] {▼
▲ position: relative !important;
▲}
 
/* 4. INPUT TEXT COLOR FIX (The "Invisible Text" Fix) */
/* Target every possible state of the search input to force black text */
.minerva-header .search-box input,
.minerva-header .search-box input.search,
▲body.mw-mf-search-mode .minerva-header .search-box input[type="search"] {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important; /* ForceForces iOS blackto paint text black */▼
opacity: 1 !important;▼
z-index: 10011002 !important;▼
▲ background-color: #ffffff !important;
text-shadow: none !important;
▲ -webkit-text-fill-color: #000000 !important; /* Force iOS black text */
▲ opacity: 1 !important;
background: #ffffff !important;
▲ z-index: 1001 !important;
▲ position: relative !important;
box-shadow: none !important;
}
 
/* 35. Ensure the placeholderPlaceholder text is also visiblevisibility */
body.mw-mf-search-mode .minerva-header .search-box input[type="search"]::placeholder {
color: #72777d !important;
-webkit-text-fill-color: #72777d !important;▼
opacity: 1 !important;
▲ -webkit-text-fill-color: #72777d !important;
}
 
/* 4. Force the Form container to be visible and have height */
body.mw-mf-search-mode .search-box form {
display: block !important;
visibility: visible !important;
height: auto !important;
margin: 0 !important;
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"