From 62bdd79b3473262dde5fb0a90eab34fe7bf344fd Mon Sep 17 00:00:00 2001 From: Tyler Hoang Date: Sun, 17 May 2026 13:07:40 -0700 Subject: 'UI Shell and General Architecture' --- frontend/app/prism-shell.css | 1004 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1004 insertions(+) create mode 100644 frontend/app/prism-shell.css (limited to 'frontend/app/prism-shell.css') diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css new file mode 100644 index 0000000..c198479 --- /dev/null +++ b/frontend/app/prism-shell.css @@ -0,0 +1,1004 @@ +.prism-app { + display: grid; + grid-template-columns: 256px minmax(0, 1fr); + min-height: 100vh; +} + +.psm-side { + position: sticky; + top: 0; + height: 100vh; + overflow-y: auto; + border-right: 1px solid var(--line-1); + background: var(--ink-1); +} + +.psm-brand { + display: flex; + align-items: center; + gap: var(--sp-3); + padding: var(--sp-5); + border-bottom: 1px solid var(--line-1); +} + +.psm-brand-mark { + width: 34px; + height: 34px; +} + +.psm-brand-copy { + display: flex; + flex-direction: column; + gap: 2px; +} + +.psm-brand-name { + color: var(--fg-1); + font-family: var(--font-display); + font-size: 1.4rem; + line-height: 1; +} + +.psm-brand-sub, +.psm-side-label, +.psm-eyebrow, +.psm-state-title, +.psm-stat-label, +.psm-note-label, +.psm-kpi-key { + color: var(--fg-3); + font-size: var(--fs-12); + font-weight: 600; + letter-spacing: var(--tr-wider); + text-transform: uppercase; +} + +.psm-side-section { + padding: var(--sp-5) var(--sp-4) var(--sp-2); +} + +.psm-nav { + display: flex; + flex-direction: column; + padding: 0 var(--sp-2); +} + +.psm-nav-item { + display: flex; + align-items: center; + gap: var(--sp-3); + width: 100%; + border: 0; + border-left: 2px solid transparent; + background: transparent; + color: var(--fg-2); + padding: 10px var(--sp-3); + text-align: left; +} + +.psm-nav-item:hover { + background: var(--ink-2); + color: var(--fg-1); +} + +.psm-nav-item.active { + border-left-color: var(--brass); + background: var(--ink-2); + color: var(--fg-1); +} + +.psm-nav-item.disabled { + opacity: 0.7; +} + +.psm-nav-copy { + display: flex; + flex: 1; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); +} + +.psm-nav-coming { + color: var(--fg-4); + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-icon { + width: 16px; + height: 16px; + flex: 0 0 16px; + background: currentColor; + opacity: 0.8; + -webkit-mask-image: var(--icon-url); + mask-image: var(--icon-url); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-size: contain; +} + +.icon-chart { + --icon-url: url("/design-system/icons/chart.svg"); +} + +.icon-folder { + --icon-url: url("/design-system/icons/folder.svg"); +} + +.icon-ledger { + --icon-url: url("/design-system/icons/ledger.svg"); +} + +.icon-pulse { + --icon-url: url("/design-system/icons/pulse.svg"); +} + +.icon-window { + --icon-url: url("/design-system/icons/window.svg"); +} + +.icon-dollar { + --icon-url: url("/design-system/icons/dollar.svg"); +} + +.icon-terminal { + --icon-url: url("/design-system/icons/terminal.svg"); +} + +.icon-search { + --icon-url: url("/design-system/icons/search.svg"); +} + +.icon-command { + --icon-url: url("/design-system/icons/command.svg"); +} + +.icon-user { + --icon-url: url("/design-system/icons/user.svg"); +} + +.icon-clock { + --icon-url: url("/design-system/icons/clock.svg"); +} + +.psm-watch { + margin: 0 var(--sp-4); + border-top: 1px solid var(--line-1); +} + +.psm-watch-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); + padding: var(--sp-3) 0; +} + +.psm-watch-limit { + color: var(--fg-4); + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-watch-empty { + color: var(--fg-4); + font-size: var(--fs-14); + padding: 0 0 var(--sp-4); +} + +.psm-watch-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--sp-2); + align-items: center; + border-bottom: 1px solid var(--line-1); +} + +.psm-watch-select { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: var(--sp-2); + align-items: center; + width: 100%; + border: 0; + background: transparent; + color: var(--fg-2); + padding: 10px 0; +} + +.psm-watch-select:hover, +.psm-search-result:hover { + background: rgba(194, 170, 122, 0.04); +} + +.psm-watch-row.active .psm-watch-select { + color: var(--fg-1); +} + +.psm-watch-main { + min-width: 0; + text-align: left; +} + +.psm-watch-symbol { + color: var(--fg-1); + font-size: var(--fs-14); + font-weight: 500; +} + +.psm-watch-date, +.psm-search-result-copy, +.psm-muted-copy, +.psm-profile-copy, +.psm-quality-copy, +.psm-placeholder { + color: var(--fg-3); + font-size: var(--fs-13); +} + +.psm-watch-price, +.psm-watch-change, +.psm-quote-line, +.psm-price, +.psm-change, +.psm-kpi-value, +.psm-detail-value, +.psm-stat-value, +.psm-market-price, +.psm-market-change { + font-family: var(--font-mono); + font-variant-numeric: tabular-nums; +} + +.psm-watch-price, +.psm-watch-change { + text-align: right; + white-space: nowrap; +} + +.psm-watch-remove { + width: 26px; + height: 26px; + border: 1px solid var(--line-2); + border-radius: var(--r-full); + background: transparent; + color: var(--fg-4); + margin-right: 2px; +} + +.psm-watch-remove:hover { + color: var(--negative); + border-color: rgba(181, 73, 75, 0.45); + background: var(--negative-bg); +} + +.psm-main { + display: flex; + flex-direction: column; + min-width: 0; +} + +.psm-top { + position: sticky; + top: 0; + z-index: 10; + display: flex; + align-items: center; + gap: var(--sp-4); + padding: var(--sp-3) var(--sp-6); + border-bottom: 1px solid var(--line-1); + background: rgba(11, 14, 19, 0.94); + backdrop-filter: blur(16px); +} + +.psm-search-shell { + position: relative; + flex: 1; + max-width: 520px; +} + +.psm-search-form { + display: flex; + align-items: center; + gap: var(--sp-2); + border: 1px solid var(--line-2); + border-radius: var(--r-2); + background: var(--ink-2); + padding: 9px var(--sp-3); +} + +.psm-search-form:focus-within { + border-color: var(--brass); + box-shadow: 0 0 0 1px var(--focus-ring); +} + +.psm-search-form input { + width: 100%; + min-width: 0; + border: 0; + outline: 0; + background: transparent; + color: var(--fg-1); + font-family: var(--font-mono); + font-size: var(--fs-13); +} + +.psm-search-form input::placeholder { + color: var(--fg-3); +} + +.psm-kbd { + border: 1px solid var(--line-2); + border-radius: var(--r-1); + background: var(--ink-1); + color: var(--fg-4); + padding: 2px 6px; + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-search-dropdown { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + overflow: hidden; + border: 1px solid var(--line-1); + border-radius: var(--r-2); + background: var(--ink-1); + box-shadow: var(--shadow-2); +} + +.psm-search-result, +.psm-search-status { + width: 100%; + border: 0; + border-bottom: 1px solid var(--line-1); + background: transparent; + color: var(--fg-2); + padding: 10px var(--sp-3); + text-align: left; +} + +.psm-search-status:last-child, +.psm-search-result:last-child { + border-bottom: 0; +} + +.psm-search-result { + display: grid; + grid-template-columns: 84px minmax(0, 1fr); + gap: var(--sp-2); +} + +.psm-search-result-symbol { + color: var(--fg-1); + font-family: var(--font-mono); +} + +.psm-clock-group { + display: flex; + align-items: center; + gap: var(--sp-5); + margin-left: auto; +} + +.psm-market-status { + display: flex; + align-items: center; + gap: var(--sp-3); + color: var(--fg-2); + font-family: var(--font-mono); + font-size: var(--fs-13); +} + +.psm-market-dot { + width: 8px; + height: 8px; + border-radius: var(--r-full); + background: var(--warning); + box-shadow: 0 0 10px rgba(196, 149, 69, 0.45); +} + +.psm-market-dot.open { + background: var(--positive); + box-shadow: 0 0 10px rgba(79, 140, 94, 0.45); +} + +.psm-account { + display: flex; + align-items: center; + gap: var(--sp-2); + border: 1px solid var(--line-2); + border-radius: var(--r-full); + padding: 6px 12px; + color: var(--fg-1); +} + +.psm-account-avatar { + display: inline-flex; + width: 22px; + height: 22px; + align-items: center; + justify-content: center; + border-radius: var(--r-full); + background: var(--brass); + color: var(--brass-ink); + font-family: var(--font-display); + font-style: italic; +} + +.psm-content { + display: flex; + flex-direction: column; + gap: var(--sp-5); + padding: var(--sp-5) var(--sp-6) var(--sp-8); +} + +.psm-market-strip { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--sp-3); +} + +.psm-market-card, +.psm-card, +.psm-state-panel { + border: 1px solid var(--line-1); + border-radius: var(--r-3); + background: var(--ink-1); + box-shadow: var(--shadow-1); +} + +.psm-market-card { + padding: var(--sp-4); +} + +.psm-market-name { + color: var(--fg-4); + font-size: var(--fs-12); + font-weight: 600; + letter-spacing: var(--tr-wider); + text-transform: uppercase; +} + +.psm-market-price { + display: block; + margin-top: 6px; + color: var(--fg-1); + font-size: var(--fs-18); +} + +.positive { + color: var(--positive); +} + +.negative { + color: var(--negative); +} + +.neutral { + color: var(--fg-3); +} + +.psm-ticker-head { + display: grid; + grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) auto; + gap: var(--sp-5); + align-items: end; + padding-bottom: var(--sp-4); + border-bottom: 1px solid var(--line-1); +} + +.psm-header-left { + min-width: 0; +} + +.psm-identity-line { + color: var(--brass); + display: block; + margin-bottom: var(--sp-2); +} + +.psm-heading-row { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: var(--sp-4); +} + +.psm-symbol { + color: var(--fg-1); + font-family: var(--font-display); + font-size: clamp(3rem, 6vw, var(--fs-64)); + line-height: 0.95; + letter-spacing: -0.03em; +} + +.psm-company-name { + color: var(--fg-2); + font-family: var(--font-display); + font-size: var(--fs-24); + font-style: italic; +} + +.psm-partial-chip, +.psm-status-chip, +.psm-tag { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: var(--r-full); + padding: 5px 10px; + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-partial-chip { + border: 1px solid rgba(196, 149, 69, 0.4); + background: var(--warning-bg); + color: var(--warning); +} + +.psm-status-chip { + border: 1px solid rgba(79, 140, 94, 0.35); + background: var(--positive-bg); + color: var(--positive); +} + +.psm-status-chip.partial { + border-color: rgba(196, 149, 69, 0.4); + background: var(--warning-bg); + color: var(--warning); +} + +.psm-status-chip.invalid { + border-color: rgba(181, 73, 75, 0.4); + background: var(--negative-bg); + color: var(--negative); +} + +.psm-subline { + margin-top: var(--sp-2); + color: var(--fg-3); + font-size: var(--fs-14); +} + +.psm-price-stack { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; +} + +.psm-price { + color: var(--fg-1); + font-size: clamp(2.4rem, 4vw, var(--fs-48)); + line-height: 1; +} + +.psm-change { + font-size: var(--fs-16); +} + +.psm-quote-line { + color: var(--fg-3); + font-size: var(--fs-12); +} + +.psm-primary-action, +.psm-ghost-action { + border-radius: var(--r-2); + padding: 10px 14px; + font-size: var(--fs-12); + font-weight: 600; + letter-spacing: var(--tr-wider); + text-transform: uppercase; +} + +.psm-primary-action { + border: 1px solid var(--brass); + background: var(--brass); + color: var(--brass-ink); +} + +.psm-primary-action.subtle { + background: transparent; + color: var(--brass); +} + +.psm-ghost-action { + border: 1px solid var(--line-2); + background: transparent; + color: var(--fg-2); +} + +.psm-range { + display: flex; + flex-direction: column; + gap: var(--sp-2); +} + +.psm-range-values { + display: flex; + justify-content: space-between; + gap: var(--sp-2); + color: var(--fg-3); + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-range-rail { + position: relative; + height: 4px; + border-radius: var(--r-full); + background: var(--ink-3); +} + +.psm-range-indicator { + position: absolute; + top: -4px; + width: 2px; + height: 12px; + background: var(--brass); +} + +.psm-kpis { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + overflow: hidden; +} + +.psm-kpi { + display: flex; + flex-direction: column; + gap: 4px; + padding: var(--sp-4) var(--sp-5); + border-right: 1px solid var(--line-1); +} + +.psm-kpi:last-child { + border-right: 0; +} + +.psm-kpi-value { + color: var(--fg-1); + font-size: var(--fs-24); +} + +.psm-kpi-sub { + color: var(--fg-3); + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-kpi-value.missing, +.psm-detail-value.missing, +.psm-stat-value.missing { + color: var(--fg-4); +} + +.psm-main-grid { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); + gap: var(--sp-5); +} + +.psm-column { + display: flex; + flex-direction: column; + gap: var(--sp-5); + min-width: 0; +} + +.psm-card { + padding: var(--sp-5); +} + +.psm-card-head { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: var(--sp-3); + margin-bottom: var(--sp-3); +} + +.psm-card-title { + margin: 0; + color: var(--fg-1); + font-family: var(--font-display); + font-size: var(--fs-24); +} + +.psm-tabs { + display: flex; + gap: 4px; + border: 1px solid var(--line-2); + border-radius: var(--r-1); + background: var(--ink-2); + padding: 2px; +} + +.psm-tab { + border: 0; + border-radius: var(--r-1); + background: transparent; + color: var(--fg-3); + padding: 5px 10px; + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-tab.active { + background: var(--ink-3); + color: var(--fg-1); +} + +.psm-chart-frame { + overflow: hidden; + border: 1px solid var(--line-1); + border-radius: var(--r-2); + background: linear-gradient(180deg, rgba(194, 170, 122, 0.03), rgba(194, 170, 122, 0)); +} + +.psm-chart-meta { + color: var(--fg-3); + font-size: var(--fs-13); + margin-bottom: var(--sp-3); +} + +.psm-state-panel, +.psm-card-empty { + padding: var(--sp-5); +} + +.psm-state-panel h1, +.psm-state-panel h2 { + margin: 0 0 var(--sp-2); + color: var(--fg-1); + font-family: var(--font-display); + font-size: var(--fs-38); + font-weight: 500; +} + +.psm-state-panel p { + margin: 0 0 var(--sp-4); + color: var(--fg-3); + font-size: var(--fs-14); + line-height: 1.5; +} + +.psm-signal-grid, +.psm-detail-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-3); +} + +.psm-signal, +.psm-detail-item { + border: 1px solid var(--line-1); + border-radius: var(--r-2); + background: var(--ink-2); + padding: var(--sp-3); +} + +.psm-signal-key { + color: var(--fg-4); + font-size: var(--fs-12); + font-weight: 600; + letter-spacing: var(--tr-wider); + text-transform: uppercase; +} + +.psm-signal-value, +.psm-detail-value, +.psm-stat-value { + display: block; + margin-top: 8px; + color: var(--fg-1); + font-size: var(--fs-18); +} + +.psm-signal-copy, +.psm-detail-copy { + display: block; + margin-top: 6px; + color: var(--fg-3); + font-size: var(--fs-13); + line-height: 1.45; +} + +.psm-signal.pos { + border-color: rgba(79, 140, 94, 0.35); +} + +.psm-signal.warn { + border-color: rgba(196, 149, 69, 0.35); +} + +.psm-signal.neg { + border-color: rgba(181, 73, 75, 0.35); +} + +.psm-profile-list, +.psm-stat-list, +.psm-source-list { + display: flex; + flex-direction: column; + gap: var(--sp-3); +} + +.psm-stat-row, +.psm-profile-row, +.psm-source-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--sp-3); + align-items: start; + padding-bottom: var(--sp-3); + border-bottom: 1px solid var(--line-1); +} + +.psm-stat-row:last-child, +.psm-profile-row:last-child, +.psm-source-row:last-child { + border-bottom: 0; + padding-bottom: 0; +} + +.psm-profile-key, +.psm-source-key { + color: var(--fg-4); + font-size: var(--fs-12); + font-weight: 600; + letter-spacing: var(--tr-wider); + text-transform: uppercase; +} + +.psm-profile-value, +.psm-source-value { + color: var(--fg-1); + text-align: right; + word-break: break-word; +} + +.psm-source-value { + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-profile-summary { + margin: var(--sp-4) 0 0; + color: var(--fg-3); + font-size: var(--fs-14); + line-height: 1.55; +} + +.psm-stack { + display: flex; + flex-wrap: wrap; + gap: var(--sp-2); +} + +.psm-field-tag { + border: 1px solid var(--line-2); + border-radius: var(--r-full); + padding: 5px 10px; + color: var(--fg-3); + font-family: var(--font-mono); + font-size: var(--fs-12); +} + +.psm-field-tag.missing { + color: var(--warning); + border-color: rgba(196, 149, 69, 0.35); + background: var(--warning-bg); +} + +.psm-loading-shell { + display: flex; + flex-direction: column; + gap: var(--sp-5); +} + +.psm-skeleton { + position: relative; + overflow: hidden; + min-height: 160px; +} + +.psm-skeleton::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent); + transform: translateX(-100%); + animation: prism-sweep 1.4s infinite; +} + +.psm-card-empty { + color: var(--fg-3); + font-size: var(--fs-14); +} + +.psm-error-copy { + color: var(--negative); +} + +.psm-link { + color: var(--brass-bright); + text-decoration-color: rgba(220, 199, 158, 0.4); +} + +@keyframes prism-sweep { + 100% { + transform: translateX(100%); + } +} + +@media (max-width: 1200px) { + .psm-ticker-head, + .psm-main-grid, + .psm-market-strip, + .psm-kpis { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .psm-ticker-head { + align-items: start; + } + + .psm-price-stack, + .psm-top-action { + justify-self: start; + } +} + +@media (max-width: 920px) { + .prism-app { + grid-template-columns: 1fr; + } + + .psm-side { + position: static; + height: auto; + } + + .psm-top { + flex-wrap: wrap; + padding-inline: var(--sp-4); + } + + .psm-clock-group { + width: 100%; + justify-content: space-between; + } + + .psm-content { + padding-inline: var(--sp-4); + } + + .psm-market-strip, + .psm-kpis, + .psm-main-grid, + .psm-detail-grid, + .psm-signal-grid, + .psm-ticker-head { + grid-template-columns: 1fr; + } + + .psm-heading-row { + align-items: start; + flex-direction: column; + gap: var(--sp-2); + } + + .psm-price-stack { + align-items: start; + } +} -- cgit v1.3-2-g0d8e