/* ============================================================ LOOPZ API DOCS (docs.loopz.io) — page chrome + changelog The reference itself is rendered by Scalar; its look is tuned through the customCss block in templates/docs/reference.ftl. This file styles what wraps it: the top bar, and the changelog page, which has no Scalar on it. ============================================================ */ :root { --docs-header-height: 56px; --docs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --docs-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --docs-bg: #ffffff; --docs-bg-2: #f6f6f6; --docs-text-1: #2a2f45; --docs-text-2: #6e7180; --docs-text-3: #8f92a1; --docs-border: #e6e8ee; --docs-accent: #3f51b5; --docs-accent-dark: #303f9f; --docs-accent-tint: #e8eaf6; --docs-success: #2e7d32; --docs-success-tint: #e8f5e9; --docs-info: #1565c0; --docs-info-tint: #e3f2fd; --docs-warning: #8d6e00; --docs-warning-tint: #fff8e1; --docs-error: #c62828; --docs-error-tint: #ffebee; } /* Scalar toggles .dark-mode on ; the chrome follows it. */ .dark-mode { --docs-bg: #0f0f0f; --docs-bg-2: #1a1a1a; --docs-text-1: rgba(255, 255, 255, 0.9); --docs-text-2: rgba(255, 255, 255, 0.62); --docs-text-3: rgba(255, 255, 255, 0.44); --docs-border: rgba(255, 255, 255, 0.12); --docs-accent: #9fa8da; --docs-accent-dark: #c5cae9; --docs-accent-tint: rgba(159, 168, 218, 0.14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--docs-bg); color: var(--docs-text-1); font-family: var(--docs-font); -webkit-font-smoothing: antialiased; } /* ---------- Top bar ---------- */ .docs-header { position: sticky; top: 0; z-index: 1001; height: var(--docs-header-height); background: var(--docs-bg); border-bottom: 1px solid var(--docs-border); } .docs-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; padding: 0 24px; } .docs-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--docs-text-1); flex: 0 0 auto; } .docs-header__brand img { display: block; width: auto; height: 26px; } .dark-mode .docs-header__brand img { filter: invert(1) hue-rotate(180deg); } .docs-header__product { font-size: 15px; font-weight: 500; color: var(--docs-text-2); padding-left: 10px; border-left: 1px solid var(--docs-border); line-height: 1; } .docs-header__nav { display: flex; align-items: stretch; gap: 4px; height: 100%; } .docs-header__nav a { display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--docs-text-2); text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; } .docs-header__nav a:hover { color: var(--docs-text-1); } .docs-header__nav a.is-active { color: var(--docs-text-1); border-bottom-color: var(--docs-accent); } .docs-header__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; } .docs-header__link { font-size: 14px; font-weight: 500; color: var(--docs-text-2); text-decoration: none; } .docs-header__link:hover { color: var(--docs-text-1); } .docs-header__button { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; background: var(--docs-accent); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; } .docs-header__button:hover { background: var(--docs-accent-dark); } .dark-mode .docs-header__button { color: #0f0f0f; } .docs-header__nav a { white-space: nowrap; } @media (max-width: 720px) { .docs-header__inner { gap: 12px; padding: 0 12px; } .docs-header__product, .docs-header__link { display: none; } .docs-header__brand img { height: 22px; } .docs-header__nav { gap: 0; } .docs-header__nav a { padding: 0 8px; font-size: 13px; } .docs-header__button { height: 30px; padding: 0 10px; font-size: 13px; } } @media (max-width: 520px) { .docs-header__actions { display: none; } .docs-header__nav a { padding: 0 7px; } } /* The Scalar reference mounts directly under the header; its own layout takes it from there (see --scalar-custom-header-height in reference.ftl). */ .docs-reference #loopz-api-reference { min-height: calc(100vh - var(--docs-header-height)); } /* ---------- Changelog ---------- */ .changelog { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; } .changelog__header { margin-bottom: 40px; } .changelog__header h1 { margin: 0 0 12px; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; } .changelog__header p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--docs-text-2); } .changelog a { color: var(--docs-accent); } .changelog a:hover { color: var(--docs-accent-dark); } .changelog__entry { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--docs-border); } .changelog__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--docs-text-2); } .changelog__meta time { font-weight: 500; color: var(--docs-text-1); } .changelog__badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--docs-bg-2); color: var(--docs-text-2); } .changelog__badge--added { background: var(--docs-success-tint); color: var(--docs-success); } .changelog__badge--improved { background: var(--docs-info-tint); color: var(--docs-info); } .changelog__badge--fixed { background: var(--docs-warning-tint); color: var(--docs-warning); } .changelog__badge--deprecated, .changelog__badge--removed { background: var(--docs-error-tint); color: var(--docs-error); } .changelog__body h2 { margin: -2px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .changelog__body h2 a { color: inherit; text-decoration: none; } .changelog__body h2 a:hover { color: var(--docs-accent); } .changelog__content { font-size: 15px; line-height: 1.65; color: var(--docs-text-1); } .changelog__content h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; } .changelog__content p { margin: 0 0 12px; } .changelog__content ul { margin: 0 0 12px; padding-left: 22px; } .changelog__content li { margin: 4px 0; } .changelog__content code { font-family: var(--docs-font-code); font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--docs-bg-2); border: 1px solid var(--docs-border); } .changelog__empty { color: var(--docs-text-2); } @media (max-width: 720px) { .changelog { padding: 32px 16px 64px; } .changelog__entry { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; } .changelog__meta { flex-direction: row; align-items: center; gap: 12px; } }