feat: apply B-147 visual tokens to screener, review and account surfaces
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
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
ee37223722
commit
22d4dcd339
@@ -12,7 +12,7 @@
|
||||
|
||||
padding: 20px;
|
||||
|
||||
background: rgb(237, 241, 244);
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.auth-gate[hidden] {
|
||||
@@ -26,13 +26,13 @@
|
||||
|
||||
padding: 26px;
|
||||
|
||||
border: 1px solid var(--line-strong);
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
border-radius: 6px;
|
||||
border-radius: 12px;
|
||||
|
||||
background: var(--surface);
|
||||
|
||||
box-shadow: var(--shadow);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
@@ -46,7 +46,9 @@
|
||||
.auth-brand h1 {
|
||||
margin: 0px;
|
||||
|
||||
font-size: 22px;
|
||||
font-size: var(--font-size-page-title);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.auth-brand span {
|
||||
@@ -54,9 +56,9 @@
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
color: var(--text-muted);
|
||||
color: var(--text-3);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
@@ -88,11 +90,11 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -106,15 +108,15 @@
|
||||
.auth-form .button {
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
margin: 0px;
|
||||
|
||||
color: rgb(185, 54, 39);
|
||||
color: var(--market-up);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -146,23 +148,23 @@
|
||||
.admin-section-picker select {
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 32px;
|
||||
|
||||
padding: 0px 11px;
|
||||
|
||||
border: 1px solid var(--line-strong);
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--surface);
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-label);
|
||||
}
|
||||
|
||||
.admin-section-picker select:focus-visible {
|
||||
outline: 2px solid var(--blue);
|
||||
outline: 2px solid var(--action);
|
||||
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -307,13 +309,13 @@
|
||||
|
||||
min-width: 0px;
|
||||
|
||||
height: 34px;
|
||||
height: 32px;
|
||||
|
||||
padding: 0px 8px;
|
||||
|
||||
border: 1px solid var(--line-strong);
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--surface);
|
||||
}
|
||||
@@ -386,11 +388,11 @@
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
border-color: rgb(167, 222, 201);
|
||||
border-color: var(--market-down);
|
||||
|
||||
background: var(--green-soft);
|
||||
|
||||
color: rgb(8, 106, 75);
|
||||
color: var(--market-down);
|
||||
}
|
||||
|
||||
.settings-dialog form {
|
||||
@@ -594,7 +596,7 @@
|
||||
.account-dropdown button {
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 36px;
|
||||
|
||||
display: grid;
|
||||
|
||||
@@ -636,7 +638,7 @@
|
||||
|
||||
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 {
|
||||
@@ -662,16 +664,16 @@
|
||||
}
|
||||
|
||||
.account-dropdown .account-menu-danger {
|
||||
color: rgb(181, 58, 66);
|
||||
color: var(--market-up);
|
||||
|
||||
grid-template-columns: 18px minmax(0px, 1fr);
|
||||
}
|
||||
|
||||
.account-dropdown .account-menu-danger:focus-visible,
|
||||
.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 {
|
||||
@@ -685,11 +687,11 @@ button.account-role-badge {
|
||||
button.account-role-badge:hover {
|
||||
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 {
|
||||
outline: 2px solid var(--blue);
|
||||
outline: 2px solid var(--action);
|
||||
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -701,9 +703,9 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.admin-role-badge {
|
||||
color: rgb(83, 103, 124);
|
||||
color: var(--text-secondary);
|
||||
|
||||
background: rgb(244, 247, 250);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.vip-role-badge {
|
||||
@@ -719,7 +721,7 @@ button.account-role-badge:focus-visible {
|
||||
.vip-role-badge.is-nonmember {
|
||||
color: rgb(105, 117, 128);
|
||||
|
||||
background: rgb(244, 246, 248);
|
||||
background: var(--surface-muted);
|
||||
|
||||
border-color: rgb(203, 211, 218);
|
||||
|
||||
@@ -825,7 +827,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.member-gate strong {
|
||||
color: rgb(60, 70, 80);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -877,7 +879,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
margin-bottom: 12px;
|
||||
|
||||
color: rgb(83, 103, 124);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.privacy-note svg {
|
||||
@@ -889,7 +891,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
margin-top: 3px;
|
||||
|
||||
color: rgb(52, 116, 95);
|
||||
color: var(--market-down);
|
||||
}
|
||||
|
||||
.membership-status-grid {
|
||||
@@ -905,17 +907,17 @@ button.account-role-badge:focus-visible {
|
||||
.membership-status-grid > div {
|
||||
padding: 12px 13px;
|
||||
|
||||
border: 1px solid var(--line, #e2e8ee);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
background: rgb(251, 252, 253);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.membership-status-grid span {
|
||||
display: block;
|
||||
|
||||
color: rgb(116, 128, 140);
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -925,7 +927,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
color: rgb(38, 50, 61);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 15px;
|
||||
|
||||
@@ -935,7 +937,7 @@ button.account-role-badge:focus-visible {
|
||||
.membership-comparison {
|
||||
overflow: hidden;
|
||||
|
||||
border: 1px solid var(--line, #e2e8ee);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -953,7 +955,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
padding: 9px 11px;
|
||||
|
||||
border-top: 1px solid var(--line, #e2e8ee);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.membership-comparison > div:first-child {
|
||||
@@ -961,21 +963,21 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.membership-comparison-head {
|
||||
color: rgb(105, 118, 131);
|
||||
color: var(--text-secondary);
|
||||
|
||||
background: rgb(247, 249, 251);
|
||||
background: var(--surface-subtle);
|
||||
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.membership-comparison b {
|
||||
color: rgb(39, 108, 88);
|
||||
color: var(--market-down);
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.membership-comparison b.muted {
|
||||
color: rgb(154, 164, 173);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.membership-comparison b.available {
|
||||
@@ -993,7 +995,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
margin-top: 14px;
|
||||
|
||||
color: rgb(93, 105, 116);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1085,7 +1087,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.account-settings-dialog {
|
||||
border-radius: 9px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.settings-dialog {
|
||||
@@ -1095,7 +1097,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
border-radius: 9px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.account-dropdown {
|
||||
@@ -1115,17 +1117,17 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
padding: 7px;
|
||||
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
background: var(--surface);
|
||||
|
||||
transform-origin: right top;
|
||||
|
||||
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) {
|
||||
@@ -1214,7 +1216,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
background: rgb(37, 99, 235);
|
||||
background: var(--action);
|
||||
|
||||
color: var(--text-inverse);
|
||||
|
||||
@@ -1308,17 +1310,17 @@ button.account-role-badge:focus-visible {
|
||||
.settings-dialog:not(.heaven-reading-dialog) .settings-section-heading h3 {
|
||||
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 {
|
||||
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 {
|
||||
@@ -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 > span {
|
||||
color: rgb(78, 91, 106);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 11px;
|
||||
|
||||
@@ -1335,7 +1337,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.settings-dialog:not(.heaven-reading-dialog) :is(input, select, textarea) {
|
||||
border-color: rgb(213, 220, 229);
|
||||
border-color: var(--border-strong);
|
||||
|
||||
border-radius: 7px;
|
||||
}
|
||||
@@ -1375,7 +1377,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.account-settings-dialog .settings-lead {
|
||||
color: rgb(96, 109, 124);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
@@ -1397,7 +1399,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
padding: 11px 12px;
|
||||
|
||||
border-color: rgb(223, 228, 234);
|
||||
border-color: var(--border-strong);
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
@@ -1425,7 +1427,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.account-settings-dialog .membership-comparison {
|
||||
border-color: rgb(223, 228, 234);
|
||||
border-color: var(--border-strong);
|
||||
|
||||
border-radius: 7px;
|
||||
}
|
||||
@@ -1435,7 +1437,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
padding: 8px 11px;
|
||||
|
||||
border-color: rgb(230, 234, 239);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.account-settings-dialog .membership-comparison-head {
|
||||
@@ -1449,11 +1451,11 @@ button.account-role-badge:focus-visible {
|
||||
.account-settings-dialog .privacy-note {
|
||||
padding: 10px 11px;
|
||||
|
||||
border: 1px solid rgb(220, 232, 226);
|
||||
border: 1px solid var(--market-down);
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
background: rgb(245, 250, 247);
|
||||
background: var(--market-down-soft);
|
||||
}
|
||||
|
||||
.account-settings-dialog .account-birth-form {
|
||||
@@ -1475,7 +1477,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
color: rgb(102, 115, 132);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -1489,7 +1491,7 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
border-bottom: 1px solid var(--dialog-line);
|
||||
|
||||
background: rgb(251, 252, 253);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.admin-dialog .admin-section-picker label {
|
||||
@@ -1497,13 +1499,13 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -1635,7 +1637,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
: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) {
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
.dialog-header h2 {
|
||||
margin: 2px 0px 0px;
|
||||
|
||||
font-size: 19px;
|
||||
font-size: 16px;
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
@@ -36,9 +38,9 @@
|
||||
}
|
||||
|
||||
.admin-dialog .model-row {
|
||||
border-color: rgb(223, 228, 234);
|
||||
border-color: var(--border);
|
||||
|
||||
border-radius: 7px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
@@ -240,11 +242,11 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -526,17 +528,17 @@
|
||||
}
|
||||
|
||||
.assistant-message.user .assistant-message-content {
|
||||
border-color: rgb(190, 210, 235);
|
||||
border-color: var(--color-action-line);
|
||||
|
||||
background: var(--action-soft);
|
||||
}
|
||||
|
||||
.assistant-message.is-error .assistant-message-content {
|
||||
border-color: rgb(239, 197, 200);
|
||||
border-color: var(--market-up);
|
||||
|
||||
background: var(--market-up-soft);
|
||||
|
||||
color: rgb(139, 47, 52);
|
||||
color: var(--market-up);
|
||||
}
|
||||
|
||||
.assistant-message-content p {
|
||||
@@ -778,7 +780,7 @@
|
||||
|
||||
gap: 16px;
|
||||
|
||||
padding: 14px 18px;
|
||||
padding: 20px;
|
||||
|
||||
min-height: 62px;
|
||||
|
||||
@@ -786,7 +788,7 @@
|
||||
}
|
||||
|
||||
.assistant-dialog {
|
||||
border-radius: 9px;
|
||||
border-radius: 12px;
|
||||
|
||||
width: min(820px, -32px + 100vw);
|
||||
|
||||
@@ -796,9 +798,9 @@
|
||||
}
|
||||
|
||||
.dialog-eyebrow {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-3);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.global-search-dialog {
|
||||
@@ -806,7 +808,7 @@
|
||||
|
||||
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;
|
||||
|
||||
@@ -892,13 +894,13 @@
|
||||
|
||||
font: 11px / 1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
|
||||
border-color: rgb(214, 221, 229);
|
||||
border-color: var(--border-strong);
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
background: rgb(247, 248, 250);
|
||||
background: var(--surface-subtle);
|
||||
|
||||
color: rgb(125, 136, 150);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.global-search-results {
|
||||
@@ -920,7 +922,7 @@
|
||||
|
||||
padding: 9px 10px 5px;
|
||||
|
||||
color: rgb(135, 146, 160);
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: 10px;
|
||||
}
|
||||
@@ -957,9 +959,9 @@
|
||||
|
||||
.global-search-result.is-active,
|
||||
.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 {
|
||||
@@ -973,7 +975,7 @@
|
||||
|
||||
color: var(--text-muted);
|
||||
|
||||
border-color: rgb(224, 229, 235);
|
||||
border-color: var(--border);
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
@@ -1003,7 +1005,7 @@
|
||||
|
||||
border-color: var(--dialog-line);
|
||||
|
||||
background: rgb(251, 252, 253);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.alerts-dialog .alert-form {
|
||||
@@ -1077,7 +1079,7 @@
|
||||
|
||||
padding: 16px 18px;
|
||||
|
||||
background: rgb(247, 249, 251);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.assistant-dialog .assistant-message {
|
||||
@@ -1087,9 +1089,9 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@@ -1197,7 +1199,7 @@
|
||||
|
||||
z-index: 95;
|
||||
|
||||
box-shadow: rgba(0, 0, 0, 0.12) -8px 0px 24px;
|
||||
box-shadow: var(--shadow-float);
|
||||
|
||||
transition: right 0.25s;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user