/* Laneward documentation theme. The palette is defined here rather than picked from Material's presets, so both schemes are one decision in one file. */ :root { --md-primary-fg-color: #12151c; --md-primary-fg-color--light: #262b36; --md-primary-fg-color--dark: #090b10; --md-primary-bg-color: #f7f8fa; --md-primary-bg-color--light: #c9ced9; --md-accent-fg-color: #4f5bd5; --md-accent-fg-color--transparent: #4f5bd51a; --lw-link: #3f4bc4; --lw-surface: #ffffff; --lw-border: #e3e6ec; --lw-muted: #5b6472; --lw-radius: 10px; --lw-on-accent: #ffffff; --lw-diag-node-bg: #f7f8fa; --lw-diag-node-border: #ccd2dd; --lw-diag-ok: #1a7f4b; --lw-diag-bad: #b3261e; --lw-diag-wait: #96590a; --lw-diag-guard: #4f5bd5; --lw-diag-edge: #6b7382; --lw-diag-label: #5b6472; --lw-diag-band: #eef0f5; } [data-md-color-scheme="slate"] { --md-hue: 222; --md-default-bg-color: #0d1117; --md-default-bg-color--light: #131923; --md-primary-fg-color: #0d1117; --md-primary-fg-color--light: #1b2230; --md-primary-fg-color--dark: #070a0f; --md-primary-bg-color: #e8ecf4; --md-accent-fg-color: #8b95ff; --md-accent-fg-color--transparent: #8b95ff1f; --lw-link: #8b95ff; --lw-surface: #151b24; --lw-border: #232b38; --lw-muted: #9aa4b3; --lw-diag-node-bg: #1b2230; --lw-diag-node-border: #38435a; --lw-diag-ok: #56d394; --lw-diag-bad: #ff8b82; --lw-diag-wait: #e6ad55; --lw-diag-guard: #8b95ff; --lw-diag-edge: #8f99ab; --lw-diag-label: #a6b0c0; --lw-diag-band: #10161f; --lw-on-accent: #0d1117; } /* Material's `custom` palette redefines the link colour on , which beats a :root declaration for everything inside the page. Match its selector so links are the accent rather than the near-black header colour. */ body[data-md-color-primary="custom"] { --md-typeset-a-color: var(--lw-link); } /* Typography ------------------------------------------------------------- */ .md-typeset { font-feature-settings: "kern", "liga", "calt"; line-height: 1.72; } .md-typeset h1 { font-weight: 700; letter-spacing: -0.028em; color: var(--md-default-fg-color); margin-bottom: 0.6em; } .md-typeset h2 { font-weight: 650; letter-spacing: -0.02em; margin-top: 2.2em; padding-top: 0.35em; border-top: 1px solid var(--lw-border); } .md-typeset h3 { font-weight: 620; letter-spacing: -0.012em; } .md-typeset code { font-size: 0.82em; border-radius: 5px; padding: 0.14em 0.38em; } /* Header and tabs -------------------------------------------------------- */ .md-header { box-shadow: none; border-bottom: 1px solid transparent; } .md-header--shadow { box-shadow: 0 1px 0 var(--lw-border), 0 6px 18px -12px rgba(0, 0, 0, 0.35); } .md-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .md-tabs__link { opacity: 0.72; font-size: 0.74rem; } .md-tabs__link--active, .md-tabs__link:hover { opacity: 1; } .md-search__form { border-radius: var(--lw-radius); background-color: rgba(255, 255, 255, 0.1); } .md-search__form:hover { background-color: rgba(255, 255, 255, 0.16); } /* Navigation ------------------------------------------------------------- */ .md-nav { font-size: 0.72rem; } .md-nav__title { font-weight: 620; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.62rem; color: var(--lw-muted); } .md-nav__link { border-radius: 6px; padding: 0.18rem 0.4rem; margin-left: -0.4rem; transition: background-color 120ms, color 120ms; } .md-nav__link:hover { background-color: var(--md-accent-fg-color--transparent); } .md-nav__item .md-nav__link--active { font-weight: 600; background-color: var(--md-accent-fg-color--transparent); } /* Blocks ----------------------------------------------------------------- */ .md-typeset pre > code, .md-typeset .highlight > pre { border-radius: var(--lw-radius); } .md-typeset .highlight { border: 1px solid var(--lw-border); border-radius: var(--lw-radius); overflow: hidden; } .md-typeset .admonition, .md-typeset details { border: 1px solid var(--lw-border); border-left-width: 3px; border-radius: var(--lw-radius); box-shadow: none; font-size: 0.76rem; } .md-typeset .admonition-title, .md-typeset summary { font-weight: 620; letter-spacing: -0.005em; } .md-typeset table:not([class]) { border: 1px solid var(--lw-border); border-radius: var(--lw-radius); overflow: hidden; font-size: 0.74rem; box-shadow: none; } /* Headers and inline code here used to be held on one line. It reads well on a table narrow enough to fit, and every wide table in this guide is not: with the rule on, the troubleshooting tables measure 974px and 795px inside a 792px column on a 1600px screen, so both have to be dragged sideways. They are 755px without it and simply fit. The cost is a header that wraps. */ .md-typeset table:not([class]) th { background-color: var(--md-default-bg-color--light); font-weight: 620; letter-spacing: 0.01em; } .md-typeset table:not([class]) tr:hover td { background-color: var(--md-accent-fg-color--transparent); } .md-typeset blockquote { border-left-width: 3px; color: var(--lw-muted); } /* Diagrams --------------------------------------------------------------- The diagrams are hand-authored inline SVG that carries no colour of its own, so the theme toggle reaches inside them the same way it reaches the rest of the page. Every fill and stroke below resolves through a variable that both schemes define. */ .md-typeset .lw-diagram { margin: 1.6em 0; padding: 1.1em; border: 1px solid var(--lw-border); border-radius: var(--lw-radius); background-color: var(--lw-surface); overflow-x: auto; } .lw-diagram svg { display: block; width: 100%; height: auto; min-width: 640px; } /* A few diagrams carry more columns than a content column can hold. They keep their type legible and let the surrounding box scroll instead of shrinking the labels into illegibility. */ .lw-diagram--wide svg { min-width: 1040px; } .lw-diagram text { font-family: var(--md-text-font-family), sans-serif; } .lw-node-box { fill: var(--lw-diag-node-bg); stroke: var(--lw-diag-node-border); stroke-width: 1; } .lw-node-label { fill: var(--md-default-fg-color); font-size: 12.5px; font-weight: 600; } .lw-node-sub { fill: var(--lw-diag-label); font-size: 11px; font-weight: 400; } .lw-node--ok .lw-node-box { stroke: var(--lw-diag-ok); } .lw-node--ok .lw-node-label { fill: var(--lw-diag-ok); } .lw-node--bad .lw-node-box { stroke: var(--lw-diag-bad); } .lw-node--bad .lw-node-label { fill: var(--lw-diag-bad); } .lw-node--wait .lw-node-box { stroke: var(--lw-diag-wait); } .lw-node--wait .lw-node-label { fill: var(--lw-diag-wait); } .lw-node--guard .lw-node-box { stroke: var(--lw-diag-guard); } .lw-node--guard .lw-node-label { fill: var(--lw-diag-guard); } .lw-dot { fill: var(--lw-diag-edge); stroke: none; } .lw-dot-ring { fill: none; stroke: var(--lw-diag-edge); stroke-width: 1.5; } .lw-edge { fill: none; stroke: var(--lw-diag-edge); stroke-width: 1.5; stroke-linejoin: round; } .lw-edge--dashed { stroke-dasharray: 5 4; } .lw-edge--bad { stroke: var(--lw-diag-bad); } .lw-cross { fill: none; stroke: var(--lw-diag-bad); stroke-width: 2; stroke-linecap: round; } .lw-edge-label { fill: var(--lw-diag-label); font-size: 11px; } .lw-arrowhead { fill: var(--lw-diag-edge); stroke: none; } .lw-arrowhead--bad { fill: var(--lw-diag-bad); } .lw-band { fill: var(--lw-diag-band); stroke: none; } /* The alternating band is the page's own surface, so a stack of lanes reads as stripes without a second colour to keep in step across two schemes. */ .lw-band--alt { fill: none; } .lw-band-label { fill: var(--lw-diag-label); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } /* Home page -------------------------------------------------------------- */ .lw-hero { margin: 0 0 2.4rem; } .md-typeset .lw-hero h1 { font-size: 2.5rem; line-height: 1.12; margin-bottom: 0.35em; } .lw-hero__tagline { font-size: 0.92rem; line-height: 1.62; color: var(--lw-muted); max-width: 34em; } .md-typeset .md-button { border-radius: 8px; border-width: 1px; font-weight: 600; letter-spacing: -0.005em; padding: 0.5em 1.1em; transition: transform 120ms, box-shadow 120ms, background-color 120ms; } .md-typeset .md-button:hover { transform: translateY(-1px); } /* Material draws both buttons out of --md-primary-fg-color, which this site sets to the header's near-black. In the dark scheme that is also the page background, so the outlined button lost its text entirely and both lost their border. Material patches this for the `black` and `white` primaries it ships; a `custom` primary matches neither of those selectors, so it is patched here, on the same selector the link colour needs. */ body[data-md-color-primary="custom"] .md-typeset .md-button { color: var(--lw-link); border-color: var(--lw-link); } body[data-md-color-primary="custom"] .md-typeset .md-button--primary { background-color: var(--lw-link); border-color: var(--lw-link); color: var(--lw-on-accent); } /* Material's hover state is white on the accent, which is legible on the light accent and thin on the dark one. Use the same on-accent colour as above. */ body[data-md-color-primary="custom"] .md-typeset .md-button:focus, body[data-md-color-primary="custom"] .md-typeset .md-button:hover { background-color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: var(--lw-on-accent); } /* Cards ------------------------------------------------------------------ */ .md-typeset .grid.cards > ul > li { border: 1px solid var(--lw-border); border-radius: var(--lw-radius); background-color: var(--lw-surface); padding: 1rem 1.1rem; box-shadow: none; transition: transform 140ms, border-color 140ms, box-shadow 140ms; } .md-typeset .grid.cards > ul > li:hover { transform: translateY(-2px); border-color: var(--md-accent-fg-color); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.55); } .md-typeset .grid.cards > ul > li > hr { margin: 0.6em 0; border-color: var(--lw-border); } .md-typeset .grid.cards p:last-child { margin-bottom: 0; color: var(--lw-muted); font-size: 0.74rem; } /* Footer ----------------------------------------------------------------- */ .md-footer-meta { background-color: var(--md-primary-fg-color--dark); } .md-copyright { font-size: 0.62rem; } /* Phones ----------------------------------------------------------------- Everything above is written for a content column that does not exist on a phone, so the rules that assume width are relaxed here rather than being softened everywhere. Table width is handled above rather than here, because the rule that caused it hurt every width and not just this one. Code blocks still scroll: a shell command is not prose and breaking it across lines would misrepresent what to type. The diagrams keep their min-width for the reason given above them. */ @media screen and (max-width: 44.9375em) { .md-typeset table:not([class]) { font-size: 0.7rem; } /* A rule and 2.2em of air above every h2 reads as a gap on a narrow column rather than as a section break. */ .md-typeset h2 { margin-top: 1.5em; } .md-typeset pre > code { font-size: 0.74em; } .md-typeset .lw-diagram { padding: 0.55em; } .lw-hero__tagline { font-size: 1rem; } /* 2.5rem is 50px here, which is a headline sized for a column three times this wide. */ .md-typeset .lw-hero h1 { font-size: 1.9rem; } /* The two hero buttons are sized by their own labels, so they wrap onto separate lines at 98px and 336px with their edges touching. Full width gives them one left edge and room to breathe. */ .md-typeset .md-button { display: block; width: 100%; margin: 0 0 0.6rem; text-align: center; } }