New wiki

MediaWiki:Mobile.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 157:
 
/* We apply 'position: sticky' ONLY when the search overlay is CLOSED.
The ':not(.mw-mf-search-mode)' part is the magic switch.
- When reading: Header is sticky.
- When you click Search: This entire block is disabled.
The header reverts to normal, allowing the search bar to
expand, text to appear, and the icon to sit correctly
using the default skin settings.
*/
body:not(.mw-mf-search-mode) .header-container.header-chrome {
Line 169 ⟶ 163:
position: sticky;
top: 0;
/* Z-Index 99 is sufficient. Toofor highreading (like 999) caused the previous bugs.mode */
z-index: 99;
background-color: #ffffff;
Line 176 ⟶ 170:
}
 
/* Safeguard: Ensure the search box sits on top of the white header background
so text doesn't get buried behind it.
*/
body:not(.mw-mf-search-mode) .minerva-header .search-box {
Line 185 ⟶ 179:
 
/* ======================================================= */
/* FIX: MOBILE SEARCH INPUT VISIBILITY (THE NUCLEAR FIX) */
/* ======================================================= */
 
/* 1. ForceWhen thesearch Headeris toactive, stayensure onheader topbackground whenis Searchwhite Modeand ison activetop */
body.mw-mf-search-mode .header-container.header-chrome {
background-color: #fffffffff !important;▼
z-index: 1000 !important;
▲ background-color: #fff !important;
}
 
/* 2. ForceTarget theALL REALinputs search input (notinside the trigger)search tobox beduring visible and blacksearch */mode
We use [type="search"] to target the REAL input, not the "trigger"
body.mw-mf-search-mode .minerva-header .search-box input.search {▼
*/
z-index: 1001 !important; /* Sit on top of the header */▼
▲body.mw-mf-search-mode .minerva-header .search-box input.[type="search"] {
position: relative !important; /* Ensure it respects z-index */▼
opacitycolor: 1#000000 !important; /* Prevent fading */
colortext-shadow: #000none !important; /* Force text to be Black */
-webkit-text-fill-color: #000000000 !important; /* Fix forForce iOS/Safari black text */
backgroundopacity: transparent1 !important;
background: #ffffff !important;
▲ z-index: 1001 !important; /* Sit on top of the header */
▲ position: relative !important; /* Ensure it respects z-index */
box-shadow: none !important;
}
 
/* 3. Ensure the placeholder text is also visible (Optional) */
body.mw-mf-search-mode .minerva-header .search-box input.[type="search"]::placeholder {
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://insurerbrain.mediawiki.site/wiki/MediaWiki:Mobile.css"