MediaWiki:Mobile.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Manual revert |
No edit summary |
||
Line 1:
/* All CSS here will be loaded for users of the mobile site */
/*
#cps-open-toc {
position: fixed;
left: 16px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
width: 48px; height: 48px;
border: 0; border-radius: 999px;
display: none; /* shown by JS when headings exist */
align-items: center; justify-content: center;
font-size: 14px; font-weight: 600;
color: #fff; background: rgba(0,0,0,.65);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
z-index: 1000; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#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;
background: rgba(0,0,0,.35);
display: none; z-index: 1001;
}
#cps-toc-overlay.is-open { display: block; }
/* Bottom sheet panel */
#cps-toc-panel {
position: fixed; left: 0; right: 0; bottom: 0;
border-radius: 12px 12px 0 0;
background: #fff; color: #202122;
box-shadow: 0 -8px 20px rgba(0,0,0,.2);
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
}
/* Header row */
#cps-toc-header {
display: flex; align-items: center; justify-content: space-between;
}
#cps-toc-title { font-size: 16px; font-weight: 600; margin: 0; }
#cps-toc-close {
background: transparent; border: 0; font-size: 22px; line-height: 1;
}
/* List */
#cps-toc-list {
list-style: none; margin: 0; padding: 4px 2px 6px;
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;
text-decoration: none; color: inherit;
}
#cps-toc-list a:focus, #cps-toc-list a:active {
outline: 2px solid #36c; background: #f5f6f7;
}
/* Indentation by heading level */
#cps-toc-list li[data-level="3"] { padding-left: 12px; }
#cps-toc-list li[data-level="4"] { padding-left: 24px; }
#cps-toc-list li[data-level="5"] { padding-left: 36px; }
#cps-toc-list li[data-level="6"] { padding-left: 48px; }
/* Only show on phone-ish widths; tablet/desktop keep native TOC */
@media (min-width: 768px) {
#cps-open-toc, #cps-toc-overlay { display: none !important; }
}
/* Respect reduced motion preference */
@media (
html { scroll-behavior: auto; }
▲ max-width: 720px;
▲ margin: 0 auto;
}
| |||