/* QShell Template — app styles. Class prefix: qsa-. Everything themes via [data-theme] + --qsk-accent + the design tokens. The collapsible left menu follows the handoff's app-with-menu.html. */ * { box-sizing: border-box; } /* The user's glow fills the viewport (qsk-bg-* on ); body stays transparent so it shows through. */ html { background: var(--qsk-bg, #f5f6f9); } body { margin: 0; min-height: 100vh; background: transparent; font-family: var(--font-family, 'DM Sans', system-ui, sans-serif); color: var(--color-primary-text); font-size: 14px; line-height: 24px; display: flex; } /* ---- Left menu pane (glass) ---- */ .qsa-nav { width: 248px; flex: none; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; background: var(--glass-panel); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-right: 1px solid var(--glass-border); transition: var(--transition); } .qsa-nav.collapsed { width: 64px; } .qsa-nav-toggle { margin: 12px; width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radius-circle); cursor: pointer; color: var(--color-secondary-text); transition: var(--transition); } .qsa-nav-toggle:hover { background: var(--glass-pill-hover); color: var(--color-primary-text); } .qsa-nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--qsk-accent); } .qsa-nav-list { flex: 1; overflow-y: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; } .qsa-nav-group { font: var(--text-small); color: var(--color-gray-500); padding: 16px 12px 4px; white-space: nowrap; overflow: hidden; } .qsa-nav.collapsed .qsa-nav-group { padding: 8px 4px; } .qsa-nav.collapsed .qsa-nav-group span { display: none; } .qsa-nav.collapsed .qsa-nav-group::after { content: ''; display: block; border-top: 1px solid var(--glass-border); } .qsa-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-pill); color: var(--color-secondary-text); font: var(--text-button); font-family: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; transition: var(--transition); } .qsa-nav-item svg { flex: none; } .qsa-nav-item:hover { background: var(--glass-pill-hover); color: var(--color-primary-text); } .qsa-nav-item[aria-current="page"] { background: color-mix(in oklab, var(--qsk-accent) 14%, transparent); color: var(--qsk-accent); } .qsa-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--qsk-accent); } .qsa-nav.collapsed .qsa-nav-item { justify-content: center; padding: 10px; } .qsa-nav.collapsed .qsa-nav-item span { display: none; } /* ---- Pane footer: app · env · version → change log ---- */ .qsa-nav-footer { padding: 12px; border-top: 1px solid var(--glass-border); } .qsa-nav-footer a { display: block; font: var(--text-small); color: var(--color-gray-500); text-decoration: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--radius-tooltip); padding: 6px 4px; transition: var(--transition); } .qsa-nav-footer a:hover { color: var(--qsk-accent); } .qsa-nav.collapsed .qsa-nav-footer a .full { display: none; } .qsa-nav-footer a .short { display: none; } .qsa-nav.collapsed .qsa-nav-footer a .short { display: inline; } /* ---- Content ---- */ .qsa-content { flex: 1; min-width: 0; padding: 32px; max-width: 1100px; } .qsa-title { font: var(--text-title); font-size: 24px; margin: 0 0 20px; } /* .qsa-card itself is a component in kit.css; this is just page spacing for cards in the content pane. */ .qsa-content > .qsa-card { max-width: 720px; margin-bottom: 16px; } /* ---- Style-kit showcase layout (the /Kit/* pages) ---- */ .kit { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; } .kit-wide { grid-column: 1 / -1; } .kit .demo-row { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: center; } .kit .demo-stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .kit-swatch { height: 48px; border-radius: 10px; border: 1px solid var(--glass-border); } /* ---- Field list ---- */ .qsa-fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 16px 0 0; } .qsa-fields dt { color: var(--color-gray-500); font: var(--text-small); } .qsa-fields dd { margin: 0; color: var(--color-primary-text); word-break: break-word; } /* Buttons (.qsa-btn*) are components in kit.css. */ .qsa-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .qsa-log { margin: 12px 0 0; padding-left: 18px; color: var(--color-secondary-text); } .qsa-log li { margin: 4px 0; } .qsa-log strong { color: var(--color-primary-text); } /* ---- Mobile ---- */ @media (max-width: 700px) { .qsa-content { padding: 20px 16px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }