summaryrefslogtreecommitdiff
path: root/frontend/app/prism-shell.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/prism-shell.css')
-rw-r--r--frontend/app/prism-shell.css170
1 files changed, 126 insertions, 44 deletions
diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
index 9b0e1b5..b6372c2 100644
--- a/frontend/app/prism-shell.css
+++ b/frontend/app/prism-shell.css
@@ -1,6 +1,6 @@
.prism-app {
display: grid;
- grid-template-columns: 256px minmax(0, 1fr);
+ grid-template-columns: 284px minmax(0, 1fr);
min-height: 100vh;
}
@@ -192,22 +192,22 @@
.psm-watch-row {
display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- gap: var(--sp-2);
+ grid-template-columns: minmax(0, 1fr) 34px;
+ gap: var(--sp-3);
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);
+ grid-template-columns: minmax(0, 1fr) minmax(82px, auto) minmax(52px, auto);
+ column-gap: var(--sp-5);
align-items: center;
width: 100%;
border: 0;
background: transparent;
color: var(--fg-2);
- padding: 10px 0;
+ padding: 12px 0;
}
.psm-watch-select:hover,
@@ -221,13 +221,22 @@
.psm-watch-main {
min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
text-align: left;
}
+.psm-watch-cell {
+ min-width: 0;
+}
+
.psm-watch-symbol {
color: var(--fg-1);
+ font-family: var(--font-mono);
font-size: var(--fs-14);
font-weight: 500;
+ letter-spacing: 0.04em;
}
.psm-watch-date,
@@ -240,6 +249,11 @@
font-size: var(--fs-13);
}
+.psm-watch-date {
+ line-height: 1.2;
+ white-space: nowrap;
+}
+
.psm-watch-price,
.psm-watch-change,
.psm-quote-line,
@@ -261,13 +275,13 @@
}
.psm-watch-remove {
- width: 26px;
- height: 26px;
+ width: 30px;
+ height: 30px;
border: 1px solid var(--line-2);
- border-radius: var(--r-full);
+ border-radius: var(--r-2);
background: transparent;
color: var(--fg-4);
- margin-right: 2px;
+ justify-self: end;
}
.psm-watch-remove:hover {
@@ -484,9 +498,9 @@
.psm-ticker-head {
display: grid;
- grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) auto;
+ grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.75fr) minmax(220px, auto);
gap: var(--sp-5);
- align-items: end;
+ align-items: start;
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--line-1);
}
@@ -495,32 +509,32 @@
min-width: 0;
}
+.psm-head-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: var(--sp-3);
+}
+
.psm-identity-line {
color: var(--brass);
- display: block;
- margin-bottom: var(--sp-2);
+ display: inline-flex;
}
.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;
+ align-items: flex-start;
+ gap: var(--sp-3);
}
.psm-company-name {
- color: var(--fg-2);
+ color: var(--fg-1);
font-family: var(--font-display);
- font-size: var(--fs-24);
+ font-size: clamp(2.8rem, 5vw, var(--fs-56));
font-style: italic;
+ line-height: 0.95;
}
.psm-partial-chip,
@@ -559,22 +573,30 @@
color: var(--negative);
}
+.psm-tag {
+ border: 1px solid var(--line-2);
+ background: var(--ink-2);
+ color: var(--fg-2);
+}
+
.psm-subline {
margin-top: var(--sp-2);
color: var(--fg-3);
font-size: var(--fs-14);
+ max-width: 52ch;
}
.psm-price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
- gap: 4px;
+ gap: 5px;
+ padding-top: 2px;
}
.psm-price {
color: var(--fg-1);
- font-size: clamp(2.4rem, 4vw, var(--fs-48));
+ font-size: clamp(2.6rem, 4vw, var(--fs-48));
line-height: 1;
}
@@ -585,6 +607,8 @@
.psm-quote-line {
color: var(--fg-3);
font-size: var(--fs-12);
+ text-transform: uppercase;
+ letter-spacing: var(--tr-wider);
}
.psm-primary-action,
@@ -601,6 +625,7 @@
border: 1px solid var(--brass);
background: var(--brass);
color: var(--brass-ink);
+ margin-top: var(--sp-2);
}
.psm-primary-action.subtle {
@@ -618,6 +643,7 @@
display: flex;
flex-direction: column;
gap: var(--sp-2);
+ padding-top: 8px;
}
.psm-range-values {
@@ -629,6 +655,10 @@
font-size: var(--fs-12);
}
+.psm-range-spot {
+ color: var(--fg-1);
+}
+
.psm-range-rail {
position: relative;
height: 4px;
@@ -644,6 +674,11 @@
background: var(--brass);
}
+.psm-range-caption {
+ color: var(--fg-4);
+ font-size: var(--fs-12);
+}
+
.psm-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -769,14 +804,12 @@
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);
@@ -792,7 +825,6 @@
text-transform: uppercase;
}
-.psm-signal-value,
.psm-detail-value,
.psm-stat-value {
display: block;
@@ -801,7 +833,6 @@
font-size: var(--fs-18);
}
-.psm-signal-copy,
.psm-detail-copy {
display: block;
margin-top: 6px;
@@ -810,20 +841,50 @@
line-height: 1.45;
}
-.psm-signal.pos {
- border-color: rgba(79, 140, 94, 0.35);
+.psm-signal-list {
+ display: flex;
+ flex-direction: column;
}
-.psm-signal.warn {
- border-color: rgba(196, 149, 69, 0.35);
+.psm-signal-row {
+ display: grid;
+ grid-template-columns: 84px minmax(0, 1fr) auto;
+ gap: var(--sp-3);
+ align-items: center;
+ padding: 12px 0;
+ border-bottom: 1px solid var(--line-1);
+}
+
+.psm-signal-row:last-child {
+ border-bottom: 0;
+}
+
+.psm-signal-row.pos .psm-signal-value {
+ color: var(--positive);
+}
+
+.psm-signal-row.warn .psm-signal-value {
+ color: var(--warning);
+}
+
+.psm-signal-row.neg .psm-signal-value {
+ color: var(--negative);
}
-.psm-signal.neg {
- border-color: rgba(181, 73, 75, 0.35);
+.psm-signal-row.neu .psm-signal-value {
+ color: var(--fg-3);
+}
+
+.psm-signal-value {
+ color: var(--fg-1);
+ font-family: var(--font-mono);
+ font-size: var(--fs-14);
+ font-variant-numeric: tabular-nums;
}
-.psm-signal.neu {
- border-color: var(--line-2);
+.psm-signal-copy {
+ color: var(--fg-2);
+ font-size: var(--fs-14);
}
.psm-profile-list,
@@ -841,7 +902,7 @@
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-3);
align-items: start;
- padding-bottom: var(--sp-3);
+ padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--line-1);
}
@@ -868,6 +929,11 @@
word-break: break-word;
}
+.psm-stat-value {
+ text-align: right;
+ white-space: nowrap;
+}
+
.psm-source-value {
font-family: var(--font-mono);
font-size: var(--fs-12);
@@ -884,6 +950,7 @@
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
+ margin-bottom: var(--sp-2);
}
.psm-field-tag {
@@ -988,18 +1055,33 @@
.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;
}
+
+ .psm-signal-row {
+ grid-template-columns: 1fr;
+ gap: 4px;
+ }
+
+ .psm-watch-select {
+ grid-template-columns: minmax(0, 1fr) auto auto;
+ row-gap: 4px;
+ }
+
+ .psm-watch-price {
+ grid-column: 2;
+ }
+
+ .psm-watch-change {
+ grid-column: 3;
+ }
}
generated by cgit v1.3-2-g0d8e (git 2.53.0) at 2026-06-05 11:38:33 +0000