MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 378:
 
/* ======================================================= */
/* 2. MOBILE STICKY HEADER (Minerva& SkinSEARCH FIX (Final) - REVISED */
/* ======================================================= */
 
/* 1--- A. Make the headerSTICKY stickyHEADER byBEHAVIOR default--- */
/* Only sticky when reading. Disabled when searching to prevent bugs. */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
z-index: 99; /* Keep this reasonably low */
background-color: #fffffffff !important;
border-bottom: 1px solid #eaecf0;
width: 100%;
}
 
/* --- B. SEARCH CONTAINER SETUP --- */
/* 2. CRITICAL FIX: When search is ACTIVE, reset sticky positioning */
/* We establish a 'coordinate system' (relative) for the icon to sit inside */
/* This prevents the search overlay from getting "trapped" or clipped */
.minerva-header .search-box input.search,{
body.mw-mf-search-mode .header-container.header-chrome {
position: relative !important;
z-indexdisplay: 1000block !important;
z-indexwidth: 1002100% !important;
background-color: #ffffff !important;
}
 
/* --- C. THE ICON (Absolute Position Fix) --- */
/* 3. SEARCH BOX VISIBILITY FIX */
/* We physically pin the icon to the top-left corner so it can't move */
/* Force the search container to sit above the header background */
.minerva-header .search-box .search-box-icon-overlay {
z-indexposition: 1001absolute !important;
positiontop: relative0 !important;
box-shadowleft: none0 !important;
text-shadowbottom: none0 !important;
width: 36px !important; /* Reserve exact space */
display: flex !important;
align-items: center;
justify-content: center;
z-index: 20 !important; /* Must be HIGHER than input */
pointer-events: none; /* Lets you click 'through' the icon to the box */
color: #72777d !important; /* Grey icon color */
}
 
/* 4--- D. THE INPUT TEXT COLOR FIXFIELD (The "Invisible Text"Transparency Fix) --- */
/* TargetWe every possible state oftarget the searchID inputexplicitly tofound forcein blackyour textHTML */
.minerva-header .search-box input,#searchInput {
/* 1. Layout */
.minerva-header .search-box input.search,
position: relative !important;
.minerva-header .search-box input[type="search"] {
z-index: 10 !important; /* Lower than icon */
width: 100% !important;
height: 32px !important; /* Force a standard height */
padding-left: 36px !important; /* Pushes text to the right of the icon */
margin: 0 !important;
/* 2. Appearance Reset (Removes Ghosting) */
-webkit-appearance: none !important;
border: 1px solid #a2a9b1 !important; /* Adds a visible border */
border-radius: 2px !important;
box-shadow: none !important;
/* 3. Color Forcing (The "Invisible Text" Fix) */
background-color: #ffffff !important;
color: #000000 !important;
-webkit-text-fill-color: #000000 !important; /* Forces iOS toBlack paint text blackText */
opacity: 1 !important;
z-index: 1002 !important;
background-color: #ffffff !important;
text-shadow: none !important;
box-shadow: none !important;
}
 
/* 5--- E. PlaceholderPLACEHOLDER textTEXT visibility--- */
.minerva-header .search-box input#searchInput::placeholder {
color: #72777d !important;
-webkit-text-fill-color: #72777d !important;