Files
uv/docs/stylesheets/extra.css
Zanie Blue 6930e033ff Update styles to support collapsible nav (#9095)
In preparation for adding collapsible sections, cleans up the CSS
styling we apply to the nav.

The differences here are very subtle without collapsible sections
enabled. Note these screenshots show an increase in the secondary nav
font size (table of contents) which I subsequently fixed.

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 49 PM"
src="https://github.com/user-attachments/assets/10ea345f-73d3-430c-a6f0-8448e2471b60">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 29 PM"
src="https://github.com/user-attachments/assets/6c1af159-1684-4d00-b33d-c0a88b5e0aa9">

However, with collapsible sections you can see the bugs we're addressing

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 48 19 PM"
src="https://github.com/user-attachments/assets/7902791f-6c4d-4c84-b366-ba9c4bd96214">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 47 30 PM"
src="https://github.com/user-attachments/assets/6e0c4c7c-4a41-4dd5-a9f1-beabff965dbb">
2024-11-15 17:00:23 -06:00

192 lines
5.5 KiB
CSS

:root {
--black: #261230;
--white: #ffffff;
--radiate: #d7ff64;
--flare: #6340ac;
--rock: #78876e;
--galaxy: #261230;
--space: #30173d;
--comet: #6f5d6f;
--cosmic: #de5fe9;
--sun: #ffac2f;
--electron: #46ebe1;
--aurora: #46eb74;
--constellation: #5f6de9;
--neutron: #cff3cf;
--proton: #f6afbc;
--nebula: #cdcbfb;
--supernova: #f1aff6;
--starlight: #f4f4f1;
--lunar: #fbf2fc;
--asteroid: #e3cee3;
--crater: #f0dfdf;
}
[data-md-color-scheme="astral-light"] {
--md-default-bg-color--dark: var(--black);
--md-primary-fg-color: var(--galaxy);
--md-typeset-a-color: var(--flare);
--md-accent-fg-color: var(--cosmic);
}
[data-md-color-scheme="astral-dark"] {
--md-default-bg-color: var(--galaxy);
--md-default-fg-color: var(--white);
--md-default-fg-color--light: var(--white);
--md-default-fg-color--lighter: var(--white);
--md-primary-fg-color: var(--space);
--md-primary-bg-color: var(--white);
--md-accent-fg-color: var(--cosmic);
--md-typeset-color: var(--white);
--md-typeset-a-color: var(--radiate);
--md-typeset-mark-color: var(--sun);
--md-code-fg-color: var(--white);
--md-code-bg-color: var(--space);
--md-code-hl-comment-color: var(--asteroid);
--md-code-hl-punctuation-color: var(--asteroid);
--md-code-hl-generic-color: var(--supernova);
--md-code-hl-variable-color: var(--starlight);
--md-code-hl-string-color: var(--radiate);
--md-code-hl-keyword-color: var(--supernova);
--md-code-hl-operator-color: var(--supernova);
--md-code-hl-number-color: var(--electron);
--md-code-hl-special-color: var(--electron);
--md-code-hl-function-color: var(--neutron);
--md-code-hl-constant-color: var(--radiate);
--md-code-hl-name-color: var(--md-code-fg-color);
--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
--md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
--md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);
}
[data-md-color-scheme="astral-light"] img[src$="#only-dark"],
[data-md-color-scheme="astral-light"] img[src$="#gh-dark-mode-only"] {
display: none; /* Hide dark images in light mode */
}
[data-md-color-scheme="astral-light"] img[src$="#only-light"],
[data-md-color-scheme="astral-light"] img[src$="#gh-light-mode-only"] {
display: inline; /* Show light images in light mode */
}
[data-md-color-scheme="astral-dark"] img[src$="#only-light"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-light-mode-only"] {
display: none; /* Hide light images in dark mode */
}
[data-md-color-scheme="astral-dark"] img[src$="#only-dark"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-dark-mode-only"] {
display: inline; /* Show dark images in dark mode */
}
/* See: https://github.com/squidfunk/mkdocs-material/issues/175#issuecomment-616694465 */
.md-typeset__table {
min-width: 100%;
}
.md-typeset table:not([class]) {
display: table;
}
/* See: https://github.com/astral-sh/ruff/issues/8519 */
[data-md-color-scheme="astral-dark"] details summary a {
color: var(--flare);
}
/* See: https://github.com/astral-sh/ruff/issues/9046 */
[data-md-color-scheme="astral-dark"] div.admonition {
color: var(--md-code-fg-color);
background-color: var(--md-code-bg-color);
}
/* Prevent the shadow from the nav title from blurring the top link.
The box shadow isn't really doing anything anyway.
This is a consequence of the reduced nav spacing below. */
.md-nav--primary .md-nav__title {
box-shadow: none;
}
/* Omits the nav title "uv" entirely unless on a small screen, in which case
the nav title is needed for backwards navigation in the collapsible
nav variant.
See https://github.com/astral-sh/uv/issues/5130 */
@media screen and (min-width: 76.25em) {
.md-nav__title {
display: none;
}
}
/* Tweak the formatting of the primary nav on a large screen */
@media screen and (min-width: 76.25em) {
.md-nav--primary .md-nav {
font-size: 0.75rem;
}
/* Remove the bold from the section headings, use a larger font instead */
.md-nav__item--section > .md-nav__link {
font-weight: normal;
font-size: 0.85rem;
}
/* Reducing spacing between nav items to fit more content
First, disable `nav__link` spacing then use `nav__item` to enforce margins this reduces inconsistencies in the spacing. */
.md-nav--primary .md-nav__link {
margin: 0;
}
.md-nav--primary .md-nav__item {
margin-top: 0.35em;
}
/* Use larger spacing for the sections headings */
.md-nav--primary .md-nav__item--section {
margin-bottom: 0.75em;
margin-top: 1em;
}
/* Increase the size of the first nav item to match the sections
It has no children, so it is not considered a section */
.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
font-size: 0.85rem;
margin-bottom: 0.75em;
}
}
/* Bold the active nav link for accessibility */
.md-nav__link--active {
font-weight: bold;
}
/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
user-select: none;
}
/* Styling for the generated CLI reference page */
.cli-reference dd {
margin-top: 0.1em;
margin-bottom: 0.5em;
}
.cli-reference dd p {
margin-block-start: 0.2em;
margin-block-end: 0.3em;
}
.cli-reference ul {
margin-bottom: 0.1em;
}
h3.cli-reference {
font-size: 1.1em;
margin: 0 0 0 0;
}
/* Styling for anchor link headers */
.toclink {
color: unset !important;
}
.toclink:hover {
color: var(--md-accent-fg-color) !important;
}