/* * kube-language-server base stylesheet. * * Defines the shared "page chrome" components (the kls-* classes) used by both * the landing page and the schema documentation pages so a single stylesheet * styles both uniformly. Operator-supplied CSS is layered on top via * /assets/custom.css and can override any of the :root tokens below. * * Self-contained on purpose: no external fonts or CDNs, so it works offline and * under a strict content security policy. */ :root { --kls-bg: #ffffff; --kls-surface: #f8f9fa; --kls-fg: #1f2328; --kls-muted: #6c757d; --kls-border: #dee2e6; --kls-accent: #2563eb; --kls-accent-fg: #ffffff; --kls-code-bg: #f1f3f5; --kls-radius: 8px; --kls-maxwidth: 64rem; --kls-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kls-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { --kls-bg: #0d1117; --kls-surface: #161b22; --kls-fg: #e6edf3; --kls-muted: #8b949e; --kls-border: #30363d; --kls-accent: #4c8dff; --kls-accent-fg: #0d1117; --kls-code-bg: #161b22; } } /* Landing page uses kls-page on ; doc pages keep the library . */ .kls-page { margin: 0; background: var(--kls-bg); color: var(--kls-fg); font-family: var(--kls-font); line-height: 1.5; } .kls-header { max-width: var(--kls-maxwidth); margin: 0 auto; padding: 2rem 1.5rem 1rem; } .kls-header__title { margin: 0; font-size: 1.875rem; font-weight: 700; } .kls-header__subtitle { margin: 0.25rem 0 0; color: var(--kls-muted); } /* Shared nav / breadcrumb bar. Injected on doc pages right after . */ .kls-nav { display: flex; align-items: baseline; gap: 1.5rem; padding: 0.75rem 1.5rem; background: var(--kls-surface); border-bottom: 1px solid var(--kls-border); font-family: var(--kls-font); } .kls-nav__link { color: var(--kls-fg); text-decoration: none; font-weight: 600; } .kls-nav__link:hover { text-decoration: underline; } .kls-nav__context { color: var(--kls-muted); } .kls-main { max-width: var(--kls-maxwidth); margin: 0 auto; padding: 1.5rem; } .kls-section { margin-bottom: 2rem; } .kls-code { background: var(--kls-code-bg); border: 1px solid var(--kls-border); border-radius: var(--kls-radius); padding: 0.75rem 1rem; overflow-x: auto; font-family: var(--kls-mono); font-size: 0.875rem; } .kls-search { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .kls-search__input { flex: 1 1 auto; padding: 0.6rem 0.85rem; font-size: 1rem; color: var(--kls-fg); background: var(--kls-bg); border: 1px solid var(--kls-border); border-radius: var(--kls-radius); } .kls-search__input:focus { outline: none; border-color: var(--kls-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kls-accent) 25%, transparent); } .kls-search__count { flex: 0 0 auto; color: var(--kls-muted); font-size: 0.875rem; white-space: nowrap; } .kls-schema-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--kls-border); border-radius: var(--kls-radius); overflow: hidden; } .kls-schema-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 1rem; border-top: 1px solid var(--kls-border); } .kls-schema-item:first-child { border-top: none; } .kls-schema-item a { color: var(--kls-accent); text-decoration: none; font-family: var(--kls-mono); font-size: 0.9rem; } .kls-schema-item a:hover { text-decoration: underline; } .kls-schema-item a + a { color: var(--kls-muted); font-size: 0.8rem; } .kls-footer { max-width: var(--kls-maxwidth); margin: 0 auto; padding: 1.5rem; color: var(--kls-muted); font-size: 0.875rem; border-top: 1px solid var(--kls-border); } /* Search utility: hide non-matching list items. */ .kls-hidden { display: none !important; }