You've already forked pgbackrest
mirror of
https://github.com/pgbackrest/pgbackrest.git
synced 2026-10-23 21:28:56 +03:00
050ca9e354
Release items from 2.60 on put the paragraphs after the first and the links to their issues, pull requests, and commits in a details element that is closed by default. The toggle is drawn in place of the bullet: a plus when the details have text and a chevron when they have only links. An item with more than one commit has a line for each commit with its subject. A button on each release opens or closes all of its details. Older releases still join extra paragraphs into one line. The version pattern for bug fix releases also matched x.y.0, so the commits of a release reached back to v2.53, and 2.54.0 through 2.59.0 were only checked while each was the most recent release. A bug fix release is now x.y.z with z > 0, so a release keeps its commit links after a newer release is added. The 2.55.0 PostgreSQL 18 item now has a commit element because the note was reworded after the commit. The GCS Workload Identity Federation item now has a commit element because its text does not match the commit subject.
1454 lines
39 KiB
CSS
1454 lines
39 KiB
CSS
/***********************************************************************************************************************************
|
|
Documentation Style
|
|
|
|
Every color is a token declared once and declared again for a dark page, so light and dark are one design rather than one being a
|
|
patch on the other. A rule that names a color directly steps outside that, since only the tokens are redeclared.
|
|
|
|
The page header and the menu run the full width of the window while their content stays in the reading column, and the menu sticks
|
|
to the top of the viewport so the way out of a long page is always in reach. A section is marked by a bar that thins as the level
|
|
drops, so depth is read from the bar rather than from the size of the type.
|
|
***********************************************************************************************************************************/
|
|
|
|
/***********************************************************************************************************************************
|
|
Tokens
|
|
***********************************************************************************************************************************/
|
|
:root
|
|
{
|
|
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
|
|
/* The page is this wide and centered, until the window is too narrow for it and the gutter falls back to its minimum */
|
|
--page-width: 69rem;
|
|
--gutter: max(1.25rem, calc((100% - var(--page-width)) / 2));
|
|
--radius: 6px;
|
|
--radius-lg: 10px;
|
|
--bar-height: 3rem;
|
|
|
|
/* The contents beside the text. At the width of the page the column and the gap add up to the space the bar above them leaves
|
|
over, and it gives the column back as the window narrows so the text keeps a reasonable measure. */
|
|
--sidebar-width: clamp(13rem, 20vw, 17rem);
|
|
--sidebar-gap: 1.5rem;
|
|
|
|
/* The icon a button is drawn with, declared here rather than drawn in the page, which would carry one for every button it has.
|
|
Each is drawn as a mask, so the color it is drawn in is the color of the button rather than a color of its own, and the color
|
|
in it is only there to say what the mask covers. A linefeed inside one is escaped so that the file keeps its width, and what
|
|
that leaves behind is space between attributes, which is nothing. */
|
|
--icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'\
|
|
stroke='black' stroke-width='2'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M6 15H5a2 2 0 0 1-2-2V5a2\
|
|
2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
|
|
--icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'\
|
|
stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20\
|
|
7'/%3E%3C/svg%3E");
|
|
|
|
|
|
--bg: #ffffff;
|
|
--bg-surface: #f7f9fb;
|
|
--bg-surface-2: #eef2f6;
|
|
--bg-bar: #ffffff;
|
|
--text: #0f172a;
|
|
--text-muted: #55637a;
|
|
--border: #e3e8ef;
|
|
--border-strong: #cbd4e1;
|
|
|
|
/* The end of a menu that carries on past the window: the color of the rules the bar is drawn with against a light bar, and a
|
|
shade inside them against a dark bar, where the same step away from the bar reads harder. The band holds this color across a
|
|
fifth of its width before it gives out, and that is what carries it, so a color picked to carry on its own is too much. */
|
|
--menu-edge: var(--border);
|
|
|
|
--accent: #0d5f9e;
|
|
--accent-hover: #0a4a7c;
|
|
--accent-soft: #e8f1f9;
|
|
|
|
--code-bg: #1b2330;
|
|
--code-text: #e2e8f0;
|
|
--code-border: #2a3441;
|
|
--code-output-bg: #263141;
|
|
--code-prompt: #6aa9e0;
|
|
--code-highlight-bg: #1d6b33;
|
|
--code-error-bg: #9c3030;
|
|
|
|
--note-accent: #2f74b5;
|
|
--note-bg: #eef5fb;
|
|
--tip-accent: #2f8f4e;
|
|
--tip-bg: #edf7f0;
|
|
--important-accent: #7c56b8;
|
|
--important-bg: #f3effa;
|
|
--caution-accent: #b07d16;
|
|
--caution-bg: #fbf5e6;
|
|
--warning-accent: #bf3d3d;
|
|
--warning-bg: #fdeeee;
|
|
|
|
--shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
{
|
|
:root
|
|
{
|
|
--bg: #0b0f15;
|
|
--bg-surface: #121923;
|
|
--bg-surface-2: #18212e;
|
|
--bg-bar: #0e141c;
|
|
--text: #e2e8f0;
|
|
--text-muted: #94a3b8;
|
|
--border: #1f2937;
|
|
--border-strong: #334155;
|
|
--menu-edge: #1d2634;
|
|
|
|
--accent: #64a8ef;
|
|
--accent-hover: #8fc3f5;
|
|
--accent-soft: #12233a;
|
|
|
|
--code-bg: #060a0f;
|
|
--code-text: #e2e8f0;
|
|
--code-border: #1c2531;
|
|
--code-output-bg: #121a24;
|
|
--code-prompt: #64a8ef;
|
|
--code-highlight-bg: #1c5c2c;
|
|
--code-error-bg: #8c2f2f;
|
|
|
|
--note-accent: #64a8ef;
|
|
--note-bg: #101c2b;
|
|
--tip-accent: #4fb974;
|
|
--tip-bg: #0f2216;
|
|
--important-accent: #a98be0;
|
|
--important-bg: #1c172c;
|
|
--caution-accent: #d3a13c;
|
|
--caution-bg: #241c10;
|
|
--warning-accent: #e57676;
|
|
--warning-bg: #291616;
|
|
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, .4);
|
|
}
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Html and body
|
|
***********************************************************************************************************************************/
|
|
html
|
|
{
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body
|
|
{
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
font-weight: 400;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.page-header, .page-toc, .page-body, .page-footer, .menu-body
|
|
{
|
|
padding-left: var(--gutter);
|
|
padding-right: var(--gutter);
|
|
}
|
|
|
|
a:link, a:visited
|
|
{
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:active
|
|
{
|
|
color: var(--accent-hover);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.section-body-text a:link, .section-body-text a:visited, .section-intro a:link, .section-intro a:visited,
|
|
li.list-unordered a:link, li.list-unordered a:visited
|
|
{
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
text-decoration-thickness: 1px;
|
|
text-decoration-color: var(--border-strong);
|
|
}
|
|
|
|
.section-body-text a:hover, .section-intro a:hover, li.list-unordered a:hover
|
|
{
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
/* Leave room under the sticky bar when a link jumps to a section */
|
|
a[id]
|
|
{
|
|
scroll-margin-top: calc(var(--bar-height) + 1rem);
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Header
|
|
***********************************************************************************************************************************/
|
|
.page-header
|
|
{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
/* Only there when the title does not fit beside the name, and kept tight because a window that narrow has none to spare */
|
|
row-gap: .425rem;
|
|
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* The mark and the name together, drawn as itself rather than masked, so it keeps the colors it was drawn with and the ones it
|
|
was drawn with for a dark page. Only the height is set, and the ratio below is the viewBox of the file it draws. */
|
|
.page-header-logo
|
|
{
|
|
flex: none;
|
|
height: 3.5rem;
|
|
aspect-ratio: 383.2 / 101.3;
|
|
background-image: url("slogo.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* The logo says the name, so the heading is left for what reads the page rather than what looks at it, and so is the name the logo
|
|
holds, which is what the logo says to a reader who cannot see it */
|
|
.page-header-title, .page-header-logo-name
|
|
{
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* What the page is sits in what the name leaves over, centered there by the space either side of it. The space before it is also
|
|
what holds it off the name, and the space after it asks for no room of its own, so a line too narrow to hold the title beside
|
|
the name breaks before the title rather than after it, which leaves the title at the start of a line rather than centered on
|
|
one. */
|
|
.page-header::before, .page-header::after
|
|
{
|
|
content: "";
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.page-header::before
|
|
{
|
|
order: 1;
|
|
flex-basis: .85rem;
|
|
}
|
|
|
|
.page-header-subtitle
|
|
{
|
|
order: 2;
|
|
color: var(--text-muted);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.page-header::after
|
|
{
|
|
order: 3;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Menu
|
|
***********************************************************************************************************************************/
|
|
.page-menu
|
|
{
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-bar);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* The bar keeps its height however many pages are in the menu, so a menu wider than the window scrolls sideways rather than
|
|
wrapping into rows the height would cut off. It is centered by the margins at its ends rather than by the bar, since a centered
|
|
row that overflows hangs out both ends and the start of it is past where the scroll can reach. */
|
|
.menu-body
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.75rem;
|
|
height: var(--bar-height);
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-strong) transparent;
|
|
}
|
|
|
|
/* An end the menu carries on past fades out rather than stopping flat, since a phone draws the scrollbar only while a finger is on
|
|
it and at rest nothing else says there is more menu than the window is showing. Drawn over the bar rather than cut out of the
|
|
menu, since a cutout is measured against everything the menu can be scrolled to rather than against the part of it the window is
|
|
showing, which lands the fade somewhere off the side of the window. Drawn in a color of its own rather than in the color of the
|
|
bar, since where the menu breaks between one page and the next there is no text beneath the fade for it to take, and a fade in
|
|
the color of the bar would be a fade over nothing. It holds that color across the near third of its width before it gives out,
|
|
since a fade at full color in nothing but its last pixel is hardly a fade at all. Drawn inside the rules the bar is drawn with,
|
|
so those run the full width whichever end is fading. Which ends fade only a measurement can say, so the script says it. */
|
|
.page-menu::before, .page-menu::after
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-menu::before
|
|
{
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--menu-edge) 20%, transparent);
|
|
}
|
|
|
|
.page-menu::after
|
|
{
|
|
right: 0;
|
|
background: linear-gradient(to left, var(--menu-edge) 20%, transparent);
|
|
}
|
|
|
|
.page-menu-fade-left::before, .page-menu-fade-right::after
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.menu:first-child
|
|
{
|
|
margin-left: auto;
|
|
}
|
|
|
|
.menu:last-child
|
|
{
|
|
margin-right: auto;
|
|
}
|
|
|
|
.menu
|
|
{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
a.menu-link:link, a.menu-link:visited, .menu-current
|
|
{
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: .9375rem;
|
|
font-weight: 550;
|
|
letter-spacing: -.005em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.menu-link:hover, a.menu-link:active
|
|
{
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* The page a reader is on, marked by full-strength text and a rule in the accent color so it reads as where they are rather than
|
|
as somewhere to go */
|
|
.menu-current
|
|
{
|
|
color: var(--text);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--accent);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: .5em;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Table of Contents
|
|
***********************************************************************************************************************************/
|
|
.page-toc
|
|
{
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-toc-header
|
|
{
|
|
margin-bottom: .75rem;
|
|
color: var(--text-muted);
|
|
font-size: .8125rem;
|
|
font-weight: 700;
|
|
letter-spacing: .09em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-toc-body
|
|
{
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-surface);
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
.section1-toc
|
|
{
|
|
margin-top: .9rem;
|
|
}
|
|
|
|
.section1-toc:first-of-type
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.section1-toc-title
|
|
{
|
|
font-size: 1.0625rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.section2-toc
|
|
{
|
|
margin-top: .1rem;
|
|
margin-left: 1.1rem;
|
|
}
|
|
|
|
.section3-toc
|
|
{
|
|
margin-left: 1.1rem;
|
|
}
|
|
|
|
.page-toc a:link, .page-toc a:visited
|
|
{
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-toc a.toc-active:link, .page-toc a.toc-active:visited
|
|
{
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-toc a.toc-active-parent:link, .page-toc a.toc-active-parent:visited
|
|
{
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-toc a:hover, .page-toc a:active
|
|
{
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Contents Beside the Text
|
|
|
|
Given a window wide enough for a column of its own, the contents leave the flow and sit beside the text, where they stay in view
|
|
while the page scrolls. Narrower than that they stay above the text, which is the only place a small screen has room for them.
|
|
|
|
The width that decides this is the narrowest one that still leaves the text a readable measure once the contents have taken their
|
|
column, which is well under a full screen: a window at three quarters of a laptop screen is a normal way to read a page.
|
|
***********************************************************************************************************************************/
|
|
@media (min-width: 56rem)
|
|
{
|
|
body.page-sidebar
|
|
{
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
|
column-gap: var(--sidebar-gap);
|
|
padding-left: var(--gutter);
|
|
padding-right: var(--gutter);
|
|
}
|
|
|
|
body.page-sidebar > .page-header, body.page-sidebar > .page-menu, body.page-sidebar > .page-footer
|
|
{
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* The bar is drawn across the window, so it reaches back out through the padding the grid is inset by */
|
|
body.page-sidebar > .page-menu
|
|
{
|
|
margin-left: calc(var(--gutter) * -1);
|
|
margin-right: calc(var(--gutter) * -1);
|
|
}
|
|
|
|
/* The grid holds the page off the edge of the window now, so nothing inside it holds itself off as well */
|
|
body.page-sidebar > .page-header, body.page-sidebar > .page-toc, body.page-sidebar > .page-body,
|
|
body.page-sidebar > .page-footer
|
|
{
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* The column is as tall as the text beside it, which is what stops what sticks inside it short of the footer, so it ends
|
|
where the text ends rather than short of it */
|
|
body.page-sidebar > .page-toc
|
|
{
|
|
grid-column: 1;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
font-size: .875rem;
|
|
}
|
|
|
|
/* A column of section links beside the text says what it is by sitting there, so it is not told as well */
|
|
.page-toc-header
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
body.page-sidebar > .page-toc > .page-toc-inner
|
|
{
|
|
position: sticky;
|
|
top: var(--bar-height);
|
|
max-height: calc(100vh - var(--bar-height));
|
|
padding-right: .5rem;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
body.page-sidebar > .page-body
|
|
{
|
|
grid-column: 2;
|
|
}
|
|
|
|
/* A column this narrow has no room for a card, so the contents are set apart by the space around them instead */
|
|
body.page-sidebar .page-toc-body
|
|
{
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.page-toc .section1-toc, .page-toc .section2-toc, .page-toc .section3-toc
|
|
{
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.page-toc .section1-toc
|
|
{
|
|
margin-top: .7rem;
|
|
}
|
|
|
|
.page-toc .section1-toc:first-of-type
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.page-toc .section2-toc, .page-toc .section3-toc
|
|
{
|
|
margin-top: .25rem;
|
|
margin-left: .9rem;
|
|
}
|
|
|
|
.page-toc .section1-toc-title
|
|
{
|
|
font-size: .9375rem;
|
|
}
|
|
|
|
/* A keyword in a title is set in the same box as one in the text, which is more furniture than a column this narrow can hold */
|
|
.page-toc .path, .page-toc .br-option, .page-toc .br-setting, .page-toc .pg-option, .page-toc .pg-setting, .page-toc .id,
|
|
.page-toc .user, .page-toc .file
|
|
{
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Section
|
|
***********************************************************************************************************************************/
|
|
.section1
|
|
{
|
|
margin-top: 1.75rem;
|
|
}
|
|
|
|
.section1:first-of-type
|
|
{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Each level is marked by a bar that thins as the level drops, so depth is read from the bar rather than from type size */
|
|
.section1-header
|
|
{
|
|
border-left: 4px solid var(--accent);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
background: var(--bg-surface-2);
|
|
padding: .45rem .85rem;
|
|
margin-bottom: .9rem;
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
letter-spacing: -.022em;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.section2
|
|
{
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
/* The accent that marks the left edge of the bar above laid under the title, so the header is closed off by a rule of its own
|
|
rather than by an edge it shares with the level above. The rule runs the width of the title and no further, and a title too long
|
|
for the column wraps and takes the rule out to the full width, which is as far as it can go. */
|
|
.section2-header
|
|
{
|
|
width: fit-content;
|
|
border-bottom: 1.5px solid var(--accent);
|
|
padding: 0 0 .35rem 0;
|
|
margin-bottom: .7rem;
|
|
font-size: 1.3125rem;
|
|
font-weight: 650;
|
|
letter-spacing: -.015em;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.section3
|
|
{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.section3-header
|
|
{
|
|
border-left: 2px solid var(--border-strong);
|
|
padding: 0 0 0 .7rem;
|
|
margin-bottom: .35rem;
|
|
font-size: 1.0625rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.section1-subtitle, .section2-subtitle, .section3-subtitle
|
|
{
|
|
margin-top: 1.5rem;
|
|
font-size: 1.0625rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
/* The date sits right under the title of the release so the two read as one block rather than as separate lines */
|
|
.section1-subsubtitle, .section2-subsubtitle, .section3-subsubtitle
|
|
{
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.section-intro
|
|
{
|
|
margin-top: .85rem;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Section Set Aside
|
|
|
|
A section set aside runs down the side of the page with the text beside it, and the text returns to the full width of the page once
|
|
the aside ends rather than being held narrow the whole way down. Only a float does that, which is why one is worth its trouble
|
|
here: a block with a background of its own runs under a float rather than beside it unless it is told to lay itself out.
|
|
***********************************************************************************************************************************/
|
|
/* Too narrow to sit beside the text, so it goes back to where the document had it. The page is written with the aside first,
|
|
since that is the only way the text can run beside it, and the order here undoes that: what came before it stays put, then the
|
|
aside, then what came after. */
|
|
.page-body:has(> .section-aside)
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-aside
|
|
{
|
|
order: 1;
|
|
}
|
|
|
|
.section-after-aside
|
|
{
|
|
order: 2;
|
|
}
|
|
|
|
@media (min-width: 56rem)
|
|
{
|
|
.section-aside
|
|
{
|
|
float: right;
|
|
width: 17rem;
|
|
margin-left: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Set to the size of a column rather than the size of the page. Below this width the aside is a section like any other and
|
|
reads as one, so it keeps the type every other section has. */
|
|
.section-aside .section1-header
|
|
{
|
|
border-left-width: 3px;
|
|
padding: .3rem .7rem;
|
|
margin-bottom: .5rem;
|
|
font-size: 1.1875rem;
|
|
}
|
|
|
|
.section-aside .section-body-text
|
|
{
|
|
margin-top: .6rem;
|
|
font-size: .875rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* The text beside the aside starts level with it rather than where a second section would start */
|
|
.section-aside + .section1
|
|
{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* A column this narrow has room for one at a time */
|
|
.section-aside .sponsor-list
|
|
{
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 1.25rem;
|
|
padding: 1.25rem 1rem;
|
|
margin: .75rem 0;
|
|
}
|
|
|
|
/* These carry a background or a rule, so they lay themselves out beside the aside instead of running under it. A table, a
|
|
grid, a flex container and a pre that scrolls all do this already and are left alone. */
|
|
.section1-header, .section2-header, .section3-header, .execute-title, .execute-body, .config-title, .config-body
|
|
{
|
|
display: flow-root;
|
|
}
|
|
|
|
/* Back in the run of the page, which also holds its own floats so a tall aside cannot reach past the text into the footer */
|
|
.page-body:has(> .section-aside)
|
|
{
|
|
display: flow-root;
|
|
}
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Body text and lists
|
|
***********************************************************************************************************************************/
|
|
.section-body-text
|
|
{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.section-body-text:first-of-type
|
|
{
|
|
margin-top: .85rem;
|
|
}
|
|
|
|
ul.list-unordered
|
|
{
|
|
margin: .85rem 0 0 0;
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
li.list-unordered
|
|
{
|
|
margin-top: .45rem;
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
li.list-unordered::marker
|
|
{
|
|
color: var(--accent);
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
List Details
|
|
|
|
An item with details has a toggle in place of the bullet. The toggle is a plus when the details have text and a chevron when they
|
|
have only links.
|
|
***********************************************************************************************************************************/
|
|
li.list-unordered:has(> .list-detail)
|
|
{
|
|
position: relative;
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* The toggle fills the space the bullet is drawn in, level with the first line of the item */
|
|
.list-detail-toggle
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: -1.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.3rem;
|
|
height: 1.7em;
|
|
border-radius: var(--radius);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.list-detail-toggle::-webkit-details-marker
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.list-detail-toggle:hover
|
|
{
|
|
background-color: var(--accent-soft);
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
.list-detail-toggle:focus-visible
|
|
{
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* A chevron that points right when closed and down when open */
|
|
.list-detail-toggle::before
|
|
{
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-right: 1.5px solid currentColor;
|
|
border-bottom: 1.5px solid currentColor;
|
|
transform: translateX(-1px) rotate(-45deg);
|
|
}
|
|
|
|
.list-detail[open] > .list-detail-toggle::before
|
|
{
|
|
transform: translateY(-2px) rotate(45deg);
|
|
}
|
|
|
|
/* A plus that is a minus when open */
|
|
.list-detail:has(> .list-detail-text) > .list-detail-toggle
|
|
{
|
|
color: var(--accent);
|
|
}
|
|
|
|
.list-detail:has(> .list-detail-text) > .list-detail-toggle::before
|
|
{
|
|
width: 10px;
|
|
height: 10px;
|
|
border: none;
|
|
background:
|
|
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
|
|
linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
|
|
transform: none;
|
|
}
|
|
|
|
.list-detail[open]:has(> .list-detail-text) > .list-detail-toggle::before
|
|
{
|
|
background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
|
|
}
|
|
|
|
.list-detail[open]
|
|
{
|
|
margin: .35rem 0 .25rem 0;
|
|
border-left: 2px solid var(--border);
|
|
padding-left: .75rem;
|
|
}
|
|
|
|
.list-detail-text + .list-detail-text
|
|
{
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.list-detail-text + .list-detail-ref
|
|
{
|
|
margin-top: .4rem;
|
|
}
|
|
|
|
.list-detail-ref
|
|
{
|
|
color: var(--text-muted);
|
|
font-size: .875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* A dot between the links on a line */
|
|
.list-detail-ref-item + .list-detail-ref-item::before
|
|
{
|
|
content: "\00b7";
|
|
margin: 0 .45em;
|
|
}
|
|
|
|
/* The hash of a commit is drawn in the code font without the box of a keyword */
|
|
.list-detail-ref .id
|
|
{
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font-size: .9375em;
|
|
}
|
|
|
|
/* The button that opens or closes every details of a section, which the script adds */
|
|
.list-detail-all
|
|
{
|
|
display: block;
|
|
margin-top: .5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background-color: var(--bg-surface);
|
|
padding: .1rem .65rem;
|
|
color: var(--text-muted);
|
|
font-family: inherit;
|
|
font-size: .8125rem;
|
|
line-height: 1.6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list-detail-all:hover
|
|
{
|
|
border-color: var(--border-strong);
|
|
color: var(--text);
|
|
}
|
|
|
|
.list-detail-all:focus-visible
|
|
{
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Table Elements
|
|
***********************************************************************************************************************************/
|
|
.table
|
|
{
|
|
width: 100%;
|
|
margin-top: 1.25rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
border-spacing: 0;
|
|
overflow: hidden;
|
|
font-size: .9375rem;
|
|
}
|
|
|
|
.table-caption
|
|
{
|
|
margin-bottom: .5rem;
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.table-header-row
|
|
{
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.table-header-left, .table-header-center, .table-header-right
|
|
{
|
|
border-bottom: 1px solid var(--border);
|
|
padding: .5rem .85rem;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.table-header-left
|
|
{
|
|
text-align: left;
|
|
}
|
|
|
|
.table-header-center
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
.table-header-right
|
|
{
|
|
text-align: right;
|
|
}
|
|
|
|
.table-header-fill
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.table-row:nth-child(even)
|
|
{
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.table-data-left, .table-data-center, .table-data-right
|
|
{
|
|
padding: .4rem .85rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-data-left
|
|
{
|
|
text-align: left;
|
|
}
|
|
|
|
.table-data-center
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
.table-data-right
|
|
{
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Config, Execute, Code Block
|
|
***********************************************************************************************************************************/
|
|
.execute, .config, .code-block
|
|
{
|
|
margin: 1.25rem 0 1.5rem 0;
|
|
}
|
|
|
|
/* Not a flex container: the title mixes text and spans, and flex would make an item of every text run and space them apart */
|
|
.execute-title, .config-title
|
|
{
|
|
border: 1px solid var(--code-border);
|
|
border-bottom: none;
|
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
background: var(--code-output-bg);
|
|
padding: .4rem .9rem;
|
|
color: var(--code-text);
|
|
font-size: .8125rem;
|
|
}
|
|
|
|
.execute-title .host, .config-title .host, .config-title .file
|
|
{
|
|
color: var(--code-prompt);
|
|
}
|
|
|
|
/* The button that hands over what a block is showing. It is hidden until the script that makes it work has run, and it sits at the
|
|
end of what it copies rather than over it, so it covers nothing a reader is reading. */
|
|
.code-copy
|
|
{
|
|
display: none;
|
|
flex: none;
|
|
margin-left: .6rem;
|
|
border: 1px solid var(--code-border);
|
|
border-radius: var(--radius);
|
|
background-color: var(--code-bg);
|
|
padding: .15rem .3rem;
|
|
color: var(--code-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* A button shown wherever one could be used would be a column of buttons down a page of commands, so it is shown where the reader
|
|
is: over the block it copies, or under the focus of a reader working the page from the keyboard. It is faded rather than hidden
|
|
so that showing it moves nothing, and it is always shown where there is no pointer to hover with. */
|
|
.code-copy-ready
|
|
{
|
|
display: block;
|
|
opacity: 0;
|
|
transition: opacity .15s ease;
|
|
}
|
|
|
|
.execute-body-cmd:hover .code-copy-ready, .config:hover .code-copy-ready, .code-copy-ready:focus-visible
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: none)
|
|
{
|
|
.code-copy-ready
|
|
{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.code-copy:hover
|
|
{
|
|
border-color: var(--border-strong);
|
|
background-color: var(--code-border);
|
|
}
|
|
|
|
.code-copy:before
|
|
{
|
|
content: "";
|
|
display: block;
|
|
width: .9rem;
|
|
height: .9rem;
|
|
background-color: currentColor;
|
|
-webkit-mask: var(--icon-copy) no-repeat center / contain;
|
|
mask: var(--icon-copy) no-repeat center / contain;
|
|
}
|
|
|
|
/* What the button says it did, which is a tick where what it copied was copied and the color of a warning where a browser refused.
|
|
A button saying either stays in view for as long as it says it, so a reader who has moved the pointer on still sees it. */
|
|
.code-copy-done
|
|
{
|
|
opacity: 1;
|
|
color: var(--tip-accent);
|
|
}
|
|
|
|
.code-copy-done:before
|
|
{
|
|
-webkit-mask-image: var(--icon-tick);
|
|
mask-image: var(--icon-tick);
|
|
}
|
|
|
|
.code-copy-fail
|
|
{
|
|
opacity: 1;
|
|
border-color: var(--warning-accent);
|
|
color: var(--warning-accent);
|
|
}
|
|
|
|
/* The title of a config file holds the button that copies the file, which floats to the end of it so that the title wraps around
|
|
the button rather than under it */
|
|
.config-title
|
|
{
|
|
display: flow-root;
|
|
}
|
|
|
|
.config-title .code-copy
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
.execute-body, .config-body, .code-block
|
|
{
|
|
border: 1px solid var(--code-border);
|
|
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
background-color: var(--code-bg);
|
|
padding: .7rem 0;
|
|
color: var(--code-text);
|
|
font-family: var(--font-mono);
|
|
font-size: .8125rem;
|
|
line-height: 1.6;
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
.code-block
|
|
{
|
|
border-radius: var(--radius-lg);
|
|
padding: .7rem .9rem;
|
|
}
|
|
|
|
/* A command, its output, and a config file are shown as they were written and scroll sideways when they do not fit, since a line
|
|
broken to fit is harder to read and copies back as something that was never typed. What a command wrote and what is in a config
|
|
file each scroll as one block rather than a line at a time, so that a line stays with the lines it is read against. */
|
|
pre, .execute-body-output, .config-body-output
|
|
{
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--code-border) transparent;
|
|
}
|
|
|
|
/* Would rather not use pre at all, but Firefox won't copy code samples correctly without it */
|
|
pre
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* A command and the button that copies it sit on one row, so a command too wide to fit scrolls in what the button leaves rather
|
|
than under it */
|
|
.execute-body-cmd
|
|
{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-right: .9rem;
|
|
}
|
|
|
|
.execute-cmd
|
|
{
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: .1rem .9rem;
|
|
}
|
|
|
|
.execute-cmd:before
|
|
{
|
|
content: "$ ";
|
|
color: var(--code-prompt);
|
|
}
|
|
|
|
.execute-body-output, .config-body-output
|
|
{
|
|
margin: .4rem .9rem;
|
|
border-radius: var(--radius);
|
|
background-color: var(--code-output-bg);
|
|
padding: .35rem .7rem;
|
|
}
|
|
|
|
/* The lines of a block are as wide as the widest of them, so that a line that is marked is marked across the whole block rather
|
|
than across the part of it that is in view, and as wide as the block when every line fits in it */
|
|
.execute-line-list, .config-line-list
|
|
{
|
|
width: max-content;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.execute-line, .execute-line-highlight, .execute-line-highlight-error, .config-line, .config-line-add, .config-line-remove
|
|
{
|
|
/* A line scrolls with the block rather than on its own, since the block is read down the lines and a line that carried its own
|
|
scroll would take the reader across one line at a time */
|
|
overflow-x: visible;
|
|
|
|
/* The line reaches into the padding of the block so that a line that is marked is marked to the edge of it */
|
|
margin: 0 -.7rem;
|
|
padding: 0 .7rem;
|
|
}
|
|
|
|
/* What a command wrote is marked where it is what the documentation is pointing at, and marked as an error where the command was
|
|
expected to fail */
|
|
.execute-line-highlight
|
|
{
|
|
background-color: var(--code-highlight-bg);
|
|
}
|
|
|
|
.execute-line-highlight-error
|
|
{
|
|
background-color: var(--code-error-bg);
|
|
}
|
|
|
|
/* A config file is shown in full every time it changes, so each line says what the change did to it, marked the way the output of a
|
|
command is marked. The mark is written by the style rather than into the line so that what a reader copies out of the file is the
|
|
file. */
|
|
.config-line:before
|
|
{
|
|
content: " ";
|
|
}
|
|
|
|
.config-line-add
|
|
{
|
|
background-color: var(--code-highlight-bg);
|
|
}
|
|
|
|
.config-line-add:before
|
|
{
|
|
content: "+ ";
|
|
}
|
|
|
|
.config-line-remove
|
|
{
|
|
background-color: var(--code-error-bg);
|
|
}
|
|
|
|
.config-line-remove:before
|
|
{
|
|
content: "- ";
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Admonition
|
|
***********************************************************************************************************************************/
|
|
.admonition
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .15rem;
|
|
border: 1px solid var(--note-accent);
|
|
border-left-width: 4px;
|
|
border-radius: var(--radius);
|
|
background-color: var(--note-bg);
|
|
padding: .75rem 1rem;
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.admonition > .note, .admonition > .warning, .admonition > .caution, .admonition > .important, .admonition > .tip
|
|
{
|
|
float: none;
|
|
color: var(--note-accent);
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.admonition > .note-text, .admonition > .warning-text, .admonition > .caution-text, .admonition > .important-text,
|
|
.admonition > .tip-text
|
|
{
|
|
overflow: visible;
|
|
min-width: 0;
|
|
}
|
|
|
|
.admonition:has(> .tip)
|
|
{
|
|
border-color: var(--tip-accent);
|
|
background-color: var(--tip-bg);
|
|
}
|
|
|
|
.admonition:has(> .tip) > .tip
|
|
{
|
|
color: var(--tip-accent);
|
|
}
|
|
|
|
.admonition:has(> .important)
|
|
{
|
|
border-color: var(--important-accent);
|
|
background-color: var(--important-bg);
|
|
}
|
|
|
|
.admonition:has(> .important) > .important
|
|
{
|
|
color: var(--important-accent);
|
|
}
|
|
|
|
.admonition:has(> .caution)
|
|
{
|
|
border-color: var(--caution-accent);
|
|
background-color: var(--caution-bg);
|
|
}
|
|
|
|
.admonition:has(> .caution) > .caution
|
|
{
|
|
color: var(--caution-accent);
|
|
}
|
|
|
|
.admonition:has(> .warning)
|
|
{
|
|
border-color: var(--warning-accent);
|
|
background-color: var(--warning-bg);
|
|
}
|
|
|
|
.admonition:has(> .warning) > .warning
|
|
{
|
|
color: var(--warning-accent);
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Sponsor
|
|
***********************************************************************************************************************************/
|
|
.sponsor-list
|
|
{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 1.75rem 2rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-surface);
|
|
padding: 2rem 1.5rem;
|
|
margin: 1.75rem 0;
|
|
}
|
|
|
|
.sponsor
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
.sponsor a
|
|
{
|
|
display: inline-block;
|
|
opacity: .78;
|
|
transition: opacity .15s ease;
|
|
}
|
|
|
|
.sponsor a:hover
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.sponsor-img
|
|
{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.sponsor-img-dark
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
{
|
|
.sponsor-img-light
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.sponsor-img-dark
|
|
{
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Keywords
|
|
***********************************************************************************************************************************/
|
|
.backrest, .cmd, .postgres, .host, .proper
|
|
{
|
|
font-weight: 600;
|
|
}
|
|
|
|
.path, .br-option, .br-setting, .pg-option, .pg-setting, .id, .user, .file
|
|
{
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background-color: var(--bg-surface-2);
|
|
padding: .05em .35em;
|
|
font-family: var(--font-mono);
|
|
font-size: .8125em;
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
.path, .br-option, .br-setting, .pg-option, .pg-setting, .user, .file
|
|
{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.execute-title .path, .execute-title .file, .execute-title .id, .execute-title .br-option,
|
|
.config-title .path, .config-title .file, .config-title .id, .config-title .br-option
|
|
{
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Footer
|
|
***********************************************************************************************************************************/
|
|
.page-footer
|
|
{
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 1.5rem;
|
|
padding-top: .75rem;
|
|
padding-bottom: 1.125rem;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
font-size: .8125rem;
|
|
}
|
|
|
|
/***********************************************************************************************************************************
|
|
Narrow screens
|
|
***********************************************************************************************************************************/
|
|
@media (max-width: 40rem)
|
|
{
|
|
body
|
|
{
|
|
font-size: .9375rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* The title is on a row of its own here, so the space under it is halved to give back some of what that row takes */
|
|
.page-header
|
|
{
|
|
padding-top: 1.5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.page-header-title
|
|
{
|
|
font-size: 1.625rem;
|
|
}
|
|
|
|
/* Too narrow to sit opposite the name, so it goes back under it */
|
|
.page-header-subtitle
|
|
{
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.section2-header
|
|
{
|
|
font-size: 1.1875rem;
|
|
}
|
|
|
|
.page-toc-body
|
|
{
|
|
padding: 1rem;
|
|
}
|
|
|
|
.table
|
|
{
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
}
|