Insurer Brain

MediaWiki:Mobile.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 131:
/* 1. DESKTOP FIX (Vector 2022 Skin) */
/* ======================================================= */
/* Confirmed working */
/* This section works well (confirmed) */
 
.vector-header-container {
Line 144:
}
 
/* Push desktop content down so it doesn't hide behind header */
body.skin-vector-2022 {
padding-top: 60px;
Line 157 ⟶ 156:
 
/* A. FIXED HEADER (Normal Reading Mode) */
/* WeTargeted usevia 'fixed'Media instead of 'sticky'Query to ensure it NEVERdoesn't touch Desktop disappears,*/
even if you scroll to the very bottom of a long article. */
@media (max-width: 991px) {
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: fixed !important;
top: 0;
left: 0;
right/* FIX FOR DISPLACED ICON: 0;
Instead of width: 100%;, we anchor left and right to 0.
z-index: 99; /* LowThis enoughensures the bar stretches to notthe exact blockscreen popupswidth */
without adding extra padding that pushes the icon off-edge. */
left: 0 !important;
right: 0 !important;
width: auto !important;
z-index: 99;
background-color: #fff;
border-bottom: 1px solid #eaecf0;
Line 172 ⟶ 176:
 
/* PADDING COMPENSATOR */
/* BecausePush thecontent headerdown isso nowthe fixedtop (floating),isn't wehidden must pushbehind the fixed header */
page content down, otherwise the top of the article is hidden. */
body:not(.mw-mf-search-mode) #mw-mf-page-center {
padding-top: 55px60px !important; /* Adjust if your header is taller */
}
}
 
/* B. SEARCH MODE (The "KILLFull SWITCHReset" (Crucial for Mobile) */
/* When search is active, we must convert the header from "Fixed Bar"
/* When you tap search, Minerva adds the class '.mw-mf-search-mode'.
to "Full Screen Overlay" so the input text and results work naturally. */
We explicitly reset the header to 'static'.
html.mw-mf-search-mode .header-container.header-chrome,
This allows Minerva to take over and expand the search bar to
full screen naturally, fixing the "invisible text" and "hidden box" bugs. */
body.mw-mf-search-mode .header-container.header-chrome {
position: staticabsolute !important;
border-bottomtop: none0 !important;
heightleft: 100%0 !important; /* Allow full screen expansion */
right: 0 !important;
bottom: 0 !important;
height: 100vh !important; /* Force full height */
width: 100% !important;
z-index: 1000 !important; /* Bring to front */
border: none !important;
overflow: hidden !important;
}
 
/* C. iOSVISIBILITY INPUT TEXT FIXENFORCER */
/* ForcesForce searchthe text color to be black, overcomingand ensure input iOSis transparencyon bugstop */
.minerva-header .search-box .search {
color: #000 !important;
-webkit-text-fill-color: #000 !important; /* iOS Safari Fix */▼
opacity: 1 !important;
▲ -webkit-text-fill-color: #000 !important;
background-color: #fff !important;
z-index: 1001 !important;
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"