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. FIXED TOP COMMAND BAR (Home - Search - TOC) - FIXED */
/* ======================================================= */
 
/* --- A. THE WHITE BACKGROUND STRIP --- */
/* We freeze the header container to act as the white background */
.header-container.header-chrome {
position: fixed !important;
Line 167 ⟶ 166:
background-color: #ffffff !important;
border-bottom: 1px solid #eaecf0 !important;
▼
transform: none !important; /* STOP MediaWiki from hiding it on scroll */▼
/* CRITICAL FIXES: */
▲ transform: none !important; /* STOP MediaWiki from hiding itStop onscrolling scrolllogic */
transition: none !important;
overflow: visible !important; /* Allow search drawer to hang out the bottom */
}
 
/* Push page content down so it starts below the bar */
body.skin-minerva {
padding-top: 50px !important;
Line 179 ⟶ 181:
}
 
/* Hide theunwanted default Hamburger Menu and Search Inputelements */
.header-container .navigation-drawer,
body:not(.mw-mf-search-mode) .minerva-header .search-box {
Line 186 ⟶ 188:
 
/* --- B. BUTTON 1: HOME (Fixed Left) --- */
.branding-box, .branding-box a {▼
/* We detach the logo and pin it to the screen */
position: fixed !important; /* Pin to Viewport */▼
.branding-box,
▲.branding-box a {
▲ position: fixed !important; /* Pin to Viewport */
top: 0 !important;
left: 0 !important;
width: 60px !important;
height: 50px !important;
z-index: 1002 !important; /* Above the white strip */
▲
display: flex !important;
align-items: center;
justify-content: center;
}
.branding-box a { font-size: 0 !important; color: transparent !important; }▼
 
/* Hide text, show Icon */
.branding-box a {
font-size: 0 !important;▼
▲ color: transparent !important;
}▼
.branding-box a::before {
content: "⌂"; /* House Icon */
font-size: 28px;
color: #000;
Line 214 ⟶ 208:
 
/* --- C. BUTTON 2: SEARCH TRIGGER (Fixed Center) --- */
/* We detach the search icon and pin it to the center */
#searchIcon {
position: fixed !important; /* Pin to Viewport */
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important; /* Perfect Center */
width: 60px !important;
height: 50px !important;
z-index: 1002 !important;
display: flex !important;
align-items: center;
Line 230 ⟶ 221:
background: transparent !important;
border: none !important;
margin: 0 !important; padding: 0 !important;▼
box-shadow: none !important;
margin: 0 !important;▼
▲ padding: 0 !important;
}
 
/* Icon Style */
#searchIcon .minerva-icon {
font-size: 24px;
Line 243 ⟶ 231:
 
/* --- D. BUTTON 3: TOC (Fixed Right) --- */
/* We pin your TOC button to the top right */
#cps-open-toc {
display: flex !important;
position: fixed !important; /* Pin to Viewport */
top: 3px !important;
right: 5px !important;
bottom: auto !important; /* Override old bottom setting */
left: auto !important;
width: 44px !important;
height: 44px !important;
z-index: 1002 !important;
background: transparent !important;
color: #000 !important; /* Black icon */
box-shadow: none !important;
}
 
/* --- E. THE REAL SEARCH BAR (The Drawer) --- */
/* When search is clicked, the input box appears BELOW the header */
 
/* 1. ResetTarget the FORM container, not just the visibilityinput */
/* We force the entire form wrapper to drop down below the header */
body.mw-mf-search-mode .minerva-header .search-box {▼
body.mw-mf-search-mode .minerva-search-form {
display: block !important;
visibility: visible !important;▼
opacity: 1 !important;▼
}▼
 
/* 2. Position the Drawer */▼
▲body.mw-mf-search-mode .minerva-header .search-box {
position: fixed !important;
top: 50px !important; /* StartsPushes it exactly wherebelow headerthe endstoolbar */
left: 0 !important;
right: 0 !important;
z-index: 999 !important; /* Below the toolbar buttons, but above content */▼
▲ font-sizemargin: 0 !important;
▲ visibilitypadding: visible0 !important;
height: auto !important;
▲}
 
▲/* 2. PositionTarget the Drawerinner Box */
▲body.mw-mf-search-mode .minerva-header .search-box {
display: block !important;
position: relative !important; /* Relative to the form above */
▲ margintop: 0 !important;
width: 100% !important;
padding: 10px !important;
background-color: #f0f0f0 !important; /* Light greyGrey drawer background */▼
▲ background-color: #f0f0f0 !important; /* Light grey drawer background */
border-bottom: 1px solid #ccc;
▲ z-index: 999 !important; /* Below the buttons, but above content */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-sizing: border-box !important;
}
 
/* 3. Style the Input Field */
body.mw-mf-search-mode .minminerva-header .search-box input {
display: block !important;
width: 100% !important;
height: 40px !important;
padding-left: 10px !important;
background: #fff !important;
color: #000 !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
-webkit-appearance: none !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;
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"