/* GridVision theming for Scalar API Reference. Keep this file focused on brand tokens so it can be reused for other doc UIs (Redoc/RapiDoc) later. Scalar toggles `.light-mode` / `.dark-mode` on the . Define our palette per-mode so both light and dark variants are supported. */ :root { --scalar-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; --scalar-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Match Hub's app bar sizing. */ --gv-docs-topbar-height: 50px; /* Match Hub app bar colors (design tokens: Teal.900 + Neutral.50). */ --gv-appbar-background: #013232; --gv-appbar-foreground: #fafafa; /* Layout tuning (Scalar defaults shown in their theming docs). */ --scalar-sidebar-width: 300px; --scalar-container-width: 760px; /* Let native controls render appropriately in both modes. */ color-scheme: light dark; } html, body { height: 100%; } body { margin: 0; font-family: var(--scalar-font); padding-top: var(--gv-docs-topbar-height); } /* GridVision brand colors */ :root { --gv-brand-primary: #025b5b; --gv-brand-accent: #159998; } .light-mode { --scalar-color-1: rgba(11, 31, 31, 0.9); --scalar-color-2: rgba(11, 31, 31, 0.65); --scalar-color-3: rgba(11, 31, 31, 0.45); --scalar-color-accent: var(--gv-brand-primary); --scalar-background-1: #ffffff; --scalar-background-2: #f6f8f8; --scalar-background-3: #eef2f2; --scalar-background-accent: rgba(2, 91, 91, 0.06); --scalar-border-color: rgba(0, 0, 0, 0.08); } .dark-mode { --scalar-color-1: rgba(255, 255, 255, 0.86); --scalar-color-2: rgba(255, 255, 255, 0.56); --scalar-color-3: rgba(255, 255, 255, 0.36); --scalar-color-accent: var(--gv-brand-accent); --scalar-background-1: #0b1414; --scalar-background-2: #0f1c1c; --scalar-background-3: #162828; --scalar-background-accent: rgba(21, 153, 152, 0.12); --scalar-border-color: rgba(255, 255, 255, 0.1); } /* Sidebar tokens: keep aligned with the main palette. */ .light-mode .sidebar { --scalar-sidebar-background-1: var(--scalar-background-1); --scalar-sidebar-item-hover-background: var(--scalar-background-2); --scalar-sidebar-item-active-background: var(--scalar-background-2); --scalar-sidebar-border-color: var(--scalar-border-color); --scalar-sidebar-color-1: var(--scalar-color-1); --scalar-sidebar-color-2: var(--scalar-color-2); --scalar-sidebar-color-active: var(--scalar-color-1); --scalar-sidebar-search-background: var(--scalar-background-2); --scalar-sidebar-search-border-color: var(--scalar-border-color); --scalar-sidebar-search-color: var(--scalar-color-3); } .dark-mode .sidebar { --scalar-sidebar-background-1: var(--scalar-background-1); --scalar-sidebar-item-hover-background: var(--scalar-background-2); --scalar-sidebar-item-active-background: var(--scalar-background-2); --scalar-sidebar-border-color: var(--scalar-border-color); --scalar-sidebar-color-1: var(--scalar-color-1); --scalar-sidebar-color-2: var(--scalar-color-2); --scalar-sidebar-color-active: var(--scalar-color-1); --scalar-sidebar-search-background: var(--scalar-background-2); --scalar-sidebar-search-border-color: var(--scalar-border-color); --scalar-sidebar-search-color: var(--scalar-color-3); } /* Top bar (logo+title left, actions right). */ .gv-docs-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--gv-docs-topbar-height); /* Scalar uses fairly high z-index values for some UI layers; ensure we’re above them. */ z-index: 2147483647; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--gv-appbar-background); color: var(--gv-appbar-foreground); } .gv-docs-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .gv-logo-mini { display: block; height: 12px; width: auto; } .gv-docs-brand:focus-visible, .gv-docs-link:focus-visible { outline: 2px solid var(--scalar-color-accent); outline-offset: 3px; border-radius: 6px; } .gv-docs-title { font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gv-docs-links { display: inline-flex; align-items: center; gap: 20px; } .gv-docs-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--gv-appbar-foreground) 78%, transparent); text-decoration: none; } .gv-docs-icon { width: 16px; height: 16px; flex: 0 0 auto; } .gv-docs-link:hover { color: var(--gv-appbar-foreground); text-decoration: underline; text-underline-offset: 2px; } /* Hide in-page meta links that we surface in the top bar instead. */ #app a[href$='/openapi/grid-vision.json'], #app a[href$='/openapi/grid-vision-api.json'], #app a[href^='mailto:support@esmartsystems.com'], #app a[href='https://www.esmartsystems.com/terms'] { display: none !important; }