/* Search styling injected into the LinuxCNC HTML docs by this project.
Loaded after the docs' own lcnc-overrides.css so the #lcnc-topbar id rules
here win. The topbar, language switcher and base theme already live in the
docs; this only adds the search box, its results drawer, and a small
dark-theme canvas fix so the translucent bar renders consistently. */
/* Declare both schemes and pin the root background per theme so the canvas
behind the translucent topbar is deterministic (no auto-dark flash). */
:root { color-scheme: light dark; }
html { background: #fff; }
@media (prefers-color-scheme: dark) {
html { background: #1e1e1e; }
}
/* Search box in the topbar. */
.lcnc-topbar-search {
margin-left: auto;
margin-right: 0.75rem;
position: relative;
display: flex;
align-items: center;
height: 100%;
font-family: "Open Sans","DejaVu Sans",sans-serif;
/* The bar is always dark, so the box sits on dark in both themes. Size via
pagefind's scale, not an input height override (that desyncs the
absolutely-positioned magnifier/clear). */
--pagefind-ui-scale: 0.6;
--pagefind-ui-background: transparent;
--pagefind-ui-text: #fff; /* input text + magnifier on the dark bar */
--pagefind-ui-primary: #fff;
--pagefind-ui-border: hsla(0,0%,100%,.35);
--pagefind-ui-tag: hsla(0,0%,100%,.15);
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 4px;
--pagefind-ui-font: "Open Sans","DejaVu Sans",sans-serif;
--lcnc-x-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5 L15 15 M15 5 L5 15' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
--lcnc-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='15' y1='15' x2='20.5' y2='20.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Search + language switcher form one right-aligned cluster; zero the
switcher's own margin-left:auto so it does not split the free space. */
.lcnc-topbar-search + .lcnc-lang-switcher { margin-left: 0; }
.lcnc-topbar-search #lcnc-search { width: 13rem; }
/* #lcnc-topbar (id) outranks pagefind-ui.css (injected after this sheet).
The input is a faint white inset on the dark bar. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input {
background: hsla(0,0%,100%,.1);
color: #d8d8d8; /* typed text: a smudge off pure white, both themes */
border-color: hsla(0,0%,100%,.35);
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input:focus {
background: hsla(0,0%,100%,.16);
border-color: hsla(0,0%,100%,.55);
/* replace the OS-accent (blue) focus ring with a neutral white halo */
outline: none;
box-shadow: 0 0 0 2px hsla(0,0%,100%,.18);
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input::placeholder { color: hsla(0,0%,100%,.7); }
/* neutral selection tint (avoid the OS-accent blue) */
.lcnc-topbar-search ::selection { background: hsla(0,0%,100%,.25); color: #fff; }
/* Pagefind's clear control is a "Clear" text button; hide the word and draw a
small white x (background-image SVG, font-independent). */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-clear {
font-size: 0;
background: transparent;
display: flex;
align-items: center;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-clear::after {
content: "";
display: block;
width: 13px;
height: 13px;
opacity: 0.7;
background-image: var(--lcnc-x-icon);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-clear:hover::after { opacity: 1; }
/* Pagefind masks the magnifier with -webkit-mask, which Firefox/Zen render
blank. Use a plain background-image SVG instead (works in every engine);
pagefind's ::before size/position are kept. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__form::before {
background-color: transparent;
-webkit-mask: none;
mask: none;
background-image: var(--lcnc-search-icon);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.9;
}
/* Results drawer floats below the input. It is themed to match the page
(light/dark), unlike the always-dark bar; redefining --pagefind-ui-text on
the drawer recolours all result text in one shot. */
.lcnc-topbar-search .pagefind-ui__drawer {
position: absolute;
top: 100%;
right: 0;
width: 30rem;
max-height: 75vh;
overflow-y: auto;
border-radius: 0 0 6px 6px;
padding: 0.5em 0.85em 0.85em;
z-index: 1200;
--pagefind-ui-text: #222;
background: #fff;
color: #222;
border: 1px solid #d4d4d4;
border-top: none;
box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link,
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link:link { color: #2156a5; }
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link:visited { color: #1d4b8f; }
.lcnc-topbar-search .pagefind-ui__result-excerpt { color: #555; }
.lcnc-topbar-search .pagefind-ui__message { color: #555; }
/* Landing pages style bare p/ul/li generically and that leaks into the drawer;
re-assert result metrics at id specificity so it looks the same everywhere. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-title {
font-size: 1rem;
line-height: 1.25;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-excerpt,
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__message {
font-size: 0.85rem;
line-height: 1.45;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__drawer ul {
font-family: inherit;
margin: 0;
padding: 0;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__drawer li {
line-height: normal;
margin-top: 0;
}
/* soften pagefind's hard-yellow match highlight to a translucent wash */
.lcnc-topbar-search .pagefind-ui__result mark,
.lcnc-topbar-search mark {
background: hsla(48,100%,50%,.30);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
/* Pin the pocket to solid fill + border. A translucent pocket on the
translucent bar cold-paints inconsistently dark in Firefox/Zen; solid
values matching the settled look keep it backdrop-independent. The bar
itself stays translucent. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input {
background: #1f1f1f;
border-color: #5d5d5d;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input:focus {
background: #2e2e2e;
border-color: #8a8a8a;
}
.lcnc-topbar-search .pagefind-ui__drawer {
--pagefind-ui-text: #e0e0e0;
background: #1e1e1e;
color: #e0e0e0;
border-color: #444;
box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link,
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link:link { color: #6fa8dc; }
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__result-link:visited { color: #b48ead; }
.lcnc-topbar-search .pagefind-ui__result-excerpt { color: #aaa; }
.lcnc-topbar-search .pagefind-ui__message { color: #aaa; }
.lcnc-topbar-search .pagefind-ui__result mark,
.lcnc-topbar-search mark {
background: hsla(48,90%,55%,.25);
color: inherit;
}
}
/* The nav links are absolutely centred and ignore the right-hand cluster's
width, so hide them earlier when a search box is present. */
@media (max-width: 1300px) {
.lcnc-topbar:has(.lcnc-topbar-search) .lcnc-topbar-links { display: none; }
}
@media (max-width: 1100px) { .lcnc-topbar-search #lcnc-search { width: 10rem; } }
@media (max-width: 700px) {
.lcnc-topbar-search .pagefind-ui__drawer { width: 88vw; }
/* The bar's other occupants must never absorb the search box's size
changes: the logo does not shrink, the language label does not wrap. */
.lcnc-topbar-home { flex-shrink: 0; }
.lcnc-lang-switcher { flex-shrink: 0; }
.lcnc-lang-label { white-space: nowrap; }
/* Phone choreography: ONE reversible .18s animation. The container keeps
flex: 1 1 0 in BOTH states, so it can never over-allocate the bar (no
squished logo, no sticking out past the right margin); only the inner
box animates width, right-aligned inside the container. Everything
else rides the same .18s, so expansion is the exact reverse of
retraction. margin-left:auto from the base rule must go: auto margins
absorb the free space before flex-grow gets any. */
.lcnc-topbar-search {
flex: 1 1 0;
min-width: 0;
margin-left: 0.5rem;
justify-content: flex-end;
}
.lcnc-topbar-search #lcnc-search {
width: 2.4rem;
/* never deform the icon button: below the supported width the bar
overflows as a whole instead of squashing the magnifier */
flex-shrink: 0;
transition: width .18s ease;
}
.lcnc-topbar-search:focus-within #lcnc-search { width: 100%; }
/* The switcher is the other half of the same animation: it collapses to
zero width while sliding/fading out right, and slides/fades back in
as the box shrinks. The width collapse must happen on the LABEL, not
the switcher: overflow on the switcher would also clip the open
dropdown, which hangs below it. The label's side padding must
collapse too, else a 0-width label still occupies 1.5em. */
.lcnc-lang-label {
overflow: hidden;
max-width: 12rem;
/* the bar gives the label line-height: 1 (16px); with overflow now
hidden that clips descenders (the g in English). Give the text
room inside the clipped box. */
line-height: normal;
transition: max-width .18s ease, padding .18s ease;
}
.lcnc-lang-switcher {
transition: opacity .18s ease, transform .18s ease;
}
.lcnc-topbar:has(.lcnc-topbar-search:focus-within) .lcnc-lang-label {
max-width: 0;
padding-left: 0;
padding-right: 0;
}
.lcnc-topbar:has(.lcnc-topbar-search:focus-within) .lcnc-lang-switcher {
opacity: 0;
transform: translateX(0.75rem);
}
/* Morph, don't snap: the leftover query text, the caret and the button
styling all fade/shape-shift with the width change, so there is no
"bare lens alone in a huge box" frame. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input {
overflow: hidden;
white-space: nowrap;
transition: color .18s ease, caret-color .18s ease,
background-color .18s ease, border-color .18s ease,
border-radius .18s ease, padding .18s ease;
}
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-input::placeholder {
transition: color .18s ease;
}
/* Collapsed: a soft-edged button showing just the magnifier. Keep a faint
fill and border so it reads as tappable, but rounded and with the bar
margin around it so it never crowds the language label. The full box
styling comes back on focus-within (expanded), when the switcher is
hidden and there is nothing to collide with. */
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__search-input,
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__search-input:focus {
padding: 0;
background: hsla(0,0%,100%,.08);
border-color: hsla(0,0%,100%,.3);
border-radius: 8px;
box-shadow: none;
/* hide the placeholder and any leftover query behind the magnifier */
color: transparent;
caret-color: transparent;
}
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__search-input::placeholder {
color: transparent;
}
/* The clear-x fades out with the rest instead of display:none; keep it
unclickable while collapsed, where it would cover the whole tap target. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__search-clear {
transition: opacity .18s ease;
}
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__search-clear {
opacity: 0;
pointer-events: none;
}
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__search-input:active {
background: hsla(0,0%,100%,.16);
}
/* The lens glides from the input's left edge to the box centre, growing as
the box shrinks (and back on focus), instead of popping between the two
positions. pagefind's scale-0.6 magnifier is ~11px; too small to read
as a button, so the collapsed state enlarges it. */
#lcnc-topbar .lcnc-topbar-search .pagefind-ui__form::before {
transition: left .18s ease, top .18s ease, width .18s ease,
height .18s ease, margin .18s ease;
}
#lcnc-topbar .lcnc-topbar-search:not(:focus-within) .pagefind-ui__form::before {
width: 1.15rem;
height: 1.15rem;
left: 50%;
top: 50%;
margin: -0.575rem 0 0 -0.575rem;
}
/* Collapsed (no focus): hide the drawer too, else it stays open anchored
to the shrunken icon slot. The query and results are kept, so refocus
restores the exact previous state. */
.lcnc-topbar-search:not(:focus-within) .pagefind-ui__drawer { display: none; }
}