MediaWiki:Mobile.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Tag: Reverted
Line 153:
 
/* ======================================================= */
/* 2. FIXED TOP COMMAND BARTOOLBAR (HomeThe -"Mode SearchSwitch" - TOCSolution) - FIXED */
/* ======================================================= */
 
/* --- A. THEREADING WHITEMODE BACKGROUND(The STRIPSticky Toolbar) --- */
/* 5.We Dimstyle the Searchheader Triggerstrictly Buttonwhen whileNOT searching */
.header-container.header-chrome {
body:not(.mw-mf-search-mode) .header-container.header-chrome {
position: fixed !important;
top: 0 !important;
Line 167 ⟶ 168:
border-bottom: 1px solid #eaecf0 !important;
/* CRITICALForce FIXES:layout */
transformdisplay: noneflex !important; /* Stop scrolling logic */
align-items: center;
justify-content: "⌂"center;
z-indextransform: 1002none !important; /* AboveStop thehiding stripon 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 {
margin-top: 50px !important;
}
 
/* Hide unwantedstandard 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. BUTTONCUSTOM 1: HOMEBUTTONS (FixedVisible ONLY when LeftReading) --- */
 
.branding-box, .branding-box a {
/* 1. HOME BUTTON (Left) */
position: fixed !important;
body:not(.mw-mf-search-mode) #searchIcon.branding-box {
top: 0 !important;
leftposition: 0absolute !important;
widthtop: 60px0; !importantleft: 0;
width: 60px; height: 50px !important;
z-index: 1002 !important; /* Above the strip */
display: flex !important;
align-items: center; justify-content: center;
justifyz-contentindex: center1002;
body:not(.mw-mf-search-mode) .branding-box a {
.branding-box a { font-size: 0 !important; color: transparent !important; }
}
body:not(.mw-mf-search-mode) .branding-box a::before {
.branding-box a { font-size: 0 !important; color: transparent !important; }
content: "⌂"; font-size: 28px; color: #000; margin-top: -4px;
.branding-box a::before {
content: "⌂";
font-size: 28px;
color: #000;
margin-top: -4px;
}
 
/* --- C2. BUTTON 2: SEARCH TRIGGER (Fixed Center) --- */
body:not(.mw-mf-search-mode) #searchIcon {
position: fixedabsolute !important;
top: 0; !importantleft: 50%;
lefttransform: translateX(-50% !important);
width: 60px; !importantheight: 50px;
transform: translateX(-50%) !important;
width: 60px !important;
height: 50px !important;
z-index: 1002 !important;
display: flex !important;
align-items: center; justify-content: center;
justifyz-contentindex: center1002;
background: transparent !important;
border: none; !importantmargin: 0; padding: 0;
box-shadow: none !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;
}
 
/* --- D3. TOC BUTTON 3: TOC (Fixed Right) --- */
body:not(.mw-mf-search-mode) #cps-open-toc {
display: flex !important;
position: fixedabsolute !important;
top: 3px; !importantright: 5px;
rightbottom: 5pxauto; !importantleft: auto;
bottomwidth: auto44px; !importantheight: 44px;
leftz-index: auto !important1002;
width: 44px !important;
height: 44px !important;
z-index: 1002 !important;
background: transparent !important;
color: #000 !important;
Line 246 ⟶ 235:
}
 
/* --- EC. THE REAL SEARCH BARMODE (The Drawer"Transparent" Fix) --- */
/* When search activates, we HIDE the custom buttons so they don't block the view */
 
/* 1. TargetHide the FORMCustom container, not just the inputButtons */
body.mw-mf-search-mode .branding-box,
/* We force the entire form wrapper to drop down below the header */
body.mw-mf-search-mode .minerva-search-form {#searchIcon,
body.mw-mf-search-mode #cps-open-toc {
display: block !important;
margin-topdisplay: 50pxnone !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: 50px0 !important; /* Pushes it exactly below the toolbar */
leftheight: 0auto !important; /* Let it grow */
rightmin-height: 050px !important;
zbackground-indexcolor: 999#ffffff !important; /* Below the toolbar buttons */
marginz-index: 01000 !important;
paddingborder-bottom: 01px !importantsolid #eaecf0;
height: auto !important;
}
 
/* 23. TargetShow the innerReal BoxSearch Bar */
body.mw-mf-search-mode .minerva-header .search-box {
display: block !important;
positionopacity: relative1 !important; /* Relative to the form above */
topvisibility: 0visible !important;
widthbackground: 100%#fff !important;
padding: 10px8px !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;
}
 
/* 34. Style the Input FieldText (Make sure it's black) */
body.mw-mf-search-mode .minerva-header .search-box input {
displaycolor: block#000000 !important;
width-webkit-text-fill-color: 100%#000000 !important;
heightopacity: 40px1 !important;
padding-left: 10px !important;
background: #fff !important;
color: #000 !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
-webkit-appearanceheight: none36px !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;
}
 
/* 5. Dim the Search Trigger Button while searching */
body.mw-mf-search-mode #searchIcon {
opacity: 0.2 !important;
pointer-events: none;
}