Modern docs.rs by Odilf

/* ==UserStyle==
@name         Modern docs.rs
@version      20240407.12.15
@namespace    https://userstyles.world/user/Odilf
@description  Docs.rs, a bit more modern
@author       Odilf
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://docs.rs/") {
:root {
	--font-common: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
	--font-main: 'Atkinson Hyperlegible', var(--font-common) !important;
	--font-monospaced: 'Fira Code', monospace !important;

	--main-color: hsl(0, 3%, 85%) !important;
	--main-background-color: hsl(240, 4%, 14%) !important;

	--main-content-text-color: hsl(0, 3%, 75%) !important;
	--main-faded-text-color: hsl(0, 3%, 55%) !important;

	--accent-color: hsl(30, 50%, 54%) !important;
	--accent-color-strong: hsl(30, 80%, 54%) !important;

	--transition: all 100ms ease-in-out !important;

	--sidebar-background-color: hsl(0, 0%, 10%) !important;

	--code-block-background-color: hsl(0, 0%, 9%) !important;

	--headings-border-bottom-color: hsla(0, 0%, 82%, 0%) !important;

	--assoc-item-link-color: var(--accent-color) !important;
	
	--keyword-link-color: var(--accent-color) !important;
	--mod-link-color: var(--accent-color);
	--link-color: var(--accent-color) !important;
	--sidebar-link-color: var(--accent-color);
}

html {
	scroll-behavior: smooth !important;
	scroll-padding: 12px !important;
}

body {
	font-family: var(--font-main) !important;
	font-weight: 400 !important;
}

* {
	border-radius: 5px !important;
}

main {
	max-width: 840px !important;
	margin-inline: auto !important;
}

h1, h2, h3, h4, h5, h6 {
	/* font-family: var(--font-main) !important; */
	font-weight: 700 !important;
	padding: 0 !important;
}

.docblock {
	padding-bottom: 1px !important;
	color: var(--main-content-text-color) !important;
	margin-left: initial !important;
}

h2, h3 {
	font-size: medium !important;
}

.sidebar h2 {
	padding: 0 !important;
	font-size: 1.5em !important;
}

:root {
	--code-padding: 10px !important;
}

.structfield > code {
	display: block !important;
}

pre, a.test-arrow, .code-header, .structfield > code {
	font-family: var(--font-monospaced) !important;
	padding: var(--code-padding) !important;
	background-color: var(--code-block-background-color) !important;
}

.structfield {
	margin-block: 10px !important;
	width: 100% !important;
}

/* For some reason the summary thing need to be moved down 4px to look centered */
details.toggle > summary:not(.hideme)::before {
	transform: translateY(4px) !important;
}

details.toggle>summary:not(.hideme)::before, .rightside + .anchor, .structfield > .anchor, .impl > .anchor {
	top: var(--code-padding) !important;
}

::-webkit-scrollbar {
	all: initial !important;
}

::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
	all: initial !important;
}

::-webkit-scrollbar-track {
	all: initial !important;
}

.hideme {
	transform: translateX(-24px) !important;
}

.sidebar {
	padding: initial !important;
	padding-inline: 36px !important;
	flex: 0 0 272px !important;
}

.sidebar-elems {
	padding: initial !important;
}

.rightside {
	padding: var(--code-padding) !important;
}

.out-of-band > .srclink {
	padding: initial !important;
}

a:hover {
	text-decoration: underline !important;
}

:target {
	transition: padding 200ms ease-in-out !important;
	padding: 4px !important;
}

.sidebar a {
	color: var(--main-faded-text-color) !important;
	transition: var(--transition) !important;
}

.sidebar a:hover {
	background-color: transparent !important;
	color: var(--accent-color-strong) !important;
}

}