Skip to content

Instantly share code, notes, and snippets.

@kaem-e

kaem-e/better_rust_doc.css

Created November 22, 2025 10:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kaem-e/f450c00bc93d0813411294308467465c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kaem-e/f450c00bc93d0813411294308467465c to your computer and use it in GitHub Desktop.
Download ZIP
a
Raw
better_rust_doc.css
@-moz-document domain("docs.rs"),
regexp("^file:///.*\\.rustup/toolchains/[^/]+/share/doc/rust/html(/.*)?$"),
regexp("^file:///.*?/target/doc(/.*)?$"),
domain("doc.rust-lang.org"),
domain("nih-plug.robbertvanderhelm.nl"),
url-prefix("https://docs.slint.dev/latest/docs/rust/slint"),
url-prefix("https://rust-unofficial.github.io/too-many-lists/"),
url-prefix("https://rust-lang.github.io/api-guidelines"),
url-prefix("http://localhost:65114/"),
url-prefix("https://jorel.dev/mdBook-pagetoc/"),
domain("docs.vizia.dev"),
url-prefix("http://localhost:7878"),
url-prefix("https://ericfecteau.ca/data/rust-data-analysis"),
url-prefix("https://microsoft.github.io/windows-docs-rs/doc/windows/"),
domain("book.vizia.dev"),
domain("nnethercote.github.io") {
:root[data-theme = "dark"] {
--main-background-color: #292D2D;
--sidebar-background-color: #3e4343;
--color-background: #292D2D;
--table-alt-row-background-color: #2F3232;
--code-block-background-color: #232626;
--sidebar-current-link-background-color: #373D3D
}
:root {
--font-common: "TikTok Sans", "Helvetica", sans-serif;
/* --font-common: "Söhne"; */
/* --font-common:, Atkinson Hyperlegible"; */
--font-display: var(--font-common) !important;
--font-content: "Atkinson Hyperlegible Next VF", "Atkinson Hyperlegible Next", 'Atkinson Hyperlegible', sans-serif;
/* --font-monospaced: 'Geist Mono', monospace; */
/* --font-family-code: 'Roboto Mono', monospace !important; */
--font-family-code: 'Geist Mono', "Geist Mono Variable", monospace !important;
--main-color: hsl(0, 3%, 85%);
--main-background-color: hsl(240, 4%, 14%);
--accent-color: hsl(30, 50%, 54%);
--accent-color-strong: hsl(30, 80%, 54%);
--transition: all 100ms ease-in-out;
--settings-input-color: #2196f3;
--settings-input-border-color: #999;
--settings-button-color: #000;
--settings-button-border-focus: #ffb900;
--sidebar-background-color: hsl(0, 0%, 10%);
--sidebar-background-color-hover: #676767;
--scrollbar-track-background-color: #717171;
--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
--scrollbar-color: rgba(32, 34, 37, .6) #5a5a5a;
--headings-border-bottom-color: hsla(0, 0%, 82%, 0%);
@media (prefers-color-scheme: dark) {
--button-background-color: color-mix(in srgb, var(--main-background-color) 100%, #ffffff 5%) !important;
--border-color: color-mix(in srgb, var(--main-background-color) 100%, #ffffff 15%) !important;
--search-color: var(--main-color) !important
}
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--search-input-focused-border-color: #00000000 !important;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
--copy-path-img-hover-filter: invert(65%);
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--type-link-color: #2dbfb8;
--trait-link-color: #b78cf2;
--assoc-item-link-color: var(--accent-color);
--function-link-color: #2bab63;
--macro-link-color: #09bd00;
--keyword-link-color: var(--accent-color);
--mod-link-color: var(--accent-color);
--link-color: var(--accent-color);
--sidebar-link-color: var(--accent-color);
--sidebar-current-link-background-color: #444;
--search-result-link-focus-background-color: #616161;
--search-result-border-color: #aaa3;
--search-color: #111;
--search-error-code-background-color: #484848;
--search-results-alias-color: #fff;
--search-results-grey-color: #ccc;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: #252525;
--search-tab-button-not-selected-background: #252525;
--search-tab-button-selected-border-top-color: #0089ff;
--search-tab-button-selected-background: #353535;
--stab-background-color: #314559;
--stab-code-color: #e6e1cf;
--code-highlight-kw-color: #ab8ac1;
--code-highlight-kw-2-color: #769acb;
--code-highlight-lifetime-color: #d97f26;
--code-highlight-prelude-color: #769acb;
--code-highlight-prelude-val-color: #ee6868;
--code-highlight-number-color: #83a300;
--code-highlight-literal-color: #ee6868;
--code-highlight-attribute-color: #ee6868;
--code-highlight-self-color: #ee6868;
--code-highlight-macro-color: #3e999f;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #8d8d8b;
--code-highlight-doc-comment-color: #8ca375;
--src-line-numbers-span-color: #71797990 !important;
--src-line-number-highlighted-background-color: #0a042f;
--test-arrow-color: #dedede;
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #dedede;
--test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
--rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
--crate-search-div-filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%);
--crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
--crate-search-hover-border: #2196f3;
--source-sidebar-background-selected: #333;
--source-sidebar-background-hover: #444;
--table-alt-row-background-color: #2A2A2A;
--codeblock-link-background: #333;
--scrape-example-toggle-line-background: #999;
--scrape-example-toggle-line-hover-background: #c5c5c5;
--scrape-example-code-line-highlight: rgb(91, 59, 1);
--scrape-example-code-line-highlight-focus: rgb(124, 75, 15);
--scrape-example-help-border-color: #aaa;
--scrape-example-help-color: #eee;
--scrape-example-help-hover-border-color: #fff;
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
--sidebar-resizer-active: var(--accent-color-strong) !important;
}
html {
scroll-behavior: smooth;
scroll-padding: 12px;
}
.sidebar-elems {
font-family: var(--font-common);
}
body {
font-family: var(--font-common);
font-weight: 400;
}
div.recent-releases-container .description,
div.recent-releases-container .date {
font-family: var(--font-display)
}
div.recent-releases-container .name {
font-family: var(--font-content)
}
/* Subtle border radius for modern feel */
* {
border-radius: 0px;
}
/* Main content centering */
main {
max-width: 1000px;
margin-inline: auto;
padding: 10px 15px 40px 15px !important;
}
/* On screens narrower than 1100px, increase left padding */
@media (max-width: 1300px) {
main {
max-width: fit-content;
margin-left: unset;
padding: 10px 15px 40px 45px !important;
}
}
@media (max-width: 1200px) {
main {
margin-right: unset;
}
}
/* Typography improvements */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
padding: 0;
line-height: 2.0 !important;
}
h1 {
font-weight: 600 !important;
font-size: 2.0rem !important;
}
.sidebar h2 {
font-size: 1.5rem !important;
}
.mobile-topbar h2 {
padding-bottom: 0;
margin: auto auto auto auto;
overflow: hidden;
font-size: 24px;
white-space: nowrap;
text-overflow: ellipsis;
}
nav.mobile-topbar {
margin-bottom: 10px;
}
.content {
font-family: var(--font-content) !important;
}
.docblock {
font-family: var(--font-content) !important;
line-height: 1.8;
padding-bottom: 1px;
margin-left: initial;
}
@media (prefers-color-scheme: light) {
.docblock {
color: var(--main-color);
}
}
@media (prefers-color-scheme: dark) {
.docblock {
color: var(--main-color);
}
}
.sidebar h2 {
padding: 0;
font-size: 1.5em;
transition: var(--transition);
}
.sidebar-crate h2 {
transition: var(--transition);
margin: revert;
}
.sidebar-crate {
transition: var(--transition);
}
:root {
--code-padding: 10px;
}
.structfield > code {
display: block;
}
pre,
a.test-arrow,
.code-header,
.structfield > code {
font-family: var(--font-monospaced);
padding: var(--code-padding);
}
.structfield {
margin-block: 10px;
width: 100%;
}
/* For some reason the summary thing need to be moved down 4px to look centered */
details.toggle > summary:not(.hideme)::before {
transform: translateY(4px);
}
details.toggle > summary:not(.hideme)::before,
.rightside + .anchor,
.structfield > .anchor,
.impl > .anchor {
top: var(--code-padding) !important;
}
::-webkit-scrollbar {
all: initial !important;
transition: var(--transition);
}
::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
all: initial !important;
}
::-webkit-scrollbar-track {
all: initial !important;
}
.hideme {
transform: translateX(-24px);
}
.sidebar {
padding: initial;
padding-inline: 36px;
transition: var(--transition);
/* flex: 0 0 272px; */
}
.sidebar-elems {
padding: initial;
}
.rightside {
padding: var(--code-padding);
}
.out-of-band > .srclink {
padding: initial;
}
a:hover {
text-decoration: underline;
transition: var(--transition);
}
:target {
transition: padding 200ms ease-in-out;
padding: 4px;
}
/* Sidebar resize handle styling - more subtle approach */
.sidebar-resizer {
background: transparent !important;
border-color: var(--border-color) !important;
color: var(--border-color) !important;
cursor: col-resize !important;
transition: var(--transition) !important;
opacity: 0.2 !important;
}
.sidebar-resizer:hover {
border-left-color: var(--accent-color) !important;
opacity: 1.0 !important;
}
.sidebar-resizer:active {
border-left-color: var(--accent-color) !important;
opacity: 1.0 !important;
}
.sidebar a {
color: color-mix(in srgb, var(--main-color) 40%, grey 90%);
transition: var(--transition);
}
.sidebar a:hover {
background-color: transparent !important;
color: var(--accent-color-strong);
transition: var(--transition);
}
.version {
color: var(--right-side-color);
}
.rightside {
padding: var(--code-padding);
}
.out-of-band > .srclink {
padding: initial;
}
/* Link styling */
a:hover {
text-decoration: underline;
transition: var(--transition);
}
/* Target highlighting */
:target {
transition: padding 200ms ease-in-out;
padding: 4px;
}
/* Search improvements */
.search-input {
font-family: var(--font-ui) !important;
transition: var(--transition);
border-radius: 3pt;
}
.search-input:focus {
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}
/* Button improvements */
button,
.button {
font-family: var(--font-ui) !important;
transition: var(--transition);
}
/* Responsive improvements */
@media (max-width: 768px) {
main {
max-width: 100%;
padding: 0 1rem;
}
.sidebar {
padding-inline: 16px;
}
h1 {
font-size: 1.875rem !important;
}
h2 {
font-size: 1.25rem !important;
}
}
/* Selection styling */
::selection {
background-color: var(--accent-color) !important;
color: white !important;
}
/* Focus improvements for accessibility */
*:focus-visible {
outline: 2px solid var(--accent-color) !important;
outline-offset: 2px !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment