MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 149:
 
/* ======================================================= */
/* RESTORED CAPSACH TOC (FromFixed: VersionTop-Right 1Dropdown) */
/* ======================================================= */
 
Line 155:
#cps-open-toc {
position: fixed;
/* (These styles are now handled by the Floating Squares section,
but we keep basic reset here just in case) */
/* POSITION: Right side */
right: 16px; /* Changed from left: 16px */
left: auto; /* Safety: ensures left is unset */
/* POSITION: Lifted (to clear Google Anchor Ads) */
bottom: calc(120px + env(safe-area-inset-bottom, 0px));
/* SHAPE: Smaller Size (40px) */
width: 44px; /* Changed from 48px */
height: 44px; /* Changed from 48px */
border: 0; border-radius: 999px;
display: none;
align-items: center; justify-content: center;
font-size: 14px; font-weight: 600;
color: #fff; background: rgba(0,0,0,.1);
/* box-shadow: 0 2px 8px rgba(0,0,0,.0);*/
z-index: 1000; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
 
/* Full-screen scrim (Click outside to close) */
#cps-open-toc:focus { outline: 2px solid #36c; outline-offset: 2px; }
#cps-open-toc .label { display: none; } /* icon-only by default */
#cps-open-toc .icon { font-size: 20px; line-height: 1; }
 
/* Full-screen scrim */
#cps-toc-overlay {
position: fixed; inset: 0;
/* Slightly darker to focus attention on the menu */
background: rgba(0,0,0,.1);
color: #fff; background: rgba(0,0,0,0.12);
display: none; z-index: 1001;
z-index: 1004; /* Below the panel, above the buttons */
}
#cps-toc-overlay.is-open { display: block; }
 
/* --- THE DROPDOWN PANEL (MOVED TO TOP RIGHT) --- */
/* Bottom sheet panel */
#cps-toc-panel {
position: fixed; left: 0; right: 0; bottom: 0;
max-height: 85vh;
/* POSITION: 60px from top (Clear of the header) */
border-radius: 12px 12px 0 0;
top: 60px !important;
background: #fff; color: #202122;
/* box-shadow: 0 -8px 20px rgba(0,0,0,.0); */
/* POSITION: RightAligned sidewith the button */
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
right: 10px !important;
left: auto !important;
bottom: auto !important; /* Crucial: Detach from bottom */
/* SIZE: Fixed width card instead of full width */
width: 300px !important;
max-width: 90vw !important; /* Safety for small screens */
max-height: 80vh !important;
/* APPEARANCE: Floating Card */
border-radius: 12px 12px 0 0!important;
background: rgba(0,0,0,.1)#ffffff !important;
color: #202122 !important;
/* box-shadow: 0 2px4px 8px20px rgba(0,0,0,.0.25) !important;*/
padding: 12px !important;
/* SCROLLING */
overflow-y: auto !important;
max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
/* VISIBILITY */
z-index: 1005 !important; /* Must be highest */
#cps-open-toc .label { display: none; } /* icon-onlyHidden by default */
}
 
/* Logic to show panel (usually handled by JS toggling a class,
but ensuring display block when active) */
.is-open #cps-toc-panel,
#cps-toc-overlay.is-open + #cps-toc-panel, /* Fallback selector */
#cps-toc-panel[style*="display: block"] {
display: block !important;
}
 
Line 202 ⟶ 215:
#cps-toc-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px8px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
#cps-toc-title { font-size: 16px; font-weight: 600700; margin: 0; color: #000; }
#cps-toc-close {
background: transparent; border: 0; font-size: 22px24px; line-height: 1;
color: #666; padding: 0 8px;
}
 
/* List Styling */
#cps-toc-list {
list-style: none; margin: 0; padding: 4px 2px 6px0;
max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#cps-toc-list li { margin: 2px 0; }
#cps-toc-list a {
display: block; padding: 8px 10px; border-radius: 8px;
border: 0; border-radius: 999px6px;
text-decoration: none; color: inherit;
background: #fff; color: #202122;
font-size: 14px; font-weight: 600;
maxline-height: 85vh1.4;
}
#cps-toc-list a:focus, #cps-toc-list a:active {
outline: 2px solid #36c; background: #f5f6f7f0f0f0;
color: #3366cc;
}
 
/* Indentation by heading level */
#cps-toc-list li[data-level="3"] { padding-left: 12px10px; }
#cps-toc-list li[data-level="4"] { padding-left: 24px20px; }
#cps-toc-list li[data-level="5"] { padding-left: 36px30px; }
#cps-toc-list li[data-level="6"] { padding-left: 48px40px; }
 
/* Only show on phone-ish widths; tablet/desktop keep native TOC */
@media (min-width: 768px) {
#cps-open-toc, #cps-toc-overlay, #cps-toc-panel { display: none !important; }
}
 
Line 237 ⟶ 257:
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
 
/* ======================================================= */
/* FIX: HIDE DUPLICATE "CONTENTS" TITLE IN MOBILE TOC */
/* ======================================================= */
#cps-toc-panel .toctitle,
#cps-toc-panel #mw-toc-heading,
#cps-toc-panel h2 {
display: none !important;
}