Jump to content

MediaWiki:Mobile.css

From Anandamakaranda

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Floating TOC button */
#gr-toc-button {
    position: fixed;
    bottom: 20px;
    right: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #b5451b;
    color: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
}

/* TOC overlay */
#gr-toc-overlay {
    position: fixed;
    top: 0;
    right: -90%;
    width: 82%;
    max-width: 340px;
    height: 100%;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    transition: right .25s ease;
    box-shadow: -4px 0 18px rgba(0,0,0,.2);
    padding: 20px;
}

#gr-toc-overlay.open {
    right: 0;
}

/* Dark backdrop */
#gr-toc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
    display: none;
}

#gr-toc-backdrop.open {
    display: block;
}

/* TOC styling */
#gr-toc-overlay .toc {
    display:block !important;
    border:none;
    padding:0;
    font-size:16px;
}

#gr-toc-overlay ul {
    list-style:none;
    padding-left:14px;
}

#gr-toc-overlay li {
    margin:10px 0;
}

#gr-toc-overlay a {
    text-decoration:none;
    color:#222;
}