MediaWiki:Mobile.css: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

Revision as of 22:18, 6 December 2025 view source Wikilah admin (talk \| contribs) Bureaucrats, Interface administrators, Administrators 6,538 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,538 edits No edit summary
(8 intermediate revisions by the same user not shown)
Line 153: /* ======================================================= / / 2. TOP FLOATING SQUARES (~~Left~~44px ~~Search~~\| ~~Layout)~~#F8F9FA Tone) / / ======================================================= / Line 178: .header-container .navigation-drawer { display: none !important; } / --- B. COMMON SQUARE STYLE (0.103 Transparency for #F8F9FA) --- / .branding-box, #searchIcon, #cps-open-toc, body.mw-mf-search-mode .minerva-header .search-box input { / 3% Black = ~#F8F9FA on white / background-color: rgba(0, 0, 0, 0.1) !important; ▼ ~~backdrop~~background-~~filter~~color: ~~blur~~rgba(~~2px~~0, 0, 0, 0.03) !important; border-radius: 8px !important;▼ / Force Full Opacity & Strip Defaults / pointer-events: auto !important;▼ ~~top~~opacity: ~~8px~~1 !important;▼ background-~~color~~image: ~~rgba(0, 0, 0, 0.4)~~none !important;▼ ~~width~~-webkit-appearance: ~~auto~~none !important;▼ border: none !important; box-shadow: none !important; backdrop-filter: none !important; ▲ border-radius: 8px !important; ▲ pointer-events: auto !important; / STANDARD 44px SIZING / box-sizing: border-box !important; width: 44px !important; ~~height: 44px !important;~~▼ ~~width: 44px !important;~~ height: 44px !important;▼ padding: 0 !important; ~~margin: 0 !important;~~▼ margin~~: 0 !important; padding~~: 0 !important;▼ } / --- C. BUTTON 1: SEARCH TRIGGER (~~Now on~~ TOP LEFT) --- / #searchIcon { position: fixed !important; ▲ top: 8px !important; ~~left: 10px !important;~~ / ~~MOVED~~ALIGNMENT: TO8px ~~LEFT~~Top / ~~width~~top: ~~100%~~8px !important; ~~height:~~ ~~100%~~ ~~!important;~~ ▼ left: 10px !important; right: auto !important; ▲ width: 44px !important; height: 44px !important; / FORCE SIZE RESET / z-index: 1003 !important; / Highest Z-Index to overlay the bar /▼ min-width: 0 !important; min-height: 0 !important; max-width: 44px !important; max-height: 44px !important; ▲ z-index: 1003 !important; ~~/ Highest Z-Index to overlay the bar /~~ display: flex !important; align-items: center; justify-content: center; ▲ margin: 0 !important; padding: 0 !important; } / ~~Tiny~~Search ~~Magnifying Glass~~Icon / #searchIcon .minerva-icon { font-size: ~~14px~~24px !important; color: #fff !important; fill: #fff !important; opacity: 1 !important; filter: brightness(0) invert(1); margin~~-top~~: ~~-4px~~0 !important;▼ } / --- D. BUTTON 2: TOC (~~Now on~~ RIGHT -~~CENTER~~ 100px SPACE) --- / #cps-open-toc { display: flex !important; position: fixed !important; top: 8px !important; ~~right: 64px !important; / Shifted Left to leave space for X /~~ / Position: 100px from right edge / right: 100px !important; left: auto !important; bottom: auto !important; ▲ width: 44px !important; height: 44px !important; z-index: 1002 !important; color: #fff !important; align-items: center; justify-content: center; } #cps-open-toc .icon { font-size: 22px !important; }▼ / TOC Icon / / --- E. BUTTON 3: HOME (Now NEXT TO TOC) --- /▼ ▲#cps-open-toc .icon { font-size: ~~22px~~24px !important; } .branding-box, .branding-box a {▼ ▲/ --- E. BUTTON 3: HOME (~~Now~~LEFT ~~NEXT TO~~OF TOC) --- / .branding-box a { ▼ position: fixed !important; top: 8px !important; ~~right: 118px !important; / 64px (TOC) + 44px + 10px Gap /~~ / Position: 100px (Space) + 44px (TOC) + 10px (Gap) / left: auto !important; / Removed Left positioning /▼ ~~width~~right: ~~44px !important; height: 44px~~154px !important; ▲ left: auto !important; ~~/ Removed Left positioning /~~ z-index: 1002 !important; }▼ ~~/ FIX: Centering the Home Icon /~~ ▲.branding-box a { 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 {▼ / 1. The Home Icon (Bold & White) / ▲.branding-box a::~~before~~after { content: "⌂"; font-size: ~~24px~~30px !important; color: #fff !important; -webkit-text-stroke: 1px #fff !important; ▲ margin-top: -4px; margin-top: -6px !important; display: block !important; ~~width~~line-height: ~~auto~~1 !important; } / 2. The Link Overlay / / --- F. THE SEARCH INPUT (Overlaid by Search Button) --- /▼ ▲~~.branding-box,~~ .branding-box a { 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 ~~(Overlaid by Search Button)~~ --- / / 1. Hide initially / Line 267 ⟶ 302: top: 8px !important; height: 44px !important; z-index: 1001 !important; ~~/ Lower than Button (1003) /~~ left: 10px !important; ~~/ Starts at Search Button /~~ right: 10px !important; ~~/ Stretches to Far Right /~~ ▲ width: auto !important; width: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; } Line 282 ⟶ 318: height: 44px !important; border-radius: 8px !important; box-sizing: border-box !important; / Background matches buttons / ▲ background-color: rgba(0, 0, 0, 0.103) !important; ▲ background-color: rgba(0, 0, 0, 0.4) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 16px !important; / PADDING: IS44px ~~KEY:~~(Button) + 11px (Gap) / padding-left: ~~44px~~55px !important; ~~/ Text starts AFTER the Search Button /~~ padding-right: ~~50px~~55px !important; ~~/ Text ends BEFORE the Cancel Button /~~ margin: 0 !important; } / 4. Hide Inner Icon ~~(Since we use the Button as the icon)~~ / .minerva-header .search-box .search-box-icon-overlay { display: none !important; Line 304 ⟶ 345: } / 6. ~~Ensure~~ Cancel ~~Button (~~"X") ~~is Visible on Far Right~~Button */ .search-box .search-box-cancel { display: block !important;