/* The token/typography/table system shared by the documentation pages and the account pages (licence manager, purchase, checkout, sign-in) - both take body.ui. Split out of style.css; loaded by both groups alongside their own group-specific file. */ .menu_column { padding: 8px var(--margin); margin:auto; max-width: var(--maxwidth); } .menu_column > div:nth-child(2) { padding: 0; margin: 0; } .menu_column section { padding: 8px 0; } .menu_column > .sticky { padding-bottom: 1rem; } /* Moved here from style.css - these have to live in the same file as the bare .menu_column/ .tab-bar/.tab rules above (or below) that they override, since equal-specificity rules resolve by which file loads last on the page, not by which one is wrapped in a media query. See the same note in api.css. */ @media (min-width: 768px) { .menu_column { display:grid; grid-template-columns: 200px minmax(0, 1fr); grid-column-gap: var(--spacing); } .tab-bar { text-align: left; } .tab { margin: 0; } .menu_column > .sticky { display: block; width: 200px; height: 90vh; position: sticky; top: 100px; padding-bottom: 1rem; } } /* --------------------- --- Documentation --- --------------------- */ .snackbar { position: fixed; bottom: 25px; left: 75px; padding: 10px 25px; background: #FFF; border-radius: 5px; color: #121212; visibility: hidden; z-index: 1000; } .snackbar.show { visibility: visible; /* Show the snackbar */ /* Add animation: Take 0.5 seconds to fade in and out the snackbar. However, delay the fade out process for 2.5 seconds */ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 3s; } /* Animations to fade the snackbar in and out */ @-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } @keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } .subsec { margin-top: 50px; } /* -------------------- - Tabs - -------------------- */ .tab-bar { margin-bottom: var(--gridspacing); text-align: center; } .tab-bar > button.selected { background-color: var(--green); color: var(--white); } .tab { display: block; margin-bottom: var(--margin); margin: auto; } .tab:not(.selected) { display: none; } .tab > div, .tab > table { border: 1px solid var(--green); border-radius: 8px; background-color: #111; padding: var(--gridspacing); } .tab.default { display: block; } /* ============================================================================ ---- Documentation: the "Spec" design system ---- ============================================================================ Applied by , set by every view that renders pages/docs - the documentation and the support pages. The whole look is the token block below. Everything after it reads colour, size and family from a variable and nothing else, which is the point: the documentation used to be a dark page whose rules leaked onto the light ones (table colour, sidebar link colour, the first-column glossary rule), and turning it light meant scoping those back rather than adding more overrides. To put the documentation back onto a dark ground, redefine this one block. ============================================================================ */ body.ui { /* Ground and ink */ --d-bg: #ffffff; --d-panel: #f8f9fb; --d-ink: #262d36; --d-ink-strong: #12171d; --d-ink-soft: #616c7a; --d-ink-faint: #939ca8; --d-rule: #e6e9ee; --d-rule-soft: #f0f2f5; /* One accent. The site's existing link green, deepened from #28a745 - which is 3.1:1 on white and fails AA for body text - to 4.6:1, which passes. */ --d-accent: #1f8b57; --d-accent-deep: #136b42; --d-accent-wash: rgba(31, 139, 87, .08); /* Reading measure. Body text ran the full ~950px of the content column; 72 characters is the width the rest of the type scale is set for. */ --d-measure: 72ch; background: var(--d-bg); color: var(--d-ink); font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ---- Layout ---------------------------------------------------------- */ @media (min-width: 768px) { body.docs .menu_column { grid-template-columns: 216px minmax(0, 1fr); } body.docs .API-side { width: 216px; } } body.docs .menu_column > div:nth-child(2) { padding-top: 6px; } /* ---- Headings -------------------------------------------------------- */ /* The site sets h1 at 50px/300 and h2 at 30px/300 - a landing-page pairing. On a reference page every section then opens like a chapter. */ body.ui h1 { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--d-ink-strong); margin: 0 0 18px; } body.ui h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--d-ink-strong); margin: 42px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--d-rule); } body.ui h3 { font-size: 17px; font-weight: 600; color: var(--d-ink-strong); margin: 28px 0 8px; padding-top: 0; } body.ui h4 { font-size: 15px; font-weight: 600; color: var(--d-ink-strong); margin: 22px 0 6px; } /* ---- Body copy ------------------------------------------------------- */ /* Scoped to the documentation column, not the whole page: as "body.docs p" this also capped the footer's own line at 72 characters. */ body.docs .menu_column p, body.docs .menu_column li, body.docs .menu_column dd { max-width: var(--d-measure); } body.ui p { margin: 0 0 14px; } /* Scoped to the documentation column. As "body.docs a" this tied with ".nav-brand a" on specificity and won on order, turning the "Equation Editor" wordmark in the masthead green and underlining it. Links in the site chrome are the chrome's business, not the documentation's. */ body.ui .site-main a, body.ui .site-main a:visited { color: var(--d-accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } body.ui .site-main a:hover { color: #0f5836; } /* is used through these pages as a term marker - a parameter name, a directive, a key - rather than for emphasis, so it keeps its colour but takes the accessible accent instead of #28a745. */ body.ui em { color: var(--d-accent-deep); font-weight: 400; } body.ui strong { font-weight: 600; } body.ui ul li:before, body.ui p.bullet:before { color: var(--d-accent); } /* Headings in the documentation are held to the same measure as its prose. */ body.docs .menu_column h1, body.docs .menu_column h2, body.docs .menu_column h3 { max-width: var(--d-measure); } /* ---- Sidebar --------------------------------------------------------- */ body.docs .API-side { font-size: 14px; margin-left: 0; border-right: 1px solid var(--d-rule); padding-right: 14px; } body.docs .API-side h5 { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-ink-faint); margin: 24px 0 7px; } body.docs .API-side h5:first-child { margin-top: 0; } body.docs .API-side a { color: var(--d-ink-soft); text-decoration: none; padding: 4px 9px; margin: 0 0 0 -9px; border-radius: 4px; line-height: 1.45; } body.docs .API-side a:hover { color: var(--d-ink-strong); background: var(--d-rule-soft); } /* The page you are on: a rule in the margin and nothing else. A filled pill here competes with the content beside it, and the sidebar should be the quietest thing on the page. */ body.docs .API-side a.is-current { color: var(--d-accent-deep); font-weight: 600; box-shadow: inset 2px 0 0 var(--d-accent); background: none; } /* The section currently on screen, set by documentation.js as you scroll. Deliberately a wash rather than a rule, so it cannot be confused with the current-page marker above. */ body.docs .API-highlight { background: var(--d-accent-wash); color: var(--d-accent-deep); border-radius: 4px; } body.docs .API-side-dropdown a { font-size: 13.5px; } body.docs .API-side-toggle { border: 1px solid var(--d-rule); border-radius: 5px; color: var(--d-ink-soft); background: var(--d-panel); } body.docs .API-side-toggle:hover { background: var(--d-rule-soft); color: var(--d-ink-strong); cursor: pointer; } /* ---- Tables ---------------------------------------------------------- */ /* A tinted head in the accent, no rules anywhere except a hairline between rows, and enough padding that the rows separate themselves. Left-aligned throughout: these are parameter lists, not glossaries. */ body.ui table { border-collapse: collapse; border-spacing: 0; width: 100%; max-width: var(--d-measure); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; font-variant-numeric: tabular-nums; color: var(--d-ink); } body.ui table th { text-align: left; vertical-align: bottom; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--d-accent-deep); background: var(--d-accent-wash); padding: 10px 14px; white-space: nowrap; } body.ui table td { padding: 11px 14px; vertical-align: top; border: none; text-align: left; } body.ui table tr + tr td { border-top: 1px solid var(--d-rule-soft); } /* Undoes the site-wide glossary treatment for these pages. */ body.ui table td:first-child { border-right: none; text-align: left; padding-right: 14px; } body.ui table.table { margin-left: 0; } /* ---- Code ------------------------------------------------------------ */ body.ui code, body.docs .API-side code { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; background: var(--d-rule-soft); color: #1b4b8f; padding: 1px 5px; border-radius: 3px; } body.ui pre { background: var(--d-panel); border: 1px solid var(--d-rule); border-radius: 5px; padding: 14px 16px; margin: 0 0 18px; max-width: var(--d-measure); overflow-x: auto; } /* Sized on the , not the : the site rule sets "pre { font-size:80% !important }", and a px size here is also immune to that 80% compounding into whatever Prism sets in em. */ body.ui pre code, body.ui pre code[class*="language-"] { font-size: 13px; line-height: 1.65; background: none; padding: 0; border-radius: 0; color: var(--d-ink); text-shadow: none; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Prism ships the okaidia theme - a warm, near-black block. It reads fine, but not beside this palette, so the token colours are restated here for a light ground. Kept to five hues: tags green, strings brown, keywords blue, numbers violet, comments grey. */ body.ui .token.comment, body.ui .token.prolog, body.ui .token.doctype, body.ui .token.cdata { color: #8a94a2; } body.ui .token.punctuation { color: #66707c; } body.ui .token.tag, body.ui .token.property, body.ui .token.constant, body.ui .token.symbol, body.ui .token.deleted { color: var(--d-accent-deep); } body.ui .token.string, body.ui .token.attr-name, body.ui .token.selector, body.ui .token.builtin, body.ui .token.char, body.ui .token.inserted { color: #8a4b1c; } body.ui .token.number, body.ui .token.boolean { color: #7d3fb5; } body.ui .token.keyword { color: #1b4b8f; } body.ui .token.function, body.ui .token.class-name, body.ui .token.atrule, body.ui .token.attr-value { color: #0f6d8f; } body.ui .token.operator, body.ui .token.entity, body.ui .token.url, body.ui .token.variable { color: #66707c; background: none; } body.ui .token.important, body.ui .token.regex { color: #b23a2e; } body.ui .code-copy { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } body.ui .code-code-label { font-size: 12.5px; font-weight: 600; color: var(--d-ink-soft); margin: 16px 0 6px; } /* ---- Notes ----------------------------------------------------------- */ body.ui .note { border-left: 3px solid var(--d-accent); background: var(--d-accent-wash); border-radius: 0 4px 4px 0; padding: 13px 16px; margin: 18px 0; max-width: var(--d-measure); } body.ui .note strong { color: var(--d-accent-deep); } /* The preset-colour list on the LaTeXRender API page used to print each hex in its own colour via an inline "style=color:#...". That relied on a dark ground - amber, beige and champagne vanish on a white one - and it could never be made accessible, because the text colour WAS the data. The hue now travels in a --swatch custom property instead, so the square shows the colour and the hex is set in ordinary ink and stays readable whatever the ground. */ body.docs table td.swatch { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; letter-spacing: .03em; white-space: nowrap; color: var(--d-ink); } body.docs table td.swatch::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; border-radius: 2px; background: var(--swatch); border: 1px solid rgba(18, 23, 29, .28); } /* Prism's own stylesheet is pulled in by the documentation view, i.e. after this file, so its ":not(pre) > code[class*=language-]" tied with "body.ui code" on specificity and won on order - leaving inline in a paragraph with okaidia's near-black block behind it. Matched selector for selector here so the tie is broken on this side. */ body.ui :not(pre) > code[class*="language-"], body.ui :not(pre) > code[class*="lang-"] { background: var(--d-rule-soft); color: #1b4b8f; text-shadow: none; padding: 1px 5px; border-radius: 3px; white-space: normal; } /* ---- Documentation: fixes for controls that assumed a dark ground -------- */ /* ".version { color: white }" - the v4/v5 tabs on the plugin pages. Only the selected one carries a dark fill, so on a white page the others were white text on white. */ body.ui button.version { color: var(--d-ink-soft); border: 1px solid var(--d-rule); background: var(--d-bg); } body.ui button.version.selected { color: #fff; border-color: var(--d-accent-deep); background-color: var(--d-accent-deep); } body.ui button.version:not(.selected):hover { border-color: var(--d-ink-faint); color: var(--d-ink-strong); background: var(--d-rule-soft); } /* The copy button sat inside a code block in #28a745 - 3:1 on the block's new light ground, and it is 11px text. */ body.ui .code-copy { color: var(--d-accent-deep); background: var(--d-bg); border: 1px solid var(--d-rule); border-radius: 4px; } body.ui .code-copy:hover { background: var(--d-accent-deep); border-color: var(--d-accent-deep); color: #fff; } /* Section headings in the sidebar. #939ca8 is 2.8:1 on white, and these are 11px uppercase - the size that needs contrast most. */ body.docs .API-side h5 { color: #58616e; } /* A 50%-opaque pure blue (rgb(1,46,255,.5)) behind white-ish text - readable on the old dark ground, and a poor surface for anything on a white one: the green links inside it came out at 1.6:1. Same role, restated as a light panel. */ body.ui .alert { border: 1px solid #c9d9f0; background-color: #eef3fb; color: var(--d-ink); border-radius: 5px; padding: 16px 20px; max-width: var(--d-measure); } body.ui .alert a, body.ui .alert a:visited { color: #1b4b8f; } body.ui .alert strong { color: var(--d-ink-strong); } /* White on #28a745 is 3.1:1. The deeper accent takes it to 6.5:1. */ body.ui button.green, body.ui a.button.green { background-color: var(--d-accent-deep); } /* Read by a screen reader, seen by nobody - see the tooltip script in purchase.php, which pairs each trigger with one of these. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Forms ---- */ body.ui input, body.ui select, body.ui textarea { font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; height: auto; padding: 9px 12px; border: 1px solid #ccd2da; border-radius: 5px; background: var(--d-bg); color: var(--d-ink); } body.ui textarea { padding: 10px 12px; min-height: 120px; } body.ui input::placeholder, body.ui textarea::placeholder { color: var(--d-ink-faint); } body.ui input:focus, body.ui select:focus, body.ui textarea:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-wash); } /* :invalid alone marks a required field red before anyone has typed in it. :not(:placeholder-shown) holds that back until there is something to be wrong about. */ body.ui input:invalid:not(:placeholder-shown) { border-color: #c0392b; } body.ui label { font-size: 14px; color: var(--d-ink-soft); margin-bottom: 4px; } /* ---- Buttons ---- */ /* The base rule asks for "muli", which this site has never loaded - so every button on it has been falling back to the generic sans. */ body.ui button, body.ui a.button { font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; border-radius: 5px; padding: 10px 18px; border: 1px solid transparent; } body.ui .site-main a.button, body.ui .site-main a.button:visited { text-decoration: none; } body.ui button.green, body.ui a.button.green { background-color: var(--d-accent-deep); border-color: var(--d-accent-deep); color: #fff !important; } body.ui button.green:hover, body.ui a.button.green:hover { background-color: #0f5836; border-color: #0f5836; } body.ui button.blue, body.ui a.button.blue { background-color: #1b4b8f; border-color: #1b4b8f; color: #fff !important; } body.ui button.blue:hover, body.ui a.button.blue:hover { background-color: #163c72; border-color: #163c72; } /* ---- Page furniture ---- */ body.ui .site-main > section { padding: 8px 0 28px; } body.ui h1.center { margin-bottom: 10px; } /* A button with no colour modifier - "Print" on the licence agreement - fell through to #28a745 text on white, which is 3.1:1. Given a neutral outlined treatment rather than a colour, since these are always the secondary action beside a green primary one. */ body.ui button:not(.green):not(.blue), body.ui a.button:not(.green):not(.blue) { background: var(--d-bg); border-color: #ccd2da; color: var(--d-ink); } body.ui button:not(.green):not(.blue):hover, body.ui a.button:not(.green):not(.blue):hover { background: var(--d-rule-soft); border-color: var(--d-ink-faint); color: var(--d-ink-strong); }