New wiki

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. CUSTOMFIXED TOP TOOLBARCOMMAND BAR (Home - Search - TOC) */
/* ======================================================= */
 
/* --- A. THE TOOLBARWHITE CONTAINERBACKGROUND STRIP --- */
/* We turnfreeze the header intocontainer ato fixed,act 50pxas tallthe white barbackground */
.header-container.header-chrome {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 50px !important;
z-index: 1000 !important;
background-color: #ffffff !important;
border-bottom: 1px solid #eaecf0 !important;
opacitytransform: 0.3none !important; /* DimSTOP itMediaWiki tofrom showhiding it's activeon scroll */▼
box-shadow: 0 1px 2px rgba(0,0,0,0.05);▼
displaytransition: none !important;▼
▼
/* Flex layout to arrange our 3 buttons */
display: flex !important;▼
align-items: center;
justify-content: center; /* Center the middle elements */
}
 
/* EnsurePush page content doesn'tdown so getit hiddenstarts behindbelow the toolbarbar */
body.skin-minerva {
padding-top: 50px !important;
}
.mw-body {
 
margin-top: 50px !important; ▼
/* --- B. HIDE UNWANTED ELEMENTS --- */
/* Hide the Hamburger Menu */▼
.header-container .navigation-drawer {▼
▲ display: none !important;
}
 
/* Hide the Textdefault InputHamburger initiallyMenu (weand onlySearch want the icon)Input */
▲.header-container .navigation-drawer {,
body:not(.mw-mf-search-mode) .minerva-header .search-box {
display: none !important;
}
 
/* --- CB. BUTTON 1: HOME (Fixed Left) --- */
/* We repurposedetach the Logologo (.branding-box)and topin beit theto Homethe Buttonscreen */
.header-container .branding-box {,
.header-container .branding-box a {▼
position: absolute !important;▼
leftposition: 0fixed !important; /* Pin to Viewport */
top: 0 !important;
▲ positionleft: absolute0 !important;
width: 60px !important;▼
height: 50px !important;
widthz-index: 60px1002 !important; /* Above the white strip */
▲
display: flex !important;
align-items: center;
Line 204 ⟶ 201:
}
 
▲/* Hide thetext, Hamburgershow MenuIcon */
▲.header-container .branding-box a {
.branding-box a {
/* Hide the text "bizslash.com" */
font-size: 0 !important;
color: transparent !important;
text-decoration: none !important;▼
}
.header-container .branding-box a::before {▼
 
/* Add the content: "⌂"; /* House Icon */
▲.header-container .branding-box a::before {
content: "⌂"; /* Unicode House */
font-size: 28px;
color: #000;
displaymargin-top: block-4px;
line-height: 50px;▼
margin-top: -5px;
}
 
/* --- DC. BUTTON 2: SEARCH TRIGGER (Fixed Center) --- */
/* PositionWe detach the existing search icon inand pin it to the middlecenter */
#searchIcon {
position: fixed !important; /* Pin to Viewport */▼
opacitytop: 10 !important;▼
widthleft: 10050% !important;▼
transform: translateX(-50%) !important; /* Perfect Center */▼
▼
colorwidth: #00060px !important;▼
▲ line-height: 50px !important;
▲ textz-decorationindex: none1002 !important;
▼
display: flex !important;
align-items: center;
justify-content: center;
height: 50px !important;▼
▲ width: 60px !important;
background: transparent !important;
border: none !important;
Line 234 ⟶ 233:
margin: 0 !important;
padding: 0 !important;
▲
/* Center it absolutely if flex fails */
position: absolute !important;
left: 50%;
▲ transform: translateX(-50%);
}
 
/* Icon Style */
#searchIcon .minerva-icon {
font-size: 24px;
Line 247 ⟶ 242:
}
 
/* --- ED. BUTTON 3: TABLETOC OF(Fixed CONTENTS (Right) --- */
/* We movepin your custom TOC button fromto bottom-rightthe totop top-right */
#cps-open-toc {
display: flex !important; /* Ensure it is visible */
position: absolutefixed !important; /* Pin to Viewport */
top: 3px !important; /* Center vertically in 50px bar */
right: 10px5px !important; /* Pin to right */
bottom: auto !important; /* RemoveOverride old bottom positioningsetting */
left: auto !important;
width: 44px !important;
height: 44px !important;
backgroundz-index: transparent1002 !important; /* Make it blend in */
▲ color: #000 !important;
background: #ffftransparent !important;▼
color: #000 !important; /* Black icon */▼
box-shadow: none !important;
}
 
/* Style--- theE. TOCTHE iconREAL toSEARCH lookBAR like(The aDrawer) standard list icon--- */
/* When search is clicked, the input box appears BELOW the header */
#cps-open-toc .icon {
font-size: 24px !important;
font-weight: bold;
}
 
/* 1. Reset the container visibility */
/* --- F. THE INTERACTION: SEARCH BAR DRAWER --- */
/* When Search is clicked (body.mw-mf-search-mode), show.minerva-header the input bar BELOW the header.search-box */{
▲ display: flexblock !important;
 
visibility: visible !important;
/* 1. Reset the Header to ensure it stays fixed */
opacity: 1 !important;
body.mw-mf-search-mode .header-container.header-chrome {
▲ position: fixed !important;
z-index: 1000;
}
 
/* 2. Position the Input BoxDrawer */
body.mw-mf-search-mode .minerva-header .search-box {
display: block !important;
position: fixed !important;
top: 50px !important; /* Starts exactly where header ends */
▲
/* Put it exactly below the 50px header */
▲ top: 50px !important;
left: 0 !important;
right: 0 !important;
▲ height: 50pxauto !important;
padding: 10px !important;▼
background-color: #f0f0f0 !important; /* StyleLight thegrey drawer background */
background-color: #f8f9fa !important;
▲ padding: 10px !important;
border-bottom: 1px solid #ccc;
z-index: 999 !important; /* Just belowBelow the headerbuttons, but above content */
▲ box-shadow: 0 1px4px 2px6px rgba(0,0,0,0.051);
height: auto !important;
}
 
/* 3. Style the Input Field inside the drawer */
body.mw-mf-search-mode .minerva-header .search-box input {min
▲ width: 100% !important;
height: 36px !important;
border: 1px solid #a2a9b1 !important;
border-radius: 4px !important;
padding-left: 10px !important;
▲ background: #fff !important;
▲ color: #000 !important;
-webkit-text-fill-color: #000 !important;
▲ opacity: 1 !important;
}
 
/* 4. Hide the "Search" button while searching (Optional, avoids confusion) */
body.mw-mf-search-mode #searchIcon {
▲ opacity: 0.3 !important; /* Dim it to show it's active */
pointer-events: none;
}
Retrieved from "https://insurerbrain.mediawiki.site/wiki/MediaWiki:Mobile.css"