Wikipedia/MediaWiki Sidebar Table of Contents User Style

README.md

A user style that moves Wikipedia's Table of Contents to the sidebar as a sticky panel.

• Supports dark mode via Dark Reader.
• Works on most other MediaWiki-based sites including Wiktionary, Wikiquote, and the Arch Wiki (leave a comment if you'd like to use this on another MediaWiki-based site).

Install with Stylus by clicking here.

© 2021 Maddison Hellstrom, MIT License

wikipedia-sidebar-toc.user.css

/* ==UserStyle==
@name           Wikipedia/MediaWiki Floating Contents
@namespace      io.maddison
@author         Maddison Hellstrom
@description    Display the Table of Contents in a floating container
@version        1.0.4
@license        CC-BY-NC-ND-4.0
@preprocessor   less
==/UserStyle== */
@-moz-document domain("wiki.archlinux.org") {
  html {
    --border-color: #cccccc;
  }

  @media (prefers-color-scheme: dark) {
    html[data-darkreader-scheme="dark"] {
      --border-color: rgb(36, 44, 47);
    }
  }
  
  body.skin--responsive #p-search,body.skin--responsive #p-lang {
    z-index: unset;
  }
}
@-moz-document domain("wikipedia.org"),
domain("wiktionary.org"),
domain("wikiquote.org"),
domain("wikisource.org"),
domain("wikimedia.org"),
domain("mediawiki.org"),
domain("wikivoyage.org"),
domain("wikibooks.org"),
domain("wikinews.org"),
domain("wikiversity.org"),
domain("wikidata.org") {
  html {
    --border-color: #a7d7f9;
  }

  @media (prefers-color-scheme: dark) {
    html[data-darkreader-scheme="dark"] {
      --border-color: rgb(0, 54, 120);
    }
  }
}
@-moz-document domain("wikipedia.org"),
domain("wiktionary.org"),
domain("wikiquote.org"),
domain("wikisource.org"),
domain("wikimedia.org"),
domain("mediawiki.org"),
domain("wikivoyage.org"),
domain("wikibooks.org"),
domain("wikinews.org"),
domain("wikiversity.org"),
domain("wikidata.org"),
domain("wiki.archlinux.org") {
  html {
    --toc-icon: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' standalone='no'?%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg height='16' fill='black' viewBox='0 0 16 16' version='1.1' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink'%3e%3cpath fill-rule='evenodd' d='M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z'%3e%3c/path%3e%3c/svg%3e");
    --toc-bg-color: #fff;
    --toc-scrollbar-thumb-color: #dcdcdc;
  }

  @media (prefers-color-scheme: dark) {
    html[data-darkreader-scheme="dark"] {
      --toc-icon: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' standalone='no'?%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg height='16' fill='white' viewBox='0 0 16 16' version='1.1' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink= 'http://www.w3.org/1999/xlink'%3e%3cpath fill-rule='evenodd' d='M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z'%3e%3c/path%3e%3c/svg%3e");
        --toc-bg-color: hsl(204, 12%, 12%);
        --toc-scrollbar-thumb-color: #444444;
    }
  }
  
  #content {
    z-index: 1;
    position: relative;
  }

  // double selector to increase specificity
  .tocright.tocright, .tocleft.tocleft {
    position: sticky;
    top: 10vh;
    margin: 0px 0px 0px -200px;
    float: left;
    clear: none;
    width: 176px;
    background: none;
    padding: 0;
    margin-bottom: 0;
    height: 0;
  }
  
  .tocright > #toc, .tocleft > #toc {
    padding: 0;
    display: block;
    border: none;
  }
  
  :not(.tocright, .tocleft) > #toc {
    position: sticky;
    top: 10vh;
    float: left;
    clear: none;
    height: 0;
    padding: 0;
    margin: 0px 0px 0px -200px;
    width: 176px;
    display: block;
    border: none;
  }
  
  #toc {
    background-color: var(--toc-bg-color);
  }

  #toc > * {
    background: inherit;
    margin: 0;
    padding-left: 10px;
    border: 1px solid var(--border-color);
  }

  #toc > .toctitle {
    border-bottom: none;
    padding-bottom: 4px;
  }

  #mw-toc-heading {
    margin-left: 23px;
  }

  #toc > ul {
    min-width: calc(100% - 20px);
    border-top: none;
    max-height: 80vh;
    overflow: scroll;
    resize: horizontal;
    scrollbar-color: var(--toc-scrollbar-thumb-color) var(--toc-bg-color);
  }

  .toctitle > h2::before {
    content: "";
    background-image: var(--toc-icon);
    height: 16px;
    width: 16px;
    position: absolute;
    top: 3px;
    left: 13px;
    visibility: visible;
  }

  .toctogglespan {
    left: 18px;
    position: relative
  }

  #toctogglecheckbox:checked ~ .toctitle {
    border-bottom: 1px solid var(--border-color);
    padding-left: 15.5px;
  }

  #toctogglecheckbox:checked ~ .toctitle > .toctogglespan {
    left: 12.5px;
  }
}