MediaWiki:Mobile.css: Difference between revisions

Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 153:
 
/* ======================================================= */
/* 2. FIXED TOP TOOLBARCOMMAND BAR (TheHome "Mode- Switch"Search Solution- TOC) - FIXED */
/* ======================================================= */
 
/* --- A. READINGTHE MODEWHITE (TheBACKGROUND Sticky Toolbar)STRIP --- */
body.mw-mf-search-mode .header-container.header-chrome {
/* We style the header strictly when NOT searching */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: fixed !important;
top: 0 !important;
Line 168 ⟶ 167:
border-bottom: 1px solid #eaecf0 !important;
/* ForceCRITICAL layoutFIXES: */
displaytransform: flexnone !important; /* Stop scrolling logic */
align-items: center;
justify-content: center;
transform: none !important; /* Stop hiding on scroll */
transition: none !important;
overflow: visible !important; /* Allow search drawer to hang out the bottom */
}
 
/* Push page content down so it isn't hidden behind the bar */
body.skin-minerva {
padding-top: 50px !important;
.mw-body {
displaymargin-top: none50px !important;
}
 
/* Hide standardunwanted elements during reading mode */
body:not(.mw-mf-search-mode) .header-container .navigation-drawer,
body:not(.mw-mf-search-mode) .minerva-header .search-box {
display: none !important;
}
 
/* --- B. CUSTOMBUTTON BUTTONS1: HOME (Visible ONLY whenFixed ReadingLeft) --- */
.branding-box, .branding-box a {
 
position: fixed !important;
/* 1. HOME BUTTON (Left) */
top: 0 !important;
body:not(.mw-mf-search-mode) .branding-box {
positionleft: absolute0 !important;
topwidth: 0;60px left: 0!important;
width: 60px; height: 50px !important;
transformz-index: none1002 !important; /* StopAbove hidingthe on scrollstrip */
display: flex !important;
align-items: center; justify-content: center;
zjustify-indexcontent: 1002center;
body:not(.mw-mf-search-mode) .branding-box a {
font-size: 0 !important; color: transparent !important;
}
.branding-box a { font-size: 0 !important; color: transparent !important; }
body:not(.mw-mf-search-mode) .branding-box a::before {
content: "⌂"; font-size: 28px; color: #000; margin-top: -4px;
justify-content: center"⌂";
font-size: 28px;
color: #000;
margin-top: -4px;
}
 
/* 2--- C. BUTTON 2: SEARCH TRIGGER (Fixed Center) --- */
body:not(.mw-mf-search-mode) #searchIcon {
position: absolutefixed !important;
top: 0; left: 50%!important;
transformleft: translateX(-50%) !important;
transform: translateX(-50%) !important;
width: 60px; height: 50px!important;
height: 50px !important;
z-index: 1002 !important;
display: flex !important;
align-items: center; justify-content: center;
zjustify-indexcontent: 1002center;
background: transparent !important;
border: none; margin: 0; padding: 0!important;
margin: 0 !important; padding: 0 !important;
box-shadow: none !important;
}
body:not(.mw-mf-search-mode) #searchIcon .minerva-icon {
font-size: 24px; color: #000; opacity: 0.7;
color: #000;
opacity: 0.7;
}
 
/* 3--- D. TOC BUTTON 3: TOC (Fixed Right) --- */
body:not(.mw-mf-search-mode) #cps-open-toc {
display: flex !important;
position: absolutefixed !important;
top: 3px; right: 5px!important;
bottomright: auto;5px left: auto!important;
widthbottom: 44px;auto height: 44px!important;
z-indexleft: 1002auto !important;
width: 44px !important;
height: 44px !important;
z-index: 1002 !important;
background: transparent !important;
color: #000 !important;
Line 235 ⟶ 246:
}
 
/* --- CE. THE REAL SEARCH MODEBAR (The "Transparent" FixDrawer) --- */
/* When search activates, we HIDE the custom buttons so they don't block the view */
 
/* 1. HideTarget the CustomFORM Buttonscontainer, not just the input */
/* We force the entire form wrapper to drop down below the header */
body.mw-mf-search-mode .branding-box,
body.mw-mf-search-mode #searchIcon,.minerva-search-form {
display: block !important;
body.mw-mf-search-mode #cps-open-toc {
display: none !important;
 
/* 2. Reset Header to allow Standard Search Bar */
/* We remove the fixed height so the search bar can fit naturally */
body.mw-mf-search-mode .header-container.header-chrome {
position: fixed !important;
top: 050px !important; /* Pushes it exactly below the toolbar */
heightleft: auto0 !important; /* Let it grow */
min-heightright: 50px0 !important;
backgroundz-colorindex: #ffffff999 !important; /* Below the toolbar buttons */
z-indexmargin: 10000 !important;
border-bottompadding: 1px0 solid #eaecf0!important;
height: auto !important;
}
 
/* 32. ShowTarget the Realinner Search BarBox */
body.mw-mf-search-mode .minerva-header .search-box {
display: block !important;
opacityposition: 1relative !important; /* Relative to the form above */
visibilitytop: visible0 !important;
backgroundwidth: #fff100% !important;
padding: 8px10px !important;
background-color: #f0f0f0 !important; /* Grey drawer background */
border-bottom: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-sizing: border-box !important;
}
 
/* 43. Style the Input Text (Make sure it's black)Field */
body.mw-mf-search-mode .minerva-header .search-box input {
colordisplay: #000000block !important;
-webkit-text-fill-colorwidth: #000000100% !important;
opacityheight: 140px !important;
padding-left: 10px !important;
background: #fff !important;
color: #000 !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
height-webkit-appearance: 36pxnone !important;
opacity: 1 !important;
 
/* 4. Hide duplicate icons inside the drawer */
body.mw-mf-search-mode .minerva-header .search-box .search-box-icon-overlay {
display: none !important;
}
 
/* We5. styleDim the headerSearch strictlyTrigger whenButton NOTwhile searching */
body:not(.mw-mf-search-mode) .branding-box#searchIcon {
opacity: 0.2 !important;
pointer-events: none;
}