Insurer Brain

MediaWiki:Mobile.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Tag: Reverted
Line 129:
 
/* ======================================================= */
/* 1. DESKTOP STICKY HEADERFIX (Vector 2022 Skin) */
/* ======================================================= */
/* ThisKeep part works perfectlythis, as you confirmed. it works perfectly */
 
.vector-header-container {
position: fixed !important;
Line 144 ⟶ 143:
}
 
/* Pushes article content down so it isn't hidden behind the fixed header */
body.skin-vector-2022 {
padding-top: 60px;
Line 153 ⟶ 151:
 
/* ======================================================= */
/* 2. MOBILE STICKY HEADERFIX (Minerva Skin) */
/* ======================================================= */
 
/* A. Sticky Header (Normal Reading Mode) */
/* We applytarget 'position:the sticky'header ONLY when the search overlay is CLOSED.NOT active */
The ':not(.mw-mf-search-mode)' part is the magic switch.
@media (max-width: 991px) {
▼
body:not(.mw-mf-search-mode) .header-container.header-chrome {▼
- When reading: Header is sticky.
position: -webkit-sticky !important; /* For iOS */▼
- When you click Search: This entire block is disabled.
position: sticky !important;▼
The header reverts to normal, allowing the search bar to
top: 0 !important;▼
expand, text to appear, and the icon to sit correctly
z-index: 99 !important; ▼
using the default skin settings.
background-color: #ffffff !important;▼
*/
border-bottom: 1px solid #eaecf0 !important;▼
▲body:not(.mw-mf-search-mode) .header-container.header-chrome {
/* Note: width: 100% is REMOVED to fix the displaced icon bug */
▲ position: -webkit-sticky;
▲ }
▲ position: sticky;
}
▲ top: 0;
 
/* Z-Index 99 is sufficient. Too high (like 999) caused the previous bugs. */
/* B. Search Mode Reset (Crucial) */
▲ z-index: 99;
/* When search is active, we explicitly force the header back to "Static"
▲ background-color: #ffffff;
so the Minerva skin can handle the full-screen animation without our interference. */
▲ border-bottom: 1px solid #eaecf0;
body:not(.mw-mf-search-mode) .minervaheader-container.header .search-boxchrome {▼
width: 100%;
position: static !important;
border-bottom: none !important;
}
 
/* C. Force Text Visibility */
/* Safeguard: Ensure the search box sits on top of the white header background
/* This guarantees the text inside the search bar is black and visible */
so text doesn't get buried behind it.
.minerva-header .search-box .search {
*/
color: #000 !important;
▲body:not(.mw-mf-search-mode) .minerva-header .search-box {
positionopacity: relative1 !important;
zbackground-indexcolor: 100#fff !important;
-webkit-text-fill-color: #000 !important; /* Fix for iOS Safari */
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Mobile.css"