leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply B-147 visual tokens to screener, review and account surfaces

Browse Source 
Unify intelligent screener, review workspace, and account/admin chrome with shared tokens, table density, and left-aligned first columns.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
2026-08-20 06:39:25 +08:00
co-authored by Cursor multica-agent
parent ee37223722
commit 22d4dcd339
7 changed files with 394 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/config/architecture-inventory.json
+6 -6
View File
@@ -373,12 +373,12 @@
"/shared/tokens.css?v=20260820-2", "/shared/tokens.css?v=20260820-2",
"/shared/base.css?v=20260806-1", "/shared/base.css?v=20260806-1",
"/shared/shell.css?v=20260820-2", "/shared/shell.css?v=20260820-2",
"/shared/auth.css?v=20260806-1", "/shared/auth.css?v=20260820-3",
"/shared/components/controls.css?v=20260820-1", "/shared/components/controls.css?v=20260820-1",
"/shared/components/navigation.css?v=20260820-1", "/shared/components/navigation.css?v=20260820-1",
"/shared/components/cards.css?v=20260820-1", "/shared/components/cards.css?v=20260820-1",
"/shared/components/tables.css?v=20260820-1", "/shared/components/tables.css?v=20260820-1",
"/shared/components/dialogs.css?v=20260806-1", "/shared/components/dialogs.css?v=20260820-3",
"/shared/components/feedback.css?v=20260806-1", "/shared/components/feedback.css?v=20260806-1",
"/pages/market/foundation.css?v=20260806-1", "/pages/market/foundation.css?v=20260806-1",
"/pages/sentiment/foundation.css?v=20260820-2", "/pages/sentiment/foundation.css?v=20260820-2",
@@ -389,10 +389,10 @@
"/pages/themes/foundation.css?v=20260820-1", "/pages/themes/foundation.css?v=20260820-1",
"/pages/popularity/foundation.css?v=20260820-1", "/pages/popularity/foundation.css?v=20260820-1",
"/pages/dragon-tiger/foundation.css?v=20260820-1", "/pages/dragon-tiger/foundation.css?v=20260820-1",
"/pages/screener/foundation.css?v=20260806-2", "/pages/screener/foundation.css?v=20260820-3",
"/pages/mentor/foundation.css?v=20260820-2", "/pages/mentor/foundation.css?v=20260820-2",
"/pages/heaven/foundation.css?v=20260806-2", "/pages/heaven/foundation.css?v=20260806-2",
"/pages/review/foundation.css?v=20260806-1" "/pages/review/foundation.css?v=20260820-3"
], ],
"frontend_composition": { "frontend_composition": {
"shell": "frontend/index.html", "shell": "frontend/index.html",
@@ -441,8 +441,8 @@
}, },
{ {
"path": "frontend/pages/screener/foundation.css", "path": "frontend/pages/screener/foundation.css",
"bytes": 102987, "bytes": 103623,
"lines": 6565 "lines": 6580
}, },
{ {
"path": "frontend/pages/heaven/page.js", "path": "frontend/pages/heaven/page.js",
app/frontend/index.html
+4 -4
View File
@@ -20,12 +20,12 @@
<link rel="stylesheet" href="/shared/tokens.css?v=20260820-2"> <link rel="stylesheet" href="/shared/tokens.css?v=20260820-2">
<link rel="stylesheet" href="/shared/base.css?v=20260806-1"> <link rel="stylesheet" href="/shared/base.css?v=20260806-1">
<link rel="stylesheet" href="/shared/shell.css?v=20260820-2"> <link rel="stylesheet" href="/shared/shell.css?v=20260820-2">
<link rel="stylesheet" href="/shared/auth.css?v=20260806-1"> <link rel="stylesheet" href="/shared/auth.css?v=20260820-3">
<link rel="stylesheet" href="/shared/components/controls.css?v=20260820-1"> <link rel="stylesheet" href="/shared/components/controls.css?v=20260820-1">
<link rel="stylesheet" href="/shared/components/navigation.css?v=20260820-1"> <link rel="stylesheet" href="/shared/components/navigation.css?v=20260820-1">
<link rel="stylesheet" href="/shared/components/cards.css?v=20260820-1"> <link rel="stylesheet" href="/shared/components/cards.css?v=20260820-1">
<link rel="stylesheet" href="/shared/components/tables.css?v=20260820-1"> <link rel="stylesheet" href="/shared/components/tables.css?v=20260820-1">
<link rel="stylesheet" href="/shared/components/dialogs.css?v=20260806-1"> <link rel="stylesheet" href="/shared/components/dialogs.css?v=20260820-3">
<link rel="stylesheet" href="/shared/components/feedback.css?v=20260806-1"> <link rel="stylesheet" href="/shared/components/feedback.css?v=20260806-1">
<link rel="stylesheet" href="/pages/market/foundation.css?v=20260806-1"> <link rel="stylesheet" href="/pages/market/foundation.css?v=20260806-1">
<link rel="stylesheet" href="/pages/sentiment/foundation.css?v=20260820-2"> <link rel="stylesheet" href="/pages/sentiment/foundation.css?v=20260820-2">
@@ -36,10 +36,10 @@
<link rel="stylesheet" href="/pages/themes/foundation.css?v=20260820-1"> <link rel="stylesheet" href="/pages/themes/foundation.css?v=20260820-1">
<link rel="stylesheet" href="/pages/popularity/foundation.css?v=20260820-1"> <link rel="stylesheet" href="/pages/popularity/foundation.css?v=20260820-1">
<link rel="stylesheet" href="/pages/dragon-tiger/foundation.css?v=20260820-1"> <link rel="stylesheet" href="/pages/dragon-tiger/foundation.css?v=20260820-1">
<link rel="stylesheet" href="/pages/screener/foundation.css?v=20260806-2"> <link rel="stylesheet" href="/pages/screener/foundation.css?v=20260820-3">
<link rel="stylesheet" href="/pages/mentor/foundation.css?v=20260820-2"> <link rel="stylesheet" href="/pages/mentor/foundation.css?v=20260820-2">
<link rel="stylesheet" href="/pages/heaven/foundation.css?v=20260806-2"> <link rel="stylesheet" href="/pages/heaven/foundation.css?v=20260806-2">
<link rel="stylesheet" href="/pages/review/foundation.css?v=20260806-1"> <link rel="stylesheet" href="/pages/review/foundation.css?v=20260820-3">
</head> </head>
<body> <body>
<section id="authGate" class="auth-gate" aria-label="账号登录"> <section id="authGate" class="auth-gate" aria-label="账号登录">
app/frontend/pages/review/foundation.css
Vendored
+92 -87
View File
@@ -242,7 +242,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
border-radius: 10px; border-radius: 10px;
box-shadow: var(--shadow-xs); box-shadow: var(--shadow-card);
min-height: 0px !important; min-height: 0px !important;
} }
@@ -276,15 +276,15 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
.watchlist-section .data-table thead th { .watchlist-section .data-table thead th {
height: 32px; height: 36px;
padding: 6px 12px; padding: 0 12px;
} }
.watchlist-section .data-table tbody td { .watchlist-section .data-table tbody td {
height: 44px; height: 40px;
padding: 7px 12px; padding: 0 12px;
} }
.trade-journal-section .trade-log-summary:empty { .trade-journal-section .trade-log-summary:empty {
@@ -384,7 +384,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .review-history-toggle { #reviewWorkspaceView .review-history-toggle {
min-height: 30px; min-height: 32px;
display: inline-flex; display: inline-flex;
@@ -398,13 +398,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
border: 1px solid var(--review-line); border: 1px solid var(--review-line);
border-radius: 7px; border-radius: 8px;
background: var(--surface); background: var(--surface);
color: rgb(55, 65, 81); color: var(--text-secondary);
font-size: 11.5px; font-size: var(--font-size-label);
white-space: nowrap; white-space: nowrap;
} }
@@ -469,7 +469,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
background: var(--surface); background: var(--surface);
box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px; box-shadow: var(--shadow-card);
} }
#reviewWorkspaceView .review-card-heading > div { #reviewWorkspaceView .review-card-heading > div {
@@ -515,9 +515,9 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .data-table thead th { #reviewWorkspaceView .data-table thead th {
height: 32px; height: 36px;
padding: 6px 12px; padding: 0 12px;
border-bottom: 1px solid var(--review-line-soft); border-bottom: 1px solid var(--review-line-soft);
@@ -525,21 +525,21 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
color: var(--review-faint); color: var(--review-faint);
font-size: 10.5px; font-size: var(--font-size-caption);
font-weight: 600; font-weight: var(--font-weight-semibold);
} }
#reviewWorkspaceView .data-table tbody td { #reviewWorkspaceView .data-table tbody td {
height: 48px; height: 40px;
padding: 7px 12px; padding: 0 12px;
border-bottom: 1px solid var(--review-line-soft); border-bottom: 1px solid var(--review-line-soft);
color: rgb(55, 65, 81); color: var(--text-primary);
font-size: 12px; font-size: var(--font-size-table);
} }
#reviewWorkspaceView .data-table tbody tr:last-child td { #reviewWorkspaceView .data-table tbody tr:last-child td {
@@ -559,17 +559,17 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
#reviewWorkspaceView .stock-cell strong { #reviewWorkspaceView .stock-cell strong {
color: var(--review-ink); color: var(--review-ink);
font-size: 12px; font-size: var(--font-size-table);
} }
#reviewWorkspaceView .stock-cell small { #reviewWorkspaceView .stock-cell small {
color: var(--review-faint); color: var(--review-faint);
font-size: 10px; font-size: var(--font-size-aux);
} }
#reviewWorkspaceView .review-watch-mark { #reviewWorkspaceView .review-watch-mark {
color: rgb(209, 213, 219); color: var(--text-tertiary);
font-size: 15px; font-size: 15px;
@@ -577,7 +577,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .review-watch-mark.red { #reviewWorkspaceView .review-watch-mark.red {
color: rgb(224, 69, 54); color: var(--market-up);
} }
#reviewWorkspaceView .review-row-actions { #reviewWorkspaceView .review-row-actions {
@@ -601,19 +601,19 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .table-action { #reviewWorkspaceView .table-action {
min-height: 25px; min-height: 32px;
padding: 0px 6px; padding: 0px 6px;
border: 0px; border: 0px;
border-radius: 5px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--review-blue); color: var(--review-blue);
font-size: 10.5px; font-size: var(--font-size-label);
} }
#reviewWorkspaceView .table-action:hover { #reviewWorkspaceView .table-action:hover {
@@ -621,13 +621,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .table-action.down { #reviewWorkspaceView .table-action.down {
color: rgb(139, 146, 158); color: var(--text-tertiary);
} }
#reviewWorkspaceView .table-action.down:hover { #reviewWorkspaceView .table-action.down:hover {
background: var(--surface-hover); background: var(--surface-hover);
color: rgb(209, 67, 67); color: var(--market-up);
} }
#reviewWorkspaceView .trade-log-table-frame .empty-state { #reviewWorkspaceView .trade-log-table-frame .empty-state {
@@ -667,7 +667,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .trade-log-heading .button { #reviewWorkspaceView .trade-log-heading .button {
min-height: 29px; min-height: 32px;
display: inline-flex; display: inline-flex;
@@ -679,13 +679,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
padding: 0px 10px; padding: 0px 10px;
border-radius: 7px; border-radius: 8px;
background: var(--review-blue); background: var(--review-blue);
color: var(--text-inverse); color: var(--text-inverse);
font-size: 11.5px; font-size: var(--font-size-label);
} }
#reviewWorkspaceView .trade-log-heading .button:hover { #reviewWorkspaceView .trade-log-heading .button:hover {
@@ -831,35 +831,35 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .trade-action-add { #reviewWorkspaceView .trade-action-add {
border-color: rgb(241, 196, 192); border-color: var(--market-up);
background: rgb(253, 236, 234); background: var(--market-up-soft);
color: rgb(214, 62, 50); color: var(--market-up);
} }
#reviewWorkspaceView .trade-action-buy { #reviewWorkspaceView .trade-action-buy {
border-color: rgb(241, 196, 192); border-color: var(--market-up);
background: rgb(253, 236, 234); background: var(--market-up-soft);
color: rgb(214, 62, 50); color: var(--market-up);
} }
#reviewWorkspaceView .trade-action-sell { #reviewWorkspaceView .trade-action-sell {
border-color: rgb(188, 225, 202); border-color: var(--market-down);
background: rgb(234, 247, 239); background: var(--market-down-soft);
color: rgb(22, 139, 67); color: var(--market-down);
} }
#reviewWorkspaceView .trade-action-trim { #reviewWorkspaceView .trade-action-trim {
border-color: rgb(188, 225, 202); border-color: var(--market-down);
background: rgb(234, 247, 239); background: var(--market-down-soft);
color: rgb(22, 139, 67); color: var(--market-down);
} }
#reviewWorkspaceView .trade-tags { #reviewWorkspaceView .trade-tags {
@@ -879,7 +879,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
background: var(--review-blue-soft); background: var(--review-blue-soft);
color: rgb(82, 112, 167); color: var(--action);
font-size: 8.5px; font-size: 8.5px;
} }
@@ -899,7 +899,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
white-space: nowrap; white-space: nowrap;
color: rgb(75, 85, 99); color: var(--text-secondary);
font-size: 10.5px; font-size: 10.5px;
@@ -989,7 +989,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .journal-form .button { #reviewWorkspaceView .journal-form .button {
min-height: 34px; min-height: 32px;
display: inline-flex; display: inline-flex;
@@ -1001,13 +1001,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
padding: 0px 14px; padding: 0px 14px;
border-radius: 7px; border-radius: 8px;
background: var(--review-blue); background: var(--review-blue);
color: var(--text-inverse); color: var(--text-inverse);
font-size: 12px; font-size: var(--font-size-label);
} }
#reviewWorkspaceView .journal-form .button:hover { #reviewWorkspaceView .journal-form .button:hover {
@@ -1247,9 +1247,9 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
color: var(--review-ink); color: var(--review-ink);
font-size: 19px; font-size: var(--font-size-page-title);
font-weight: 750; font-weight: var(--font-weight-semibold);
} }
#reviewWorkspaceView .review-page-title .section-subtitle { #reviewWorkspaceView .review-page-title .section-subtitle {
@@ -1261,7 +1261,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: var(--font-size-caption);
} }
#reviewWorkspaceView .review-card-heading { #reviewWorkspaceView .review-card-heading {
@@ -1285,13 +1285,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
color: var(--review-ink); color: var(--review-ink);
font-size: 14.5px; font-size: var(--font-size-card-title);
font-weight: 720; font-weight: var(--font-weight-semibold);
} }
#reviewWorkspaceView .review-add-watch { #reviewWorkspaceView .review-add-watch {
min-height: 29px; min-height: 32px;
display: inline-flex; display: inline-flex;
@@ -1303,23 +1303,23 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
padding: 0px 10px; padding: 0px 10px;
border: 1px solid rgb(185, 205, 248); border: 1px solid var(--color-action-line);
border-radius: 7px; border-radius: 8px;
background: rgb(245, 248, 255); background: var(--action-soft);
color: var(--review-blue); color: var(--review-blue);
font-size: 11.5px; font-size: var(--font-size-label);
font-weight: 650; font-weight: var(--font-weight-semibold);
} }
#reviewWorkspaceView .review-add-watch:hover { #reviewWorkspaceView .review-add-watch:hover {
border-color: rgb(142, 176, 244); border-color: var(--action);
background: rgb(234, 241, 255); background: var(--selected);
} }
#reviewWorkspaceView .review-add-watch .lucide { #reviewWorkspaceView .review-add-watch .lucide {
@@ -1374,17 +1374,17 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
#reviewWorkspaceView .review-watchlist-table .stock-cell strong { #reviewWorkspaceView .review-watchlist-table .stock-cell strong {
font-size: 12.5px; font-size: var(--font-size-table);
font-weight: 680; font-weight: var(--font-weight-semibold);
} }
#reviewWorkspaceView .review-watchlist-table .stock-cell small { #reviewWorkspaceView .review-watchlist-table .stock-cell small {
font-size: 10.5px; font-size: var(--font-size-aux);
} }
#reviewWorkspaceView .watch-attention-score { #reviewWorkspaceView .watch-attention-score {
color: rgb(63, 75, 94); color: var(--text-primary);
font-size: 12px; font-size: 12px;
@@ -1452,11 +1452,11 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
#reviewWorkspaceView .journal-summary-field input:focus { #reviewWorkspaceView .journal-summary-field input:focus {
border-color: var(--review-blue-line); border-color: var(--review-blue-line);
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px; box-shadow: 0 0 0 2px var(--focus-ring);
} }
#reviewWorkspaceView .journal-summary-field input::placeholder { #reviewWorkspaceView .journal-summary-field input::placeholder {
color: rgb(166, 173, 183); color: var(--text-tertiary);
} }
#reviewWorkspaceView .journal-form textarea { #reviewWorkspaceView .journal-form textarea {
@@ -1543,7 +1543,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
.watchlist-editor-form .form-field > label, .watchlist-editor-form .form-field > label,
.watchlist-editor-form .form-field > span { .watchlist-editor-form .form-field > span {
color: rgb(55, 65, 81); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
@@ -1561,7 +1561,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
padding: 0px 11px; padding: 0px 11px;
border: 1px solid rgb(223, 227, 232); border: 1px solid var(--border-strong);
border-radius: 8px; border-radius: 8px;
@@ -1569,9 +1569,9 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
.watchlist-search-control:focus-within { .watchlist-search-control:focus-within {
border-color: rgb(184, 202, 244); border-color: var(--color-action-line);
box-shadow: rgba(37, 99, 235, 0.07) 0px 0px 0px 3px; box-shadow: 0 0 0 3px var(--focus-ring);
} }
.watchlist-search-control .lucide { .watchlist-search-control .lucide {
@@ -1579,7 +1579,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
height: 15px; height: 15px;
color: rgb(154, 163, 176); color: var(--text-tertiary);
} }
.watchlist-search-control input { .watchlist-search-control input {
@@ -1591,7 +1591,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
outline: 0px; outline: 0px;
color: rgb(31, 41, 55); color: var(--text-primary);
font-style: inherit; font-style: inherit;
@@ -1645,13 +1645,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
border-style: none none solid; border-style: none none solid;
border-color: currentcolor currentcolor rgb(238, 240, 243); border-color: currentcolor currentcolor var(--border);
border-image: none; border-image: none;
background: var(--surface); background: var(--surface);
color: rgb(31, 41, 55); color: var(--text-primary);
text-align: left; text-align: left;
} }
@@ -1673,7 +1673,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
.watchlist-search-results button small { .watchlist-search-results button small {
color: rgb(139, 148, 161); color: var(--text-tertiary);
font-size: 10.5px; font-size: 10.5px;
} }
@@ -1681,7 +1681,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
.watchlist-search-results button > b { .watchlist-search-results button > b {
margin-left: auto; margin-left: auto;
color: rgb(105, 115, 134); color: var(--text-secondary);
font-size: 11px; font-size: 11px;
@@ -1691,7 +1691,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
.watchlist-search-status { .watchlist-search-status {
padding: 14px 10px; padding: 14px 10px;
color: rgb(139, 148, 161); color: var(--text-tertiary);
font-size: 11.5px; font-size: 11.5px;
@@ -1709,7 +1709,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgb(220, 229, 247); border: 1px solid var(--action-soft);
border-radius: 8px; border-radius: 8px;
@@ -1733,9 +1733,9 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
border-radius: 7px; border-radius: 7px;
background: rgb(232, 239, 255); background: var(--action-soft);
color: rgb(37, 99, 235); color: var(--action);
} }
.watchlist-selection-icon .lucide { .watchlist-selection-icon .lucide {
@@ -1753,7 +1753,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
.watchlist-selection strong { .watchlist-selection strong {
color: rgb(31, 41, 55); color: var(--text-primary);
font-size: 13.5px; font-size: 13.5px;
} }
@@ -1763,13 +1763,13 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
gap: 8px; gap: 8px;
color: rgb(123, 132, 145); color: var(--text-tertiary);
font-size: 10.5px; font-size: 10.5px;
} }
.watchlist-selection span b { .watchlist-selection span b {
color: rgb(82, 96, 113); color: var(--text-secondary);
font-weight: 600; font-weight: 600;
} }
@@ -1791,7 +1791,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
resize: vertical; resize: vertical;
border: 1px solid rgb(223, 227, 232); border: 1px solid var(--border-strong);
border-radius: 8px; border-radius: 8px;
@@ -1825,9 +1825,9 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
} }
.watchlist-editor-form textarea:focus { .watchlist-editor-form textarea:focus {
border-color: rgb(184, 202, 244); border-color: var(--color-action-line);
box-shadow: rgba(37, 99, 235, 0.07) 0px 0px 0px 3px; box-shadow: 0 0 0 3px var(--focus-ring);
} }
#reviewWorkspaceView .trade-log-table th:nth-child(1) { #reviewWorkspaceView .trade-log-table th:nth-child(1) {
@@ -1873,7 +1873,7 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
font-size: 12px; font-size: 12px;
font-weight: 650; font-weight: var(--font-weight-semibold);
min-height: 0px; min-height: 0px;
@@ -2201,3 +2201,8 @@ body[data-active-view="reviewWorkspaceView"] .overview-strip {
height: auto; height: auto;
} }
} }
#reviewWorkspaceView .data-table thead th:first-child,
#reviewWorkspaceView .data-table tbody td:first-child {
text-align: left;
}
app/frontend/pages/screener/foundation.css
Vendored
+111 -96
View File
@@ -1,8 +1,8 @@
/* Canonical CSS owner: screener. Historical layers consolidated 2026-08-02. */ /* Canonical CSS owner: screener. Historical layers consolidated 2026-08-02. */
#screenerView .section-toolbar h2 { #screenerView .section-toolbar h2 {
font-size: 17px; font-size: var(--font-size-page-title);
font-weight: 800; font-weight: var(--font-weight-semibold);
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@@ -25,7 +25,7 @@
.curated-detail-header > div > span, .curated-detail-header > div > span,
.quant-panel-heading span { .quant-panel-heading span {
color: rgb(100, 116, 139); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
@@ -35,7 +35,7 @@
:where(#screenerView) .curated-detail-header h3 { :where(#screenerView) .curated-detail-header h3 {
margin: 3px 0px 0px; margin: 3px 0px 0px;
color: rgb(17, 24, 39); color: var(--text-primary);
letter-spacing: 0px; letter-spacing: 0px;
} }
@@ -45,7 +45,7 @@
border-radius: 5px; border-radius: 5px;
background: rgb(232, 238, 252); background: var(--action-soft);
} }
:where(#screenerView) .curated-search .lucide { :where(#screenerView) .curated-search .lucide {
@@ -55,19 +55,19 @@
:where(#screenerView) .curated-search input { :where(#screenerView) .curated-search input {
background: transparent; background: transparent;
color: rgb(17, 24, 39); color: var(--text-primary);
} }
.curated-strategy-card.active .curated-strategy-rank { .curated-strategy-card.active .curated-strategy-rank {
background: rgb(220, 232, 255); background: var(--action-soft);
color: rgb(29, 78, 216); color: var(--action);
} }
:where(#screenerView) .curated-detail-header p { :where(#screenerView) .curated-detail-header p {
margin: 9px 0px 0px; margin: 9px 0px 0px;
color: rgb(100, 116, 139); color: var(--text-secondary);
} }
.curated-strategy-badges { .curated-strategy-badges {
@@ -87,9 +87,9 @@
border-radius: 5px; border-radius: 5px;
background: rgb(241, 245, 249); background: var(--hover);
color: rgb(71, 85, 105); color: var(--text-secondary);
font-weight: 650; font-weight: 650;
@@ -97,9 +97,9 @@
} }
.curated-strategy-badges span:first-child { .curated-strategy-badges span:first-child {
background: rgb(234, 241, 255); background: var(--action-soft);
color: rgb(29, 78, 216); color: var(--action);
} }
:where(#screenerView) .mini-section-heading { :where(#screenerView) .mini-section-heading {
@@ -111,11 +111,11 @@
:where(#screenerView) .mini-section-heading h4 { :where(#screenerView) .mini-section-heading h4 {
font-weight: 740; font-weight: 740;
color: rgb(31, 41, 55); color: var(--text-primary);
} }
.mini-section-heading > span { .mini-section-heading > span {
color: rgb(100, 116, 139); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
} }
@@ -141,15 +141,15 @@
gap: 12px; gap: 12px;
border-bottom: 1px solid rgb(238, 240, 243); border-bottom: 1px solid var(--border);
} }
:where(#screenerView) .curated-rule-row span { :where(#screenerView) .curated-rule-row span {
color: rgb(71, 85, 105); color: var(--text-secondary);
} }
:where(#screenerView) .curated-rule-row strong { :where(#screenerView) .curated-rule-row strong {
color: rgb(17, 24, 39); color: var(--text-primary);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -163,7 +163,7 @@
.curated-score-row > span:first-child { .curated-score-row > span:first-child {
overflow: hidden; overflow: hidden;
color: rgb(71, 85, 105); color: var(--text-secondary);
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -177,7 +177,7 @@
border-radius: 4px; border-radius: 4px;
background: rgb(237, 240, 244); background: var(--surface-muted);
} }
.curated-score-track i { .curated-score-track i {
@@ -187,11 +187,11 @@
border-radius: inherit; border-radius: inherit;
background: rgb(79, 118, 199); background: var(--action);
} }
.curated-score-row strong { .curated-score-row strong {
color: rgb(51, 65, 85); color: var(--text-primary);
text-align: right; text-align: right;
@@ -211,11 +211,11 @@
} }
:where(#screenerView) .curated-data-status > .lucide { :where(#screenerView) .curated-data-status > .lucide {
color: rgb(22, 163, 74); color: var(--market-down);
} }
.curated-data-status.missing > .lucide { .curated-data-status.missing > .lucide {
color: rgb(217, 119, 6); color: var(--warning-color);
} }
.curated-data-status span { .curated-data-status span {
@@ -225,13 +225,13 @@
:where(#screenerView) .curated-data-status strong { :where(#screenerView) .curated-data-status strong {
display: block; display: block;
color: rgb(51, 65, 85); color: var(--text-primary);
} }
:where(#screenerView) .curated-data-status small { :where(#screenerView) .curated-data-status small {
display: block; display: block;
color: rgb(124, 135, 152); color: var(--text-tertiary);
} }
.quant-universe-grid .form-field { .quant-universe-grid .form-field {
@@ -239,16 +239,16 @@
} }
.quant-universe-grid input[type="number"] { .quant-universe-grid input[type="number"] {
height: 40px; height: 32px;
} }
.quant-rule-row input:focus, .quant-rule-row input:focus,
.quant-rule-row select:focus { .quant-rule-row select:focus {
border-color: rgb(37, 99, 235); border-color: var(--action);
outline: 0px; outline: 0px;
box-shadow: rgba(37, 99, 235, 0.1) 0px 0px 0px 3px; box-shadow: 0 0 0 3px var(--focus-ring);
} }
:where(#screenerView) .quant-remove-button { :where(#screenerView) .quant-remove-button {
@@ -268,7 +268,7 @@
float: right; float: right;
color: rgb(29, 78, 216); color: var(--action);
} }
:where(#screenerView) .quant-weight-status > div { :where(#screenerView) .quant-weight-status > div {
@@ -278,7 +278,7 @@
:where(#screenerView) .quant-weight-status i { :where(#screenerView) .quant-weight-status i {
width: 100%; width: 100%;
background: rgb(37, 99, 235); background: var(--action);
transition: width 180ms, background 180ms; transition: width 180ms, background 180ms;
} }
@@ -305,7 +305,7 @@
} }
.quant-summary-pane { .quant-summary-pane {
border-top: 1px solid rgb(229, 231, 235); border-top: 1px solid var(--border);
border-left: 0px; border-left: 0px;
} }
@@ -549,7 +549,7 @@
padding: 12px; padding: 12px;
background: rgb(248, 249, 251); background: var(--surface-subtle);
} }
#screenerView .strategy-list { #screenerView .strategy-list {
@@ -575,7 +575,7 @@
} }
#screenerView .strategy-item.active { #screenerView .strategy-item.active {
border-color: rgb(201, 219, 241); border-color: var(--color-action-line);
background: var(--action-soft); background: var(--action-soft);
} }
@@ -724,7 +724,7 @@
#screenerView .backtest-panel { #screenerView .backtest-panel {
padding: 10px 14px 12px; padding: 10px 14px 12px;
background: rgb(251, 252, 253); background: var(--surface-subtle);
} }
#screenerView .backtest-panel > .workspace-heading { #screenerView .backtest-panel > .workspace-heading {
@@ -1099,7 +1099,7 @@
} }
.tracking-status.active { .tracking-status.active {
border-color: rgb(197, 215, 237); border-color: var(--color-action-line);
background: var(--action-soft); background: var(--action-soft);
@@ -1107,7 +1107,7 @@
} }
.tracking-status.complete { .tracking-status.complete {
border-color: rgb(185, 223, 207); border-color: var(--market-down);
background: var(--market-down-soft); background: var(--market-down-soft);
@@ -1149,9 +1149,9 @@
border-radius: 50%; border-radius: 50%;
background: rgb(229, 231, 235); background: var(--border);
color: rgb(156, 163, 175); color: var(--text-tertiary);
font-size: 11px; font-size: 11px;
@@ -1189,11 +1189,11 @@
.screener-strategy-title b.neutral { .screener-strategy-title b.neutral {
background: var(--surface-muted); background: var(--surface-muted);
color: rgb(107, 114, 128); color: var(--text-secondary);
} }
:where(#screenerView) .screener-strategy-summary p { :where(#screenerView) .screener-strategy-summary p {
color: rgb(107, 114, 128); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
} }
@@ -1225,7 +1225,7 @@
border-right: 0px; border-right: 0px;
border-bottom-color: rgb(238, 240, 243); border-bottom-color: var(--border);
} }
#screenerView .screener-result-frame th { #screenerView .screener-result-frame th {
@@ -1235,13 +1235,13 @@
border-right: 0px; border-right: 0px;
border-bottom-color: rgb(238, 240, 243); border-bottom-color: var(--border);
height: 38px; height: 38px;
background: var(--table-header); background: var(--table-header);
color: rgb(107, 114, 128); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
} }
@@ -1281,7 +1281,7 @@
background: var(--surface); background: var(--surface);
box-shadow: rgba(15, 23, 42, 0.16) -12px 0px 32px; box-shadow: var(--shadow-float);
} }
.strategy-drawer[open] { .strategy-drawer[open] {
@@ -1323,7 +1323,7 @@
} }
.strategy-drawer-header span { .strategy-drawer-header span {
color: rgb(156, 163, 175); color: var(--text-tertiary);
font-size: 10.5px; font-size: 10.5px;
} }
@@ -1365,7 +1365,7 @@
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgb(248, 249, 251); background: var(--surface-subtle);
} }
#screenerView .strategy-drawer .strategy-list { #screenerView .strategy-drawer .strategy-list {
@@ -1602,7 +1602,7 @@
padding-top: 5px; padding-top: 5px;
border-top: 1px solid rgb(238, 240, 243); border-top: 1px solid var(--border);
} }
#screenerView .screener-backtest-strip { #screenerView .screener-backtest-strip {
@@ -1684,7 +1684,7 @@
background: var(--surface); background: var(--surface);
color: rgb(31, 41, 55); color: var(--text-primary);
font-style: inherit; font-style: inherit;
@@ -1722,7 +1722,7 @@
padding: 0px 9px; padding: 0px 9px;
color: rgb(31, 41, 55); color: var(--text-primary);
font: inherit; font: inherit;
@@ -1749,7 +1749,7 @@
.curated-library-pane { .curated-library-pane {
border-right: 0px; border-right: 0px;
border-bottom: 1px solid rgb(229, 231, 235); border-bottom: 1px solid var(--border);
display: block; display: block;
@@ -1788,9 +1788,9 @@
} }
.curated-search:focus-within { .curated-search:focus-within {
border-color: rgb(142, 172, 239); border-color: var(--action);
box-shadow: rgba(53, 106, 230, 0.1) 0px 0px 0px 3px; box-shadow: 0 0 0 3px var(--focus-ring);
} }
:where(#screenerView) .screener-page-heading { :where(#screenerView) .screener-page-heading {
@@ -1824,7 +1824,7 @@
} }
:where(#screenerView) .curated-library-heading h3 { :where(#screenerView) .curated-library-heading h3 {
color: rgb(17, 24, 39); color: var(--text-primary);
letter-spacing: 0px; letter-spacing: 0px;
} }
@@ -1870,7 +1870,7 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgb(232, 235, 239); border-bottom: 1px solid var(--border);
} }
:where(#screenerView) .curated-execution-bar { :where(#screenerView) .curated-execution-bar {
@@ -1890,7 +1890,7 @@
} }
#screenerView .regime-evidence strong { #screenerView .regime-evidence strong {
color: rgb(146, 88, 6); color: var(--warning-color);
font-size: 12px; font-size: 12px;
@@ -1902,7 +1902,7 @@
overflow: visible; overflow: visible;
color: rgb(162, 106, 24); color: var(--warning-color);
font-size: 10.5px; font-size: 10.5px;
@@ -2350,7 +2350,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
:where(#screenerView) .curated-strategy-card:hover { :where(#screenerView) .curated-strategy-card:hover {
box-shadow: rgba(37, 99, 235, 0.08) 0px 4px 14px; box-shadow: var(--shadow-raised);
} }
:where(#screenerView) .quant-screener-panel { :where(#screenerView) .quant-screener-panel {
@@ -2414,7 +2414,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 999px; border-radius: 999px;
background: rgb(223, 229, 238); background: var(--border-strong);
accent-color: var(--primary); accent-color: var(--primary);
@@ -2532,19 +2532,19 @@ body[data-active-view="screenerView"] .overview-strip {
color: var(--r2-ink); color: var(--r2-ink);
font-size: 17px; font-size: var(--font-size-page-title);
font-weight: 800; font-weight: var(--font-weight-semibold);
} }
#screenerView .screener-page-heading .section-subtitle { #screenerView .screener-page-heading .section-subtitle {
color: var(--r2-faint); color: var(--r2-faint);
font-size: 12px; font-size: var(--font-size-caption);
} }
#screenerView .screener-mode-tabs { #screenerView .screener-mode-tabs {
min-height: 34px; min-height: 32px;
display: inline-flex; display: inline-flex;
@@ -2662,7 +2662,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .step-line.complete { #screenerView .step-line.complete {
background: rgb(134, 213, 160); background: var(--market-down);
} }
#screenerView .screener-overview-card { #screenerView .screener-overview-card {
@@ -2712,7 +2712,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 5px; border-radius: 5px;
background: rgb(244, 246, 248); background: var(--surface-muted);
color: var(--r2-sub); color: var(--r2-sub);
@@ -2766,7 +2766,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .regime-option:hover { #screenerView .regime-option:hover {
border-color: rgb(187, 200, 219); border-color: var(--border-strong);
color: var(--r2-ink); color: var(--r2-ink);
} }
@@ -2979,7 +2979,7 @@ body[data-active-view="screenerView"] .overview-strip {
#screenerView .result-toolbar .count-badge { #screenerView .result-toolbar .count-badge {
border-radius: 5px; border-radius: 5px;
background: rgb(241, 243, 246); background: var(--surface-muted);
color: var(--r2-sub); color: var(--r2-sub);
@@ -3039,25 +3039,29 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .data-table { #screenerView .data-table {
font-size: 11.5px; font-size: var(--font-size-table);
} }
#screenerView .data-table thead th { #screenerView .data-table thead th {
height: 39px; height: 36px;
padding: 8px 11px; padding: 0 12px;
background: var(--table-header); background: var(--table-header);
color: var(--r2-sub); color: var(--r2-sub);
font-size: 10.5px; font-size: var(--font-size-caption);
font-weight: var(--font-weight-semibold);
} }
#screenerView .data-table tbody td { #screenerView .data-table tbody td {
height: 45px; height: 40px;
padding: 8px 11px; padding: 0 12px;
font-size: var(--font-size-table);
} }
#screenerView .data-table .stock-name { #screenerView .data-table .stock-name {
@@ -3069,7 +3073,7 @@ body[data-active-view="screenerView"] .overview-strip {
overflow: hidden; overflow: hidden;
color: rgb(95, 107, 124); color: var(--text-secondary);
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@@ -3091,13 +3095,13 @@ body[data-active-view="screenerView"] .overview-strip {
#screenerView .probability-value small { #screenerView .probability-value small {
margin-top: 3px; margin-top: 3px;
font-weight: 500; font-weight: var(--font-weight-medium);
display: block; display: block;
color: var(--r2-faint); color: var(--r2-faint);
font-size: 9px; font-size: var(--font-size-aux);
} }
#screenerView .tracking-summary { #screenerView .tracking-summary {
@@ -3341,7 +3345,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .curated-school-filters button.active { #screenerView .curated-school-filters button.active {
border-color: rgb(197, 212, 241); border-color: var(--color-action-line);
background: var(--scr-blue-soft); background: var(--scr-blue-soft);
@@ -3562,7 +3566,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 5px; border-radius: 5px;
background: rgb(238, 241, 245); background: var(--surface-muted);
color: var(--r2-sub); color: var(--r2-sub);
@@ -3598,7 +3602,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 4px; border-radius: 4px;
background: rgb(238, 241, 245); background: var(--surface-muted);
color: var(--r2-faint); color: var(--r2-faint);
@@ -3953,7 +3957,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 6px; border-radius: 6px;
background: rgb(247, 248, 250); background: var(--surface-subtle);
} }
#screenerView .quant-rule-rows { #screenerView .quant-rule-rows {
@@ -3989,7 +3993,7 @@ body[data-active-view="screenerView"] .overview-strip {
min-height: 30px; min-height: 30px;
border: 1px solid rgb(220, 225, 232); border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
@@ -4003,7 +4007,7 @@ body[data-active-view="screenerView"] .overview-strip {
min-height: 30px; min-height: 30px;
border: 1px solid rgb(220, 225, 232); border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
@@ -4075,7 +4079,7 @@ body[data-active-view="screenerView"] .overview-strip {
border-radius: 3px; border-radius: 3px;
background: rgb(232, 235, 240); background: var(--surface-muted);
} }
#screenerView .quant-weight-status i { #screenerView .quant-weight-status i {
@@ -4109,7 +4113,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .strategy-drawer::backdrop { #screenerView .strategy-drawer::backdrop {
background: rgba(20, 29, 44, 0.38); background: var(--backdrop);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
@@ -4587,7 +4591,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerTrackingView .tracking-back-button:hover { #screenerTrackingView .tracking-back-button:hover {
border-color: rgb(185, 200, 228); border-color: var(--color-action-line);
color: var(--scr-blue); color: var(--scr-blue);
} }
@@ -4743,23 +4747,27 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerTrackingView .data-table { #screenerTrackingView .data-table {
font-size: 11.5px; font-size: var(--font-size-table);
} }
#screenerTrackingView .data-table thead th { #screenerTrackingView .data-table thead th {
height: 39px; height: 36px;
padding: 8px 11px; padding: 0 12px;
background: var(--table-header); background: var(--table-header);
font-size: 10.5px; font-size: var(--font-size-caption);
font-weight: var(--font-weight-semibold);
} }
#screenerTrackingView .data-table tbody td { #screenerTrackingView .data-table tbody td {
height: 46px; height: 40px;
padding: 8px 11px; padding: 0 12px;
font-size: var(--font-size-table);
} }
#screenerTrackingView .stock-cell { #screenerTrackingView .stock-cell {
@@ -4775,7 +4783,7 @@ body[data-active-view="screenerView"] .overview-strip {
#screenerTrackingView .stock-cell small { #screenerTrackingView .stock-cell small {
color: var(--r2-faint); color: var(--r2-faint);
font-size: 9px; font-size: var(--font-size-aux);
} }
#screenerTrackingView .table-action.danger { #screenerTrackingView .table-action.danger {
@@ -5495,7 +5503,7 @@ body[data-active-view="screenerView"] .overview-strip {
flex-direction: column; flex-direction: column;
border: 1px solid rgb(243, 201, 195); border: 1px solid var(--market-up);
border-radius: 9px; border-radius: 9px;
@@ -5677,7 +5685,7 @@ body[data-active-view="screenerView"] .overview-strip {
} }
#screenerView .screener-tracking-entry:focus-visible { #screenerView .screener-tracking-entry:focus-visible {
outline: rgba(37, 99, 235, 0.45) solid 2px; outline: 2px solid var(--action);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -5729,11 +5737,11 @@ body[data-active-view="screenerView"] .overview-strip {
padding: 3px 8px; padding: 3px 8px;
border: 1px solid rgb(217, 226, 239); border: 1px solid var(--border-strong);
border-radius: 5px; border-radius: 5px;
background: rgb(247, 249, 252); background: var(--surface-subtle);
color: var(--r2-sub); color: var(--r2-sub);
@@ -6563,3 +6571,10 @@ body[data-active-view="screenerView"] .overview-strip {
gap: 3px; gap: 3px;
} }
} }
#screenerView .data-table thead th:first-child,
#screenerView .data-table tbody td:first-child,
#screenerTrackingView .data-table thead th:first-child,
#screenerTrackingView .data-table tbody td:first-child {
text-align: left;
}
app/frontend/shared/auth.css
+76 -74
View File
@@ -12,7 +12,7 @@
padding: 20px; padding: 20px;
background: rgb(237, 241, 244); background: var(--canvas);
} }
.auth-gate[hidden] { .auth-gate[hidden] {
@@ -26,13 +26,13 @@
padding: 26px; padding: 26px;
border: 1px solid var(--line-strong); border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 12px;
background: var(--surface); background: var(--surface);
box-shadow: var(--shadow); box-shadow: var(--shadow-raised);
} }
.auth-brand { .auth-brand {
@@ -46,7 +46,9 @@
.auth-brand h1 { .auth-brand h1 {
margin: 0px; margin: 0px;
font-size: 22px; font-size: var(--font-size-page-title);
font-weight: var(--font-weight-semibold);
} }
.auth-brand span { .auth-brand span {
@@ -54,9 +56,9 @@
margin-top: 5px; margin-top: 5px;
color: var(--text-muted); color: var(--text-3);
font-size: 12px; font-size: var(--font-size-caption);
} }
.auth-tabs { .auth-tabs {
@@ -88,11 +90,11 @@
} }
.auth-tab.active { .auth-tab.active {
border-bottom-color: var(--coral); border-bottom-color: var(--action);
color: var(--text); color: var(--text-1);
font-weight: 750; font-weight: var(--font-weight-semibold);
} }
.auth-form { .auth-form {
@@ -106,15 +108,15 @@
.auth-form .button { .auth-form .button {
width: 100%; width: 100%;
min-height: 40px; min-height: 32px;
} }
.auth-error { .auth-error {
margin: 0px; margin: 0px;
color: rgb(185, 54, 39); color: var(--market-up);
font-size: 12px; font-size: var(--font-size-caption);
line-height: 1.5; line-height: 1.5;
} }
@@ -146,23 +148,23 @@
.admin-section-picker select { .admin-section-picker select {
width: 100%; width: 100%;
min-height: 40px; min-height: 32px;
padding: 0px 11px; padding: 0px 11px;
border: 1px solid var(--line-strong); border: 1px solid var(--border-strong);
border-radius: 5px; border-radius: 8px;
background: var(--surface); background: var(--surface);
color: var(--text-primary); color: var(--text-primary);
font-size: 13px; font-size: var(--font-size-label);
} }
.admin-section-picker select:focus-visible { .admin-section-picker select:focus-visible {
outline: 2px solid var(--blue); outline: 2px solid var(--action);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -307,13 +309,13 @@
min-width: 0px; min-width: 0px;
height: 34px; height: 32px;
padding: 0px 8px; padding: 0px 8px;
border: 1px solid var(--line-strong); border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 8px;
background: var(--surface); background: var(--surface);
} }
@@ -386,11 +388,11 @@
} }
.connection-status.connected { .connection-status.connected {
border-color: rgb(167, 222, 201); border-color: var(--market-down);
background: var(--green-soft); background: var(--green-soft);
color: rgb(8, 106, 75); color: var(--market-down);
} }
.settings-dialog form { .settings-dialog form {
@@ -594,7 +596,7 @@
.account-dropdown button { .account-dropdown button {
width: 100%; width: 100%;
min-height: 40px; min-height: 36px;
display: grid; display: grid;
@@ -636,7 +638,7 @@
outline: none; outline: none;
box-shadow: inset 0 0 0 2px var(--focus-ring, #1268c4); box-shadow: inset 0 0 0 2px var(--focus-ring);
} }
.account-dropdown button svg { .account-dropdown button svg {
@@ -662,16 +664,16 @@
} }
.account-dropdown .account-menu-danger { .account-dropdown .account-menu-danger {
color: rgb(181, 58, 66); color: var(--market-up);
grid-template-columns: 18px minmax(0px, 1fr); grid-template-columns: 18px minmax(0px, 1fr);
} }
.account-dropdown .account-menu-danger:focus-visible, .account-dropdown .account-menu-danger:focus-visible,
.account-dropdown .account-menu-danger:hover { .account-dropdown .account-menu-danger:hover {
color: rgb(163, 47, 55); color: var(--market-up);
background: rgb(255, 242, 243); background: var(--market-up-soft);
} }
button.account-role-badge { button.account-role-badge {
@@ -685,11 +687,11 @@ button.account-role-badge {
button.account-role-badge:hover { button.account-role-badge:hover {
filter: brightness(0.98); filter: brightness(0.98);
box-shadow: rgba(67, 76, 86, 0.14) 0px 3px 10px; box-shadow: var(--shadow-card);
} }
button.account-role-badge:focus-visible { button.account-role-badge:focus-visible {
outline: 2px solid var(--blue); outline: 2px solid var(--action);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -701,9 +703,9 @@ button.account-role-badge:focus-visible {
} }
.admin-role-badge { .admin-role-badge {
color: rgb(83, 103, 124); color: var(--text-secondary);
background: rgb(244, 247, 250); background: var(--surface-muted);
} }
.vip-role-badge { .vip-role-badge {
@@ -719,7 +721,7 @@ button.account-role-badge:focus-visible {
.vip-role-badge.is-nonmember { .vip-role-badge.is-nonmember {
color: rgb(105, 117, 128); color: rgb(105, 117, 128);
background: rgb(244, 246, 248); background: var(--surface-muted);
border-color: rgb(203, 211, 218); border-color: rgb(203, 211, 218);
@@ -825,7 +827,7 @@ button.account-role-badge:focus-visible {
} }
.member-gate strong { .member-gate strong {
color: rgb(60, 70, 80); color: var(--text-primary);
font-size: 14px; font-size: 14px;
} }
@@ -877,7 +879,7 @@ button.account-role-badge:focus-visible {
margin-bottom: 12px; margin-bottom: 12px;
color: rgb(83, 103, 124); color: var(--text-secondary);
} }
.privacy-note svg { .privacy-note svg {
@@ -889,7 +891,7 @@ button.account-role-badge:focus-visible {
margin-top: 3px; margin-top: 3px;
color: rgb(52, 116, 95); color: var(--market-down);
} }
.membership-status-grid { .membership-status-grid {
@@ -905,17 +907,17 @@ button.account-role-badge:focus-visible {
.membership-status-grid > div { .membership-status-grid > div {
padding: 12px 13px; padding: 12px 13px;
border: 1px solid var(--line, #e2e8ee); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
background: rgb(251, 252, 253); background: var(--surface-subtle);
} }
.membership-status-grid span { .membership-status-grid span {
display: block; display: block;
color: rgb(116, 128, 140); color: var(--text-tertiary);
font-size: 11px; font-size: 11px;
} }
@@ -925,7 +927,7 @@ button.account-role-badge:focus-visible {
margin-top: 5px; margin-top: 5px;
color: rgb(38, 50, 61); color: var(--text-primary);
font-size: 15px; font-size: 15px;
@@ -935,7 +937,7 @@ button.account-role-badge:focus-visible {
.membership-comparison { .membership-comparison {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line, #e2e8ee); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
@@ -953,7 +955,7 @@ button.account-role-badge:focus-visible {
padding: 9px 11px; padding: 9px 11px;
border-top: 1px solid var(--line, #e2e8ee); border-top: 1px solid var(--border);
} }
.membership-comparison > div:first-child { .membership-comparison > div:first-child {
@@ -961,21 +963,21 @@ button.account-role-badge:focus-visible {
} }
.membership-comparison-head { .membership-comparison-head {
color: rgb(105, 118, 131); color: var(--text-secondary);
background: rgb(247, 249, 251); background: var(--surface-subtle);
font-weight: 700; font-weight: 700;
} }
.membership-comparison b { .membership-comparison b {
color: rgb(39, 108, 88); color: var(--market-down);
font-weight: 600; font-weight: 600;
} }
.membership-comparison b.muted { .membership-comparison b.muted {
color: rgb(154, 164, 173); color: var(--text-tertiary);
} }
.membership-comparison b.available { .membership-comparison b.available {
@@ -993,7 +995,7 @@ button.account-role-badge:focus-visible {
margin-top: 14px; margin-top: 14px;
color: rgb(93, 105, 116); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
} }
@@ -1085,7 +1087,7 @@ button.account-role-badge:focus-visible {
} }
.account-settings-dialog { .account-settings-dialog {
border-radius: 9px; border-radius: 12px;
} }
.settings-dialog { .settings-dialog {
@@ -1095,7 +1097,7 @@ button.account-role-badge:focus-visible {
overflow-x: hidden; overflow-x: hidden;
border-radius: 9px; border-radius: 12px;
} }
.account-dropdown { .account-dropdown {
@@ -1115,17 +1117,17 @@ button.account-role-badge:focus-visible {
padding: 7px; padding: 7px;
background: rgba(255, 255, 255, 0.98); background: var(--surface);
transform-origin: right top; transform-origin: right top;
animation: account-menu-in 180ms var(--ease-out) both; animation: account-menu-in 180ms var(--ease-out) both;
border-color: var(--border); border: 1px solid var(--border);
border-radius: 7px; border-radius: 8px;
box-shadow: rgba(22, 34, 46, 0.15) 0px 14px 35px; box-shadow: var(--shadow-float);
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@@ -1214,7 +1216,7 @@ button.account-role-badge:focus-visible {
border-radius: 7px; border-radius: 7px;
background: rgb(37, 99, 235); background: var(--action);
color: var(--text-inverse); color: var(--text-inverse);
@@ -1308,17 +1310,17 @@ button.account-role-badge:focus-visible {
.settings-dialog:not(.heaven-reading-dialog) .settings-section-heading h3 { .settings-dialog:not(.heaven-reading-dialog) .settings-section-heading h3 {
margin: 0px; margin: 0px;
color: rgb(39, 52, 67); color: var(--text-primary);
font-size: 14px; font-size: var(--font-size-card-title);
font-weight: 720; font-weight: var(--font-weight-semibold);
} }
.settings-dialog:not(.heaven-reading-dialog) .settings-section-heading > span { .settings-dialog:not(.heaven-reading-dialog) .settings-section-heading > span {
color: rgb(124, 135, 149); color: var(--text-tertiary);
font-size: 10.5px; font-size: var(--font-size-aux);
} }
.settings-dialog:not(.heaven-reading-dialog) .form-field { .settings-dialog:not(.heaven-reading-dialog) .form-field {
@@ -1327,7 +1329,7 @@ button.account-role-badge:focus-visible {
.settings-dialog:not(.heaven-reading-dialog) .form-field > label, .settings-dialog:not(.heaven-reading-dialog) .form-field > label,
.settings-dialog:not(.heaven-reading-dialog) .form-field > span { .settings-dialog:not(.heaven-reading-dialog) .form-field > span {
color: rgb(78, 91, 106); color: var(--text-secondary);
font-size: 11px; font-size: 11px;
@@ -1335,7 +1337,7 @@ button.account-role-badge:focus-visible {
} }
.settings-dialog:not(.heaven-reading-dialog) :is(input, select, textarea) { .settings-dialog:not(.heaven-reading-dialog) :is(input, select, textarea) {
border-color: rgb(213, 220, 229); border-color: var(--border-strong);
border-radius: 7px; border-radius: 7px;
} }
@@ -1375,7 +1377,7 @@ button.account-role-badge:focus-visible {
} }
.account-settings-dialog .settings-lead { .account-settings-dialog .settings-lead {
color: rgb(96, 109, 124); color: var(--text-secondary);
font-size: 12px; font-size: 12px;
@@ -1397,7 +1399,7 @@ button.account-role-badge:focus-visible {
padding: 11px 12px; padding: 11px 12px;
border-color: rgb(223, 228, 234); border-color: var(--border-strong);
border-radius: 7px; border-radius: 7px;
@@ -1425,7 +1427,7 @@ button.account-role-badge:focus-visible {
} }
.account-settings-dialog .membership-comparison { .account-settings-dialog .membership-comparison {
border-color: rgb(223, 228, 234); border-color: var(--border-strong);
border-radius: 7px; border-radius: 7px;
} }
@@ -1435,7 +1437,7 @@ button.account-role-badge:focus-visible {
padding: 8px 11px; padding: 8px 11px;
border-color: rgb(230, 234, 239); border-color: var(--border);
} }
.account-settings-dialog .membership-comparison-head { .account-settings-dialog .membership-comparison-head {
@@ -1449,11 +1451,11 @@ button.account-role-badge:focus-visible {
.account-settings-dialog .privacy-note { .account-settings-dialog .privacy-note {
padding: 10px 11px; padding: 10px 11px;
border: 1px solid rgb(220, 232, 226); border: 1px solid var(--market-down);
border-radius: 7px; border-radius: 7px;
background: rgb(245, 250, 247); background: var(--market-down-soft);
} }
.account-settings-dialog .account-birth-form { .account-settings-dialog .account-birth-form {
@@ -1475,7 +1477,7 @@ button.account-role-badge:focus-visible {
border-radius: 7px; border-radius: 7px;
color: rgb(102, 115, 132); color: var(--text-secondary);
font-size: 11px; font-size: 11px;
} }
@@ -1489,7 +1491,7 @@ button.account-role-badge:focus-visible {
border-bottom: 1px solid var(--dialog-line); border-bottom: 1px solid var(--dialog-line);
background: rgb(251, 252, 253); background: var(--surface-subtle);
} }
.admin-dialog .admin-section-picker label { .admin-dialog .admin-section-picker label {
@@ -1497,13 +1499,13 @@ button.account-role-badge:focus-visible {
} }
.admin-dialog .admin-section-picker select { .admin-dialog .admin-section-picker select {
min-height: 36px; min-height: 32px;
border-color: rgb(212, 220, 229); border-color: var(--border-strong);
border-radius: 7px; border-radius: 8px;
font-size: 12px; font-size: var(--font-size-label);
} }
.admin-dialog .admin-panel { .admin-dialog .admin-panel {
@@ -1635,7 +1637,7 @@ button.account-role-badge:focus-visible {
} }
:root[data-theme="dark"] :is(.loading-overlay, .auth-gate) { :root[data-theme="dark"] :is(.loading-overlay, .auth-gate) {
background: color-mix(in srgb, var(--canvas) 92%, transparent); background: var(--backdrop);
} }
:root[data-theme="dark"] :is(.auth-shell) { :root[data-theme="dark"] :is(.auth-shell) {
app/frontend/shared/components/dialogs.css
+28 -26
View File
@@ -10,7 +10,9 @@
.dialog-header h2 { .dialog-header h2 {
margin: 2px 0px 0px; margin: 2px 0px 0px;
font-size: 19px; font-size: 16px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0px; letter-spacing: 0px;
} }
@@ -36,9 +38,9 @@
} }
.admin-dialog .model-row { .admin-dialog .model-row {
border-color: rgb(223, 228, 234); border-color: var(--border);
border-radius: 7px; border-radius: 8px;
background: var(--surface-subtle); background: var(--surface-subtle);
} }
@@ -240,11 +242,11 @@
} }
.alert-button.has-alerts { .alert-button.has-alerts {
border-color: rgb(214, 180, 93); border-color: var(--warning-color);
background: rgb(255, 249, 233); background: var(--warning-soft);
color: rgb(138, 97, 0); color: var(--warning-color);
} }
.alert-badge { .alert-badge {
@@ -526,17 +528,17 @@
} }
.assistant-message.user .assistant-message-content { .assistant-message.user .assistant-message-content {
border-color: rgb(190, 210, 235); border-color: var(--color-action-line);
background: var(--action-soft); background: var(--action-soft);
} }
.assistant-message.is-error .assistant-message-content { .assistant-message.is-error .assistant-message-content {
border-color: rgb(239, 197, 200); border-color: var(--market-up);
background: var(--market-up-soft); background: var(--market-up-soft);
color: rgb(139, 47, 52); color: var(--market-up);
} }
.assistant-message-content p { .assistant-message-content p {
@@ -778,7 +780,7 @@
gap: 16px; gap: 16px;
padding: 14px 18px; padding: 20px;
min-height: 62px; min-height: 62px;
@@ -786,7 +788,7 @@
} }
.assistant-dialog { .assistant-dialog {
border-radius: 9px; border-radius: 12px;
width: min(820px, -32px + 100vw); width: min(820px, -32px + 100vw);
@@ -796,9 +798,9 @@
} }
.dialog-eyebrow { .dialog-eyebrow {
color: var(--text-muted); color: var(--text-3);
font-size: 12px; font-size: var(--font-size-caption);
} }
.global-search-dialog { .global-search-dialog {
@@ -806,7 +808,7 @@
border-radius: 8px; border-radius: 8px;
box-shadow: rgba(26, 37, 47, 0.22) 0px 22px 70px, rgba(26, 37, 47, 0.1) 0px 3px 14px; box-shadow: var(--shadow-float);
max-width: 700px; max-width: 700px;
@@ -892,13 +894,13 @@
font: 11px / 1.2 ui-monospace, SFMono-Regular, Consolas, monospace; font: 11px / 1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
border-color: rgb(214, 221, 229); border-color: var(--border-strong);
border-radius: 5px; border-radius: 5px;
background: rgb(247, 248, 250); background: var(--surface-subtle);
color: rgb(125, 136, 150); color: var(--text-tertiary);
} }
.global-search-results { .global-search-results {
@@ -920,7 +922,7 @@
padding: 9px 10px 5px; padding: 9px 10px 5px;
color: rgb(135, 146, 160); color: var(--text-tertiary);
font-size: 10px; font-size: 10px;
} }
@@ -957,9 +959,9 @@
.global-search-result.is-active, .global-search-result.is-active,
.global-search-result:hover { .global-search-result:hover {
background: rgb(238, 244, 255); background: var(--action-soft);
color: rgb(31, 85, 165); color: var(--action);
} }
.global-search-result-icon { .global-search-result-icon {
@@ -973,7 +975,7 @@
color: var(--text-muted); color: var(--text-muted);
border-color: rgb(224, 229, 235); border-color: var(--border);
border-radius: 7px; border-radius: 7px;
@@ -1003,7 +1005,7 @@
border-color: var(--dialog-line); border-color: var(--dialog-line);
background: rgb(251, 252, 253); background: var(--surface-subtle);
} }
.alerts-dialog .alert-form { .alerts-dialog .alert-form {
@@ -1077,7 +1079,7 @@
padding: 16px 18px; padding: 16px 18px;
background: rgb(247, 249, 251); background: var(--surface-subtle);
} }
.assistant-dialog .assistant-message { .assistant-dialog .assistant-message {
@@ -1087,9 +1089,9 @@
} }
.assistant-dialog .assistant-message-content { .assistant-dialog .assistant-message-content {
border-color: rgb(220, 227, 235); border-color: var(--border);
border-radius: 7px; border-radius: 8px;
font-size: 12.5px; font-size: 12.5px;
@@ -1197,7 +1199,7 @@
z-index: 95; z-index: 95;
box-shadow: rgba(0, 0, 0, 0.12) -8px 0px 24px; box-shadow: var(--shadow-float);
transition: right 0.25s; transition: right 0.25s;
app/tests/e2e/app-shell.spec.js
+77
View File
@@ -3300,3 +3300,80 @@ test("merged header keeps date, detail fields and 13 pool columns after dual-rev
} }
await expect(page.locator("#dataDateMetric")).toBeVisible(); await expect(page.locator("#dataDateMetric")).toBeVisible();
}); });
test("B-199 screener review and account surfaces fit day night viewports", async ({ page }) => {
const fs = require("node:fs");
const path = require("node:path");
const shotDir = path.join(__dirname, "../../runtime/b199-shots");
fs.mkdirSync(shotDir, { recursive: true });
const pageErrors = [];
page.on("pageerror", (error) => pageErrors.push(String(error)));
const overflowX = () => page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
const shot = (name) => page.screenshot({ path: path.join(shotDir, `${name}.png`), fullPage: true });
await mockApplication(page, session("admin", true));
await page.setViewportSize({ width: 1600, height: 1000 });
await page.goto("/index.html");
await page.locator('[data-view="screenerView"]').first().click();
await expect(page.locator("#screenerView")).toHaveClass(/active-view/);
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("screener-1600-day");
await page.locator('[data-view="reviewWorkspaceView"]').first().click();
await expect(page.locator("#reviewWorkspaceView")).toHaveClass(/active-view/);
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("review-1600-day");
await openHeaderCommandMenu(page);
await page.locator("#accountButton").click();
await page.locator('[data-account-panel="membership"]').click();
await expect(page.locator("#settingsDialog")).toBeVisible();
await shot("account-1600-day");
await page.locator("#closeSettingsDialog").click();
await openHeaderCommandMenu(page);
await page.locator("#settingsButton").click();
await expect(page.locator("#adminDialog")).toBeVisible();
await shot("admin-1600-day");
await page.locator("#closeAdminDialog").click();
await page.locator("#themeToggle").click();
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
await page.locator('[data-view="screenerView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("screener-1600-night");
await page.locator('[data-view="reviewWorkspaceView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("review-1600-night");
await page.setViewportSize({ width: 1280, height: 800 });
await page.locator('[data-view="screenerView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("screener-1280-night");
await page.locator('[data-view="reviewWorkspaceView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("review-1280-night");
await page.locator("#themeToggle").click();
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
await page.locator('[data-view="screenerView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("screener-1280-day");
await page.locator('[data-view="reviewWorkspaceView"]').first().click();
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("review-1280-day");
await page.locator('[data-view="screenerView"]').first().click();
await page.setViewportSize({ width: 390, height: 844 });
await expect(page.locator("#screenerView")).toHaveClass(/active-view/);
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("screener-390-day");
await page.locator(".mobile-primary-tab[data-view=\"reviewWorkspaceView\"]").click();
await expect(page.locator("#reviewWorkspaceView")).toHaveClass(/active-view/);
expect(await overflowX()).toBeLessThanOrEqual(1);
await shot("review-390-day");
expect(pageErrors).toEqual([]);
});