|
.mw-page-container {
margin-top: 10px;
}
/* ======================================================= */
/* 2. MOBILE STICKY HEADER & SEARCH FIX (Layer Fix) */
/* ======================================================= */
/* --- A. READING MODE (Sticky) --- */
/* strictly applied ONLY when NOT searching */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
z-index: 99;
background-color: #ffffff !important;
border-bottom: 1px solid #eaecf0;
width: 100%;
}
/* --- B. SEARCH MODE (Static - The Fix) --- */
/* When search is active, we disable sticky so it doesn't cover the input */
body.mw-mf-search-mode .header-container.header-chrome {
position: relative !important; /* Stop floating */
top: auto !important;
z-index: 1000 !important; /* Bring the container to the front */
background: #ffffff !important;
}
/* --- C. SEARCH INPUT VISIBILITY --- */
/* Force the real input to sit on top of everything */
body.mw-mf-search-mode .minerva-header .search-box {
z-index: 1001 !important;
position: relative !important;
}
/* --- D. THE INPUT FIELD STYLING --- */
/* Fixes the invisible text and layout */
.minerva-header .search-box input#searchInput {
/* Layout */
position: relative !important;
z-index: 10 !important;
width: 100% !important;
height: 32px !important;
padding-left: 36px !important; /* Room for icon */
margin: 0 !important;
/* Visuals */
background-color: #ffffff !important;
border: 1px solid #a2a9b1 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
/* Text Color Force */
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
opacity: 1 !important;
}
/* --- E. THE ICON STYLING --- */
/* Pins the icon to the left */
.minerva-header .search-box .search-box-icon-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 36px !important;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 20 !important; /* Above the input */
pointer-events: none;
color: #72777d !important;
}
/* Placeholder Text Visibility */
.minerva-header .search-box input#searchInput::placeholder {
color: #72777d !important;
-webkit-text-fill-color: #72777d !important;
opacity: 1 !important;
}
|