MediaWiki:Mobile.css: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

Revision as of 22:30, 6 December 2025 view source Wikilah admin (talk \| contribs) Bureaucrats, Interface administrators, Administrators 6,488 edits No edit summary ← Older edit		Latest revision as of 23:48, 6 December 2025 view source Wikilah admin (talk \| contribs) Bureaucrats, Interface administrators, Administrators 6,488 edits No edit summary
(6 intermediate revisions by the same user not shown)
Line 153: /* ======================================================= / / 2. TOP FLOATING SQUARES (~~Aligned~~44px &\| ~~Sized~~#F8F9FA Tone) / / ======================================================= / Line 178: .header-container .navigation-drawer { display: none !important; } / --- B. COMMON SQUARE STYLE (0.0503 Transparency for #F8F9FA) --- / .branding-box, #searchIcon, #cps-open-toc, body.mw-mf-search-mode .minerva-header .search-box input { / 53% Black ~~Background~~= ~#F8F9FA on white / background-color: rgba(0, 0, 0, 0.0503) !important; / ~~Strict~~Force ~~Sizing~~Full toOpacity ~~fix~~& ~~"Bigger~~Strip ~~Button" bug~~Defaults / ~~box-sizing~~opacity: ~~border-box~~1 !important; ~~width~~background-image: ~~40px~~none !important; ~~height~~-webkit-appearance: ~~40px~~none !important; border-radius: 8px !important;▼ ▼ pointer-events: auto !important;▼ border: none !important; box-shadow: none !important; backdrop-filter: none !important; ▲ padding: 0 !important; / Ensure no hidden padding /▼ ▲ border-radius: 8px !important; ▲ pointer-events: auto !important; / STANDARD 44px SIZING / ~~font~~box-~~size~~sizing: ~~24px~~border-box !important; ▼ ~~top~~width: ~~10px~~44px !important; ▼ ~~display~~height: ~~flex~~44px !important; ▼ ▲ padding: 0 !important; ~~/ Ensure no hidden padding /~~ margin: 0 !important; } Line 203 ⟶ 208: #searchIcon { position: fixed !important; ▲ top: 10px !important; / ALIGNMENT: 8px Top / ~~padding~~top: 08px !important; ~~margin:~~ 0 ~~!important;~~ ▼ left: 10px !important; right: auto !important; ~~z-index: 1003 !important;~~ / ~~Highest~~FORCE SIZE ~~Z-Index~~RESET / min-width: ~~100%~~0 !important; ~~height: 100% !important;~~▼ min-height: 0 !important; max-width: 44px !important; max-height: 44px !important; z-index: 1003 !important; display: flex !important; align-items: center; justify-content: center; } / Search Icon ~~Size: 24px~~ / #searchIcon .minerva-icon { font-size: 24px !important; color: #fff !important; fill: #fff !important; opacity: 1 !important; filter: brightness(0) invert(1); margin: 0 !important; } Line 225 ⟶ 238: display: flex !important; position: fixed !important; top: ~~10px~~8px !important; / ~~POSITION~~Position: 100px ~~Empty~~from ~~Space~~right edge / right: 100px !important; left: auto !important; bottom: auto !important; Line 236 ⟶ 249: } / TOC Icon ~~Size: 24px~~ / #cps-open-toc .icon { font-size: 24px !important; } ▲ font-size: 24px !important; }▼ / --- E. BUTTON 3: HOME (LEFT OF TOC) --- / .branding-box~~, .branding-box a~~ { position: fixed !important; top: ~~10px~~8px !important; / ~~POSITION~~Position: 100px (Space) + ~~40px~~44px (TOC) + 10px (Gap) / right: ~~150px~~154px !important; left: auto !important; z-index: 1002 !important; display: flex !important; align-items: center; ~~justify-content: center;~~▼ justify-content: center; } / ~~Centering~~1. ~~the~~The Home Icon (Bold & White) / .branding-box a::after { ▲ display: flex !important; ▲ align-items: center; justify-content: center; ▲ width: 100% !important; height: 100% !important; ▲ padding: 0 !important; margin: 0 !important; font-size: 0 !important; color: transparent !important; ▼ } .branding-box a::before {▼ content: "⌂"; font-size: ~~24px~~30px !important; color: #fff !important; -webkit-text-stroke: 1px #fff !important; margin-top: -~~4px~~6px !important; display: block !important; line-height: 1 !important; } / ~~--- F~~2. ~~THE SEARCH INPUT~~The ~~(Overlaid)~~Link ~~---~~Overlay / ▲.branding-box a~~::before~~ { position: absolute !important; ▲ ~~font-size~~top: 0 !important; ~~color~~left: ~~transparent~~0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; z-index: 2 !important; ▲} .branding-box a { display: none !important; } .branding-box a::before { display: none !important; } /* --- F. THE SEARCH INPUT --- / / 1. Hide initially / Line 280 ⟶ 300: display: block !important; position: fixed !important; top: ~~10px~~8px !important; height: ~~40px~~44px !important; z-index: 1001 !important; left: 10px !important; ~~/ Starts at Search Button /~~ right: 10px !important; ~~/ Stretches to Right Edge /~~ ~~/ Reset dimensions for wrapper /~~ width: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; ~~/ Wrapper doesn't need radius /~~ } / 3. Style Input Pill / body.mw-mf-search-mode .minerva-header .search-box input { ~~/ Explicitly override the common square style for WIDTH /~~ width: 100% !important; height: ~~40px~~44px !important; border-radius: 8px !important; box-sizing: border-box !important; / Background matches buttons / background-color: rgba(0, 0, 0, 0.0503) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 16px !important; / PADDING: ~~40px~~44px (Button) + ~~15px~~11px (Gap) / padding-left: 55px !important; padding-right: ~~50px~~55px !important; margin: 0 !important; } Line 323 ⟶ 345: } / 6. Cancel "X" Button ~~positioning~~ */ .search-box .search-box-cancel { display: block !important; Line 329 ⟶ 351: top: 0 !important; right: 0 !important; width: ~~40px~~44px !important; height: ~~40px~~44px !important; line-height: ~~40px~~44px !important; text-align: center !important; color: #fff !important;