☰

Rustdoc Redesign

Applies a modern look to rust documentation.

// ==UserScript==
// @name         Rustdoc Redesign
// @namespace    http://tampermonkey.net/
// @version      2024-12-10
// @description  Applies a modern look to rust documentation.
// @author       exa04
// @match        *://*/*
// @icon         https://rustacean.net/assets/rustacean-orig-noshadow.png
// @grant        GM_addStyle
// @license      GPLv3
// ==/UserScript==

const STYLE = `
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --gray-950: #09090b;
  --gray-900: #18181b;
  --gray-800: #27272a;
  --gray-700: #3f3f46;
  --gray-600: #52525b;
  --gray-500: #71717a;
  --gray-400: #a1a1aa;
  --gray-300: #d4d4d8;
  --gray-200: #e4e4e7;
  --gray-100: #f4f4f5;
  --gray-50:  #fafafa;

  --accent-darkened: #451a03;
  --accent-lightened: #fde68a;
}
:root[data-theme="dark"] {
  --accent: #f59e0b;

  --body-background-color: var(--gray-950);
  --sidebar-background-color: var(--gray-950);
  --main-background-color: var(--gray-900);
  --code-block-background-color: var(--gray-800);
  --link-color: var(--accent);
  --sidebar-link-color: var(--gray-400);
  --accent-bg: var(--accent-darkened);
  --text-color: var(--gray-200);
  --main-color: var(--gray-200);
  --text-faded: var(--gray-400);
  --text-muted: var(--gray-500);
  --border: var(--gray-700);
  --search-shadow: 0 24px 64px 0 black;
  --search-btn-background-color: var(--gray-800);

  --code-highlight-comment-color: var(--gray-500);
}
:root[data-theme="light"] {
  --accent: #b45309;

  --body-background-color: var(--gray-200);
  --sidebar-background-color: var(--gray-100);
  --main-background-color: var(--gray-50);
  --code-block-background-color: var(--gray-100);
  --link-color: var(--accent);
  --sidebar-link-color: var(--gray-600);
  --accent-bg: var(--accent-lightened);
  --text-color: var(--gray-900);
  --main-color: var(--gray-900);
  --text-faded: var(--gray-600);
  --text-muted: var(--gray-500);
  --border: var(--gray-300);
  --search-shadow: 0 24px 64px 0 rgba(0,0,0,0.2);
  --search-btn-background-color: var(--gray-300);

  --code-highlight-comment-color: var(--gray-500);
}
.rustdoc, .rustdoc-page {
  max-width: 1440px;
  margin: auto;
}
main {
  background-color: var(--main-background-color);
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 1rem;
}
body {
  background-color: var(--body-background-color);
}
.width-limiter {
  margin: auto;
  max-width: 780px;
}
.rustdoc, .rustdoc-page, #crate-search, h1, h2, h3, h4, h5, h6, .sidebar, .mobile-topbar, .search-input, .search-results, .result-name, .item-name > a, .out-of-band, .sub-heading, span.since, a.src, rustdoc-toolbar, summary.hideme, .scraped-example-list, .rustdoc-breadcrumbs, ul.all-items {
  font-family: "Inter", "Helvetica", Arial, sans-serif;
}

.toc {
  width: 192px;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0.875rem;
  height: 100vh;
  position: sticky;
  top: 0;
  padding-top: 1rem;
  padding-right: 0.5rem;
  overflow-y: auto;
  background-color: var(--sidebar-background-color);
}
.toc .heading {
  padding-left: var(--sidebar-elems-left-padding);
  margin-bottom: 0.5rem;
}
.toc h3 {
  padding: 0;
  margin: 0;
}
.toc h3 a{
  color: var(--text-color);
}
.toc .block {
  padding-left: 0.5rem;
}
.toc a {
  color: var(--text-faded);
}
.sidebar .rustdoc-breadcrumbs {
  font-size: 1rem;
  font-weight: bold;
  padding-left: var(--sidebar-elems-left-padding);
  color: var(--text-faded);
  margin-bottom: 1rem;
}
.sidebar > .version {
  color: var(--text-faded);
  font-ssize: 0.875rem;
  margin: 1rem 0;
}
.sidebar .search {
  background-color: var(--search-btn-background-color);
  color: var(--text-faded);
  width: calc(100% - 2.5rem);
  border: 0 none black;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 8px;
  box-shadow: var(--search-shadow);
}
.sidebar .search .key {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border: 1px solid var(--text-muted);
}
.sidebar .rustdoc-breadcrumbs a:last-child {
  color: var(--text-color);
}
.sidebar .rustdoc-breadcrumbs a:hover {
  background-color: transparent !important;
  text-decoration: underline;
}
.sidebar-elems h3 {
  font-size: 0.875rem;
}
.sidebar-elems a, .sidebar > h2 a {
  padding: 0.125rem 0;
  margin-left: 0;
}
.sidebar-elems {
  padding-left: 0;
}
.sidebar-elems .block {
  margin-bottom: 1.5rem;
}
.sidebar .block a {
  padding-left: 1rem;
}
.sidebar .current,
.sidebar .current a,
.sidebar-crate a.logo-container:hover + h2 a,
.sidebar a:hover:not(.logo-container) {
  color: var(--text-color);
  background: var(--accent-bg);
}
.sidebar-elems h2 {
  display: none;
}
.sidebar-crate {
  border-bottom: 2px solid var(--border);
  margin: 1rem;
  margin-left: var(--sidebar-elems-left-padding);
  padding-bottom: 1rem;
}
.sidebar-crate h2 {
  margin: 0;
}
.sidebar-crate h2 .version {
  color: var(--text-faded);
  font-size: 0.875rem;
}
.sidebar-crate h2 a {
  font-size: 1.25rem;
}
.section-header:not(.structfield) {
  font-size: 1.5rem;
  font-weight: bold;
  border-top: 2px solid var(--border);
  margin-top: 2rem;
  border-top: 2px solid var(--border);
  padding-top: 2.5rem;
}
.item-decl {
  margin-bottom: 2.5rem;
}

.rustdoc-breadcrumbs {
  display: flex;
  gap: 0.25rem;
  color: var(--text-muted);
}
.rustdoc-breadcrumbs wbr {
  display: none;
}
.rustdoc-breadcrumbs a {
  color: var(--text-muted);
}
.main-heading {
  padding-bottom: 0;
  margin: 0;
}
.main-heading h1 {
  font-size: 1.125rem;
  margin-top: 1rem;
  color: var(--text-faded);
}
.main-heading h1 > span {
  font-size: 2rem;
  display: block;
  font-weight: bold;
}
.docblock>*:first-child {
  margin-top: 0 !important;
}
.content h2, .top-doc .docblock > h3, .top-doc .docblock > h4 {
  border-bottom: none;
}
.top-doc .docblock h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 2rem;
  padding: 0;
}
.top-doc .docblock h3 {
  line-height: 1.25rem;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding-bottom: 0;
  font-weight: bold;
}
.example-wrap {
  margin: 1rem 0;
}
main p {
  margin: 0.75rem 0;
}
.docblock code, .docblock-short code {
  background: none;
}
main .top-doc {
  margin-left: -24px;
}
.code-header {
  color: var(--text-muted);
}
.code-header > *:not(.fn) {
  color: var(--text-faded);
}
.code-header .fn {
  color: var(--accent);
}
.impl > .code-header .trait {
  color: var(--trait-link-color);
}
main p.leading {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}
.impl-items {
  padding-left: 2rem;
}
#trait-implementations-list .impl-items > .toggle:not(:last-child), #synthetic-implementations-list .impl-items > .toggle:not(:last-child), #blanket-implementations-list .impl-items > .toggle:not(:last-child){
  margin: 1.5rem 0;
}
#main-content.hidden {
  display: block !important;
}

#alternative-display rustdoc-toolbar {
  display: none;
}
#alternative-display {
  position: fixed;
  z-index: 100;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 800px;
  background: var(--sidebar-background-color);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0 1rem;
  box-shadow: var(--search-shadow);
}
#alternative-display #search {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 720px;
  max-height: 70vh;
}
#alternative-display #search #results {
  flex-shrink: 1;
  height: 0;
  flex-grow: 1;
  overflow-y: scroll;
}
#search #search-tabs {
  margin-bottom: 0;
}
#search .search-results-title {
  margin-top: 0;
}

.width-limiter:has(#alternative-display.hidden) rustdoc-search,
.width-limiter:not(:has(#alternative-display)) rustdoc-search {
}

.width-limiter:has(#alternative-display:not(.hidden)) rustdoc-search,
rustdoc-search:has(:focus) {
  pointer-events: auto !important;
  opacity: 1.0 !important;
}

rustdoc-search {
  position: fixed;
  z-index: 100;
  top: calc(20vh - 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 800px;
  pointer-events: none;
  opacity: 0;
}
rustdoc-search .search-input {
  background: var(--main-background-color);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-color);
  font-size: 1.25rem;
  padding: 0 1rem;
  height: 3rem;
}
nav.sub {
  margin-top: 0;
}

/* TODO */

.code-header .where {
  display: none;
}
#copy-path {
  display: none;
}
.sidebar-resizer {
  display: none;
}
`;

(function() {
    'use strict';

    if(!document.body.classList.contains('rustdoc')
      && !document.body.classList.contains('rustdoc-page')) {
        return;
    }

    GM_addStyle(STYLE);

    const mainContent = document.querySelector("#main-content");
    const title = document.querySelector("#main-content > .main-heading");
    const docblock = document.querySelector(".docblock");

    if(title && docblock) {
        let leading = docblock.firstChild;

        if(leading) {
            if(leading.nodeName == "#text") {
                const leading_text = leading;
                leading = document.createElement("p");
                leading.append(leading_text);
            }

            leading.classList.add("leading");
            mainContent.insertBefore(leading, title.nextSibling);

            if(docblock.children.length == 0) {
                document.querySelector(".top-doc").remove();
            }
        }
    }

    const breadcrumbs = document.querySelector(".rustdoc-breadcrumbs");

    if(breadcrumbs) {
        const path = breadcrumbs.cloneNode(true);

        Array.from(path.childNodes)
            .filter(node => node.nodeName == "WBR")
            .forEach(node => path.removeChild(node));

        const sidebar = document.querySelector(".sidebar");
        const sidebarElems = document.querySelector(".sidebar > .sidebar-elems");
        sidebar.insertBefore(path, sidebarElems);
    }

    const toc_content = document.querySelector("#rustdoc-toc");

    if(toc_content) {
        const rustdoc = document.querySelector(".rustdoc");
        let toc = document.createElement("aside");
        toc.append(toc_content);

        rustdoc.append(toc);
        toc.classList.add("toc");
        toc_content.classList.add("sidebar-elems");
    }

    const sidebarCrate = document.querySelector(".sidebar");
    const h2 = document.querySelector(".sidebar-crate");

    if(sidebarCrate && h2) {
        const search = document.createElement("button");
        search.classList.add("search");

        search.onclick = () => document.querySelector("rustdoc-search .search-input").focus();

        const key = document.createElement("span");
        key.classList.add("key");
        key.append(document.createTextNode("/"));

        search.append(key);
        search.append(document.createTextNode("Search"));
        sidebarCrate.insertBefore(search, h2.nextSibling);
    }
})();