|
/* ======================================================= */
/* 1. MOBILEDESKTOP FIXSTICKY HEADER (MinervaVector 2022 Skin) */
/* ======================================================= */
/* This part works perfectly, as confirmed. */
/* A. Sticky Header (Only when NOT searching) */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #eaecf0;
width: 100%;
}
/* B. Search Input Text Fix (Force Visible Text) */
/* This forces the text to be black and background white so you can see it. */
.minerva-header .search-box .search {
color: #202122 !important; /* Dark grey/black text */
background-color: #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: relative !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 FIX (Vector 2022 Skin) */
/* ======================================================= */
/* Use FIXED instead of STICKY.
Sticky stops working if its parent container ends.
Fixed forces it to stay on screen forever. */
.vector-header-container {
position: fixed !important;
}
/* Pushes article content down so it isn't hidden behind the fixed header */
/* 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;
}
/* ======================================================= */
/* 2. MOBILE STICKY HEADER (Minerva Skin) */
/* ======================================================= */
/* 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 {
position: -webkit-sticky;
position: sticky;
top: 0;
/* Z-Index 99 is sufficient. Too high (like 999) caused the previous bugs. */
z-index: 99;
background-color: #ffffff;
border-bottom: 1px solid #eaecf0;
width: 100%;
}
/* 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 {
position: relative;
z-index: 100;
}
|