/* lc-kit 1 sha256:9de298cfc14ad36d7ca1609bb655e2539a31b48f91a143808bd60d56bfd93b55 */ /* Libre Computer hardware-tool shell — shared by the GPIO pinout and the board layout viewer. * * These two sites had grown the same header, the same board picker, the same * search box and the same footer twice, with the same seven token names holding * the same seven values in both. This is that shell, defined once. * * THEME. Three states, matching libre.computer: light, dark, and auto, which * follows the OS and is the default -- a visitor whose desktop is dark should * not have to ask twice. The switch is a `dark` class on , set before * first paint by the inline script in each page's , so a dark visitor * never sees a white flash. Light is the base and dark is the override, because * a stylesheet that loses its media query should degrade to the more legible * of the two. * * The dark values are exactly what both sites shipped before this file existed, * so adopting the kit changes nothing for a dark visitor and adds a light theme * that did not exist. * * WHAT BELONGS HERE. The shell and nothing else: page frame, top bar, brand, * the controls slot, notices, footer, form controls, focus, and the theme * button. A site's own subject matter -- the pinout's mux-class colours, the * layout viewer's copper-layer colours -- stays in that site's stylesheet, * because nothing is shared by having one file know about both. * * This file is VENDORED. Edit tools/lc-ui-kit/lc-kit.css in the monorepo and * run tools/lc-ui-kit/sync.py; a hand-edit here fails each site's CI. */ :root { color-scheme: light; --bg: #ffffff; --bg-raised: #f8fafc; --bg-sunken: #eef2f6; --border: #d8e0e8; --text: #0f172a; --text-dim: #5a6673; /* Blue TEXT on the page ground, so it darkens on white (#0077b0 is 4.92:1) and lightens on the dark ground below. Same two shades libre.computer uses, and for the same contrast reason. */ --accent: #0077b0; --brass: #8a6a10; --warn: #b45309; --danger: #b42318; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); } html.dark { color-scheme: dark; --bg: #14161a; --bg-raised: #1d2026; --bg-sunken: #0e1013; --border: #33383f; --text: #e8eaed; --text-dim: #9aa0a6; --accent: #4da3ff; --brass: #c9a227; --warn: #f76b15; --danger: #f5a3a6; --shadow: none; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: flex; flex-direction: column; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :where(button, select, input, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- top bar ---------------------------------------------------------- */ .lc-topbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--border); z-index: 10; } .lc-brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; } .lc-brand-name { font-size: 18px; font-weight: 700; letter-spacing: .3px; color: var(--text); white-space: nowrap; } .lc-brand-name:hover { text-decoration: none; color: var(--accent); } .lc-brand-sub { font-size: 13px; color: var(--text-dim); white-space: nowrap; } /* SIGNAL CLASS PALETTE -- shared, because the two tools colour the SAME pins. The pinout draws a board's header and the layout draws that header's pads on the PCB, and a visitor moving between them reads the colour as meaning the same thing. It did not live here at first, when only one tool used it; a second copy in the layout's own stylesheet would be a second answer the first time a colour changed. Both sites now take the one definition, and check-kit.py fails the build if a vendored copy drifts. RAILS RAMP BY VOLTAGE, red through orange to yellow as the supply falls: 12V and PoE deepest, 5V red, 3.3V orange, 1.8V yellow. The ramp used to run red into brown, which made 3.3V a burnt orange and 1.8V a tan -- neither nameable as a colour, and the three rails a reader actually reaches for on a header are the three that have to be told apart at a glance. I2C yellow / SPI blue / GPIO green match the board silkscreen. */ :root { --c-poe: #6e0011; --c-power12v: #b8000f; --c-power5v: #d32f2f; --c-power3v3: #e8730c; --c-powerlv: #e0a800; /* 1.8V / 3.0V */ --c-gnd: #454b54; --c-nc: #6b6547; /* not connected */ --c-gpio: #2f7d3f; --c-i2c: #9a7b0a; --c-spi: #1f5fd0; --c-uart: #7c30cc; --c-pwm: #c4295a; --c-i2s: #0b6f80; --c-pcm: #0b5566; --c-tdm: #13876b; --c-spdif: #7a2490; --c-pdm: #4a7a0a; --c-dac: #076a4c; --c-adc: #5b8a12; --c-clk: #6b737b; --c-jtag: #c25a06; --c-cec: #5334c4; --c-ir: #c33a6a; --c-sdio: #0d7f95; --c-nand: #6d5449; --c-video: #a81c4c; --c-pcie: #6a4fc4; --c-usb: #1f6fb5; --c-eth: #0d8f6a; --c-misc: #5a6570; } /* THE SERIAL CONSOLE HEADER IS COLOURED AS THE CABLE, not as a signal class. Ground black, TX white, RX green -- the USB-TTL lead everyone plugs into it, and the colours our own documentation has always named for that header: "2J1 Connector Highlighted in Red: Ground (BLACK) TX (WHITE) RX (GREEN)". Someone at the board with the cable in their hand is matching wire to pin, so the pin should be the colour of the wire. These are wire colours, so they do NOT flip with the theme -- a black lead is black on both. They sit on the drawn board rather than on the page. */ :root, html.dark { --c-wire-gnd: #14161a; --c-wire-tx: #f3f5f7; --c-wire-rx: #2ea043; } html.dark { --c-poe: #6e0011; --c-power12v: #cc0f1b; --c-power5v: #e5484d; --c-power3v3: #f76b15; --c-powerlv: #f5c518; /* 1.8V / 3.0V */ --c-gnd: #454b54; --c-nc: #3c3a2e; --c-gpio: #46a758; --c-i2c: #eac54f; --c-spi: #3b82f6; --c-uart: #a855f7; --c-pwm: #ec5f87; --c-i2s: #1098ad; --c-pcm: #0b7285; --c-tdm: #63e6be; --c-spdif: #862e9e; --c-pdm: #5c940d; --c-dac: #087f5b; --c-adc: #94d82d; --c-clk: #adb5bd; --c-jtag: #ff922b; --c-cec: #7048e8; --c-ir: #f06595; --c-sdio: #66d9e8; --c-nand: #8d6e63; --c-video: #c2255c; --c-pcie: #b197fc; --c-usb: #74c0fc; --c-eth: #12b886; --c-misc: #6c757d; } /* The switch between the two hardware tools. It sits where the subtitle used to, because it says the same thing -- which tool this is -- and additionally says what the other one is, which a visitor otherwise has no way to find out from here. The current tool stays plain text: a link to the page you are on is a dead control that costs a click to discover. */ .lc-sites { display: flex; align-items: baseline; gap: 10px; font-size: 13px; min-width: 0; } .lc-site { white-space: nowrap; color: var(--text-dim); } .lc-site[aria-current="page"] { color: var(--text); font-weight: 600; } a.lc-site:hover { color: var(--accent); text-decoration: none; } a.lc-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Separator drawn rather than typed, so it is not read out as a word and not selected when the visitor copies the heading. */ .lc-site + .lc-site::before { content: ""; display: inline-block; width: 1px; height: 11px; margin-right: 10px; vertical-align: -1px; background: var(--border); } /* A pill for a state the visitor should not have to infer, e.g. that the board picker is currently listing boards nobody can buy yet. */ .lc-flag { padding: 1px 7px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; } /* A