get it automatically. */
img.icon,
svg.icon,
kbd img,
kbd svg {
height: 1.2em;
width: auto;
max-width: none;
vertical-align: -.25em;
}
/* Product icon colours (src/lib/icons.mjs turns each SVG's hard-coded colours into these classes), same palette as the product. */
.icon-fill-black {
fill: var(--icon-black);
}
.icon-stroke-black {
stroke: var(--icon-black);
}
.icon-fill-blue {
fill: var(--icon-blue);
}
.icon-stroke-blue {
stroke: var(--icon-blue);
}
.icon-fill-red {
fill: var(--icon-red);
}
.icon-stroke-red {
stroke: var(--icon-red);
}
.icon-fill-yellow {
fill: var(--icon-yellow);
}
.icon-stroke-yellow {
stroke: var(--icon-yellow);
}
.icon-fill-green {
fill: var(--icon-green);
}
.icon-stroke-green {
stroke: var(--icon-green);
}
.icon-fill-purple {
fill: var(--icon-purple);
}
.icon-stroke-purple {
stroke: var(--icon-purple);
}
code,
kbd,
.query {
font-family: ui-monospace, Consolas, monospace;
font-size: .92em;
background: var(--code-bg);
padding: .1em .35em;
border-radius: 4px;
}
pre {
font-family: ui-monospace, Consolas, monospace;
font-size: .92em;
background: var(--code-bg);
padding: 1em;
overflow-x: auto;
border-radius: 6px;
}
pre code {
background: none;
padding: 0;
}
/* A console window, as used for ess.exe's output in the manual. Always dark, in both themes, like a real console. */
pre.command-line {
clear: both;
margin-left: 1em;
padding: .5em;
background-color: black;
color: #ccc;
font-weight: bold;
white-space: pre-wrap;
}
pre.command-line .filename {
color: white;
}
pre.command-line .hit {
color: yellow;
}
/* A picture floated to the right of the text that follows it, as in the "What's next?" box on the order confirmation. */
img.float-right {
float: right;
margin: 0 0 .5rem 1rem;
}
/* A picture floated to the left of the text that follows it, which then flows to its right and underneath: for tall, narrow pictures
(the Entrian Audio pages use it for screenshots of panels). On a narrow screen it stays in line with the text, with no text beside it. */
img.float-left {
display: block;
margin: 0.5rem 0 .5rem;
}
@media (min-width: 40rem) {
img.float-left {
float: left;
margin: 0.5rem 1.25rem .5rem 0;
}
/* A heading doesn't start beside the picture, and a video fits in the space beside it (or drops below it) rather than lying over it. */
main h2,
main h3 {
clear: left;
}
.video {
display: flow-root;
}
}
/* How a value looks when Entrian Inline Watch shows it in the editor: a pale yellow pill. It stays light in the dark theme, as it does in Visual Studio. */
.inline-watch-value {
color: #333;
background-color: #ffffb8;
border: 1px solid #e0c000;
border-radius: .6em;
padding: 0 .6em;
font-family: Calibri, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 90%;
}
/* A little picture of the Search box, as used in the manual's description of the toolbar. */
.search-box-sample {
border: 1px solid var(--muted);
padding: 3px 20px 3px 4px;
font-family: sans-serif;
font-size: 90%;
}
/* The page is a rectangle on the outer background, with a 12px margin above and below. */
.page {
max-width: var(--max);
margin: 12px auto;
padding: 1rem;
background: var(--bg);
border-radius: 10px;
}
.wrap {
padding: 0 1.25rem;
}
.skip {
position: absolute;
left: -999px;
}
.skip:focus {
left: 1rem;
top: 1rem;
background: var(--bg);
padding: .5rem;
z-index: 10;
}
.site-header {
margin: 0 -1rem;
padding: 0 1rem;
border-bottom: 1px solid var(--line);
container-type: inline-size;
}
/* rule runs the full width of the page */
/* Three arrangements, chosen by the header's own width:
narrow = logo / tools / nav stacked; medium = logo + tools, nav below; wide = tools above, logo + nav on one baseline. */
.header-row {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: 'logo' 'tools' 'nav';
gap: 0;
padding-bottom: .6rem;
}
.header-row .logo {
grid-area: logo;
justify-self: start;
}
.header-row .header-tools {
grid-area: tools;
}
.header-row nav {
grid-area: nav;
}
@container (min-width: 38.75rem) {
.header-row {
grid-template-columns: 1fr auto;
grid-template-areas: 'logo tools' 'nav nav';
align-items: center;
}
.header-row .header-tools {
justify-self: end;
}
}
@container (min-width: 66.25rem) {
.header-row {
grid-template-areas: '. tools' 'logo nav';
align-items: end;
align-items: last baseline;
}
.header-row nav {
justify-self: end;
}
}
/* A subsite (see `subsites` in src/data/site.ts) is narrower, and its header has no search box to share the top row with, so the logo
and nav share one line from a smaller width than usual, rather than the nav wrapping under the logo. */
.page[data-subsite='audio'] {
--max: 850px;
}
@container (min-width: 44rem) {
.page[data-subsite] .header-row {
grid-template-columns: 1fr auto;
grid-template-areas: 'logo nav';
align-items: end;
align-items: last baseline;
}
.page[data-subsite] .header-row nav {
justify-self: end;
}
}
.logo {
display: flex;
align-items: baseline;
gap: .6rem;
color: var(--wordmark);
font-size: 1.75rem;
line-height: 1;
}
.logo img {
display: block;
}
.header-right {
display: contents;
}
/* logo, tools and nav are laid out directly by .header-row */
.header-tools {
display: flex;
align-items: center;
gap: .6rem;
}
/* Component UI loads its own :root defaults later, so this needs the extra specificity. */
html:root {
--pf-mark: var(--fg);
--pf-background: var(--bg);
--pf-text: var(--fg);
--pf-text-secondary: var(--muted);
--pf-text-muted: var(--muted);
--pf-border: var(--line);
--pf-border-focus: var(--accent);
--pf-hover: var(--panel);
--pf-font: inherit;
}
.search {
width: 18rem;
padding-right: 0.4rem
/* Match the nav */
;
--pf-searchbox-max-width: 18rem;
--pf-input-height: 1.9rem;
--pf-input-font-size: .85rem;
}
/* The results dropdown is wider than the box, hanging off its right edge. !important is needed to beat Pagefind's own selectors. */
/* The search box before the real one (Pagefind's, which is big) has been loaded by public/search-loader.js: the same markup and look,
with just the rules it needs from Pagefind's own stylesheet. */
.search-lazy {
--pf-icon-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7 10.3a6 6 0 1 0-1.4 1.4l3.5 3.5 1.4-1.4zM6.5 10.5a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E");
width: 100%;
max-width: var(--pf-searchbox-max-width);
}
.search-lazy .pf-searchbox-input-wrapper {
position: relative;
}
.search-lazy .pf-searchbox-input-wrapper::before {
content: '';
position: absolute;
z-index: 1;
width: 14px;
height: 14px;
top: calc((var(--pf-input-height) - 14px) / 2);
inset-inline-start: 10px;
background-color: var(--pf-text-muted);
-webkit-mask-image: var(--pf-icon-search);
mask-image: var(--pf-icon-search);
-webkit-mask-size: 100%;
mask-size: 100%;
pointer-events: none;
}
.search-lazy .pf-searchbox-input {
box-sizing: border-box;
width: 100%;
height: var(--pf-input-height);
padding: 0 72px 0 32px;
background-color: var(--pf-background);
border: 1px solid var(--pf-border);
border-radius: 6px;
font-family: inherit;
font-size: var(--pf-input-font-size);
color: var(--pf-text);
}
.search-lazy .pf-searchbox-input::placeholder {
color: var(--pf-text-muted);
}
.search-lazy .pf-searchbox-input:focus {
padding-inline-end: 12px;
border-color: var(--pf-border-focus);
outline: none;
}
.search-lazy .pf-trigger-shortcut {
position: absolute;
inset-inline-end: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
gap: 2px;
pointer-events: none;
}
.search-lazy .pf-searchbox-input:focus ~ .pf-trigger-shortcut {
display: none;
}
.search-lazy .pf-trigger-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 4px;
background: var(--pf-hover);
border: 1px solid var(--pf-border);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: var(--pf-text-secondary);
}
.search .pf-searchbox-dropdown {
left: auto !important;
right: 0 !important;
width: min(40rem, 90vw) !important;
}
.topnav {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.topnav a,
.manual-nav a {
display: block;
padding: .15rem .6rem;
border-left: 1px solid var(--line);
color: var(--fg);
}
a {
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.topnav a[aria-current],
.manual-nav a[aria-current] {
padding-left: calc(.6rem - 2px);
border-left: 3px solid var(--accent);
font-weight: 700;
}
/* The manual's table of contents floats at the top right of the content, below the heading. */
.manual-nav {
float: right;
width: 13rem;
margin: 4px 0 2rem 2rem; /* The 4px top margin hackily aligns the first entry with adjacent text if it's not a heading. */
font-size: .92rem;
}
.manual-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 40rem) {
.manual-nav {
float: none;
width: auto;
margin: 0 0 1rem;
}
}
.page-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .25rem 1.5rem;
}
.edition-switch {
/* RJH TEMP */
visibility: hidden;
margin-left: auto;
display: flex;
align-items: center;
gap: .75rem;
font-size: .9rem;
color: var(--muted);
}
.seg {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.seg button {
white-space: nowrap;
font: inherit;
border: 0;
background: none;
color: var(--fg);
padding: .2rem .8rem;
cursor: pointer;
}
.seg.small button {
padding: .05rem .45rem;
font-size: .8rem;
line-height: 1.5;
}
.seg button[aria-pressed='true'] {
background: var(--accent);
color: var(--accent-fg);
}
.notices {
padding-top: 1.5rem;
}
/* banner and manual nav sit above the grid so main starts with the h1 */
.notices+.layout {
padding-top: 0;
}
.layout {
display: block;
padding-top: 1rem;
padding-bottom: 3rem;
}
@media (min-width: 52rem) {
.layout.has-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 15rem;
gap: 2rem;
align-items: first baseline;
}
}
@media (max-width: 51.99rem) {
.page {
padding: 0;
}
.site-header {
margin: 0;
}
.sidebar {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
}
.sidebar,
section.inline-panel {
border: 1px solid var(--line);
border-radius: 10px;
padding: 1rem;
}
/* A panel contains anything floated inside it (a picture beside some text), so the picture can't hang out of the bottom. */
section.inline-panel {
display: flow-root;
}
.sidebar h3 {
margin: 1.5rem 0 .5rem;
font-size: 1rem;
}
.sidebar h3:first-child {
margin-top: 0;
}
.sidebar ul {
padding-left: 1.1rem;
}
.site-footer .theme-switch {
margin: 0 0 0 .25rem;
vertical-align: middle;
}
.small {
font-size: .9rem;
color: var(--muted);
margin: .25rem 0 1rem;
}
blockquote {
margin: 0;
padding-left: 1rem;
border-left: 3px solid var(--accent);
}
blockquote footer {
color: var(--muted);
font-size: .9rem;
}
/* Customer testimonials (testimonials.md): each is a blockquote whose last paragraph is the signature.
The big orange quote mark is a CSS pseudo-element, so it follows the theme and needs no image. */
.testimonials blockquote {
position: relative;
min-height: 4.5rem;
margin: 0 0 2.5rem;
padding-left: 5rem;
border-left: 0;
line-height: 1.5;
}
.testimonials blockquote::before {
content: '\201C';
content: '\201C' / ''; /* Decorative: an empty alternative keeps screen readers quiet where this is supported. */
position: absolute;
left: 0;
top: -.15rem;
font: 700 6rem/1 Georgia, 'Times New Roman', serif;
color: var(--accent);
}
.testimonials blockquote p {
margin: 0 0 1em;
}
.testimonials blockquote > p:last-child {
margin-bottom: 0;
text-align: right;
}
@media (max-width: 40rem) {
.testimonials blockquote { padding-left: 3rem; }
.testimonials blockquote::before { font-size: 4rem; }
}
.btn {
display: block;
text-align: center;
padding: .25rem 1rem;
border: 1px solid var(--accent);
border-radius: 8px;
font-weight: 600;
}
.btn.primary {
background: var(--accent);
color: var(--accent-fg);
}
.btn h2 {
margin: 0;
}
/* A button standing on its own in the page content (about the sidebar button's width, centred), eg. on the Download page. */
.btn.centered {
width: 13rem;
margin: 1.5rem auto;
}
.banner {
background: var(--warn-bg);
border: 1px solid var(--line);
border-radius: 10px;
padding: .5rem 1.25rem;
margin-bottom: 1.5rem;
}
.banner h2 {
font-size: 1.1rem;
margin: .5rem 0 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
margin: 0.5em 0 0 0;
}
p {
margin: 0.3em 0 1em 0;
}
h1 {
line-height: 1.2;
font-size: 1.6rem;
font-weight: 500;
margin-top: 6px;
}
main h1,
.sidebar h3 {
margin: 0 0 8px 0;
}
/* Same margin: aligns the first non-header content. */
.hero-area {
padding-top: 1.5rem;
}
/* Content that should run the full width, below the content/sidebar grid (the sidebar is shorter than the page). */
.wide-area {
padding-bottom: 3rem;
}
.layout:has(+ .wide-area) {
padding-bottom: 1.5rem;
}
/* full-width hero: sits above the content/sidebar grid */
.notices+.hero-area {
padding-top: 0;
}
.hero .lead {
font-size: 1.15rem;
}
.hero img, img.shadowed {
filter: drop-shadow(2px 2px 10px var(--drop-shadow-colour));
margin: 0.75rem 0 0.25em 0;
}
.features {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
margin: 2rem 0;
}
.feature {
background: var(--panel);
border-radius: 10px;
padding: 0 1.25rem;
}
.feature img {
border-radius: 4px;
}
.feature h3 {
margin: .75rem 0 .5rem;
}
/* Counteract the large default margin-top */
.pager {
clear: both;
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid var(--line);
padding: .4rem .7rem;
text-align: left;
vertical-align: top;
}
/* Edition-specific content. "Both" shows everything, labelled; picking an edition hides the other. */
.for-ide,
.for-code {
border-left: 4px solid;
padding: .1rem 0 .1rem 1rem;
margin: 1rem 0;
}
.for-ide {
border-color: var(--ide);
}
.for-code {
border-color: var(--vscode);
}
.for-ide::before,
.for-code::before {
display: block;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.for-ide::before {
content: 'Visual Studio';
color: var(--ide);
}
.for-code::before {
content: 'VS Code';
color: var(--vscode);
}
[data-platform='ide'] .for-code,
[data-platform='code'] .for-ide {
display: none;
}
[data-platform='ide'] .for-ide,
[data-platform='code'] .for-code {
border-left: 0;
padding-left: 0;
}
[data-platform='ide'] .for-ide::before,
[data-platform='code'] .for-code::before {
display: none;
}
/* RJH TEMP */
.for-code {
display: none;
}
.site-footer {
border-top: 1px solid var(--line);
padding: 1.5rem 0;
color: var(--muted);
font-size: .9rem;
}
/* Images with -light/-dark variants (see ThemedImage.astro): show the one matching the active theme. */
.themed-dark {
display: none;
}
:root[data-theme='dark'] .themed-light {
display: none;
}
:root[data-theme='dark'] .themed-dark {
display: revert;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .themed-light {
display: none;
}
:root:not([data-theme='light']) .themed-dark {
display: revert;
}
}
/* The verbosity slider in the manual: a real range control, drawn like the product's trackbar (a thin track, a blue pointer). */
.verbosity-slider {
-webkit-appearance: none;
appearance: none;
width: 54px;
height: 19px;
margin: 0 0.1em;
padding: 0;
vertical-align: middle;
background: transparent;
cursor: pointer;
}
.verbosity-slider::-webkit-slider-runnable-track { height: 3px; background: var(--line); border: 1px solid var(--muted); border-radius: 1px; }
.verbosity-slider::-moz-range-track { height: 1px; background: var(--line); border: 1px solid var(--muted); border-radius: 1px; }
.verbosity-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px;
height: 17px;
margin-top: -8px;
background: var(--icon-blue);
border: 0;
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}
.verbosity-slider::-moz-range-thumb { width: 11px; height: 17px; background: var(--icon-blue); border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.verbosity-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The note about translations at the top of the Spambayes article. */
.translations {
float: right;
width: 16rem;
margin: 0 0 1rem 2rem;
color: var(--muted);
font-size: .9rem;
}
@media (max-width: 700px) {
.translations { display: none; }
}
/* Python interactive sessions (the PyMeld pages). The colours are those of the old pages in the light theme: operators and
prompts, keywords, strings, numbers, comments, and the output the interpreter prints. Plain names have the text colour. */
pre.pycon { color: var(--fg); }
pre.pycon i { font-style: normal; }
.py-o { color: var(--py-o); }
.py-k { color: var(--py-k); }
.py-s { color: var(--py-s); }
.py-n { color: var(--py-n); }
.py-c { color: var(--py-c); }
.py-x { color: var(--py-x); }
/* A warning that has to be seen (the goto joke warning): bright red in both themes, only as light or dark as legibility needs. */
.alert {
color: var(--alert);
border: 2px solid var(--alert);
border-radius: 6px;
padding: .75rem 1rem;
font-size: 1.2rem;
font-weight: 700;
}
/* An embedded video (YouTube): as wide as the page allows, up to the size it was embedded at, keeping its shape. */
.video { margin: 1rem 0; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }