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 & SEARCH FIX (FinalLayer Fix) */
/* ======================================================= */
 
/* --- A. STICKYREADING HEADERMODE BEHAVIOR(Sticky) --- */
/* Onlystrictly stickyapplied ONLY when reading. Disabled whenNOT searching to prevent bugs. */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: -webkit-sticky !important;
Line 168:
}
 
/* --- B. SEARCH CONTAINERMODE SETUP(Static - The Fix) --- */
/* When search is active, we disable sticky so it doesn't cover the input */
/* We establish a 'coordinate system' (relative) for the icon to sit inside */
body.mw-mf-search-mode .header-container.header-chrome {
.minerva-header .search-box {▼
position: relative !important; /* Stop floating */
displaytop: blockauto !important;
widthz-index: 100%1000 !important; /* Bring the container to the front */
background: #ffffff !important;
}
 
/* --- C. THESEARCH ICONINPUT (Absolute Position Fix)VISIBILITY --- */
/* WeForce physicallythe pinreal the iconinput to thesit on top-left corner so it can'tof moveeverything */
body.minervamw-mf-headersearch-mode .searchminerva-boxheader .search-box-icon-overlay {
positionz-index: absolute1001 !important;
topposition: 0relative !important;
left: 0 !important;▼
bottom: 0 !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 */▼
}
 
/* --- D. THE INPUT FIELD (Transparency Fix)STYLING --- */
/* We targetFixes the ID explicitly foundinvisible intext yourand HTMLlayout */
.minerva-header .search-box input#searchInput {
/* 1. Layout */
position: relative !important;
z-index: 10 !important; /* Lower than icon */
width: 100% !important;
height: 32px !important; /* Force a standard height */
padding-left: 36px !important; /* PushesRoom text to the right of thefor icon */
margin: 0 !important;
/* 2. Appearance Reset (Removes Ghosting)Visuals */
background-webkit-appearancecolor: none#ffffff !important;
border: 1px solid #a2a9b1 !important; /* Adds a visible border */
border-radius: 2px !important;▼
box-shadow: none !important;
-webkit-appearance: none !important;
/* 3.Text Color Forcing (The "Invisible Text" Fix)Force */
background-color: #ffffff !important;▼
color: #000000 !important;
-webkit-text-fill-color: #000000 !important; /* Forces iOS Black Text */
opacity: 1 !important;
}
 
/* --- E. PLACEHOLDERTHE TEXTICON STYLING --- */
/* Pins the icon to the left */
▲.minerva-header .search-box .search-box-icon-overlay {
▲ background-colorposition: #ffffffabsolute !important;
▲ bottomtop: 0 !important;
▲ left: 0 !important;
▲ border-radiusheight: 2px100% !important;
▲ width: 36px !important; /* Reserve exact space */
▲
▲ display: flex !important;
▲ align-items: center;
▲ justify-content: center;
▲
▲ z-index: 20 !important; /* Must be HIGHERAbove thanthe input */
pointer-events: none;
▲ color: #72777d !important; /* Grey icon color */
}
 
/* Placeholder Text Visibility */
.minerva-header .search-box input#searchInput::placeholder {
color: #72777d !important;
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"