feat: unify trading workspace visual system
This commit is contained in:
leefer
+104
-80
@@ -605,7 +605,7 @@
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body[data-active-view="mentorView"] .workspace-view {
|
||||
padding: 10px 10px 84px;
|
||||
padding: 10px 0 84px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -624,7 +624,7 @@ body[data-active-view="mentorView"] .workspace-view {
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
padding: 14px 16px 24px;
|
||||
padding: var(--page-pad-y) 0 24px;
|
||||
}
|
||||
|
||||
.mentor-page-controls .mentor-evidence-filters {
|
||||
@@ -720,35 +720,35 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView {
|
||||
--mentor-blue: #2563eb;
|
||||
--mentor-blue: var(--action);
|
||||
|
||||
--mentor-blue-dark: #1d4ed8;
|
||||
--mentor-blue-dark: var(--action-hover);
|
||||
|
||||
--mentor-blue-soft: #eff4ff;
|
||||
--mentor-blue-soft: var(--action-soft);
|
||||
|
||||
--mentor-blue-line: #c7d8fb;
|
||||
--mentor-blue-line: var(--color-action-line);
|
||||
|
||||
--mentor-line: #e5e7eb;
|
||||
--mentor-line: var(--border);
|
||||
|
||||
--mentor-line-soft: #eef0f3;
|
||||
--mentor-line-soft: var(--border-subtle);
|
||||
|
||||
--mentor-ink: #1f2937;
|
||||
--mentor-ink: var(--text-primary);
|
||||
|
||||
--mentor-sub: #6b7280;
|
||||
--mentor-sub: var(--text-secondary);
|
||||
|
||||
--mentor-faint: #9ca3af;
|
||||
--mentor-faint: var(--text-tertiary);
|
||||
|
||||
color: var(--mentor-ink);
|
||||
}
|
||||
|
||||
#mentorView .mentor-page-header {
|
||||
min-height: 42px;
|
||||
min-height: 36px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 18px;
|
||||
gap: var(--space-12);
|
||||
|
||||
margin-bottom: 12px;
|
||||
|
||||
@@ -774,9 +774,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
color: var(--mentor-ink);
|
||||
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-page-title);
|
||||
|
||||
font-weight: 760;
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
@@ -786,7 +786,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
color: var(--mentor-faint);
|
||||
|
||||
font-size: 11.5px;
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -818,7 +818,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
background: rgb(238, 240, 243);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
#mentorView .mentor-evidence-filters button {
|
||||
@@ -872,13 +872,13 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-evidence-filters button.active {
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: var(--mentor-ink);
|
||||
|
||||
font-weight: 650;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
box-shadow: rgba(16, 24, 40, 0.09) 0px 1px 2px;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
#mentorView .mentor-evidence-filters button[data-mentor-grade="A"] {
|
||||
@@ -894,7 +894,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-evidence-filters button:focus-visible {
|
||||
outline: rgba(37, 99, 235, 0.35) solid 2px;
|
||||
outline: var(--action) solid 2px;
|
||||
|
||||
outline-offset: 1px;
|
||||
}
|
||||
@@ -968,11 +968,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
|
||||
border-radius: 10px;
|
||||
border-radius: var(--card-radius);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
position: relative;
|
||||
|
||||
@@ -1004,15 +1004,15 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
padding: 0px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
#mentorView .mentor-directory-heading {
|
||||
border-bottom: 1px solid var(--mentor-line-soft);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
min-height: 48px;
|
||||
min-height: 44px;
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -1148,7 +1148,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-search-field {
|
||||
height: 34px;
|
||||
height: var(--control-height);
|
||||
|
||||
display: grid;
|
||||
|
||||
@@ -1164,17 +1164,17 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
|
||||
border-radius: 7px;
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: var(--mentor-faint);
|
||||
}
|
||||
|
||||
#mentorView .mentor-search-field:focus-within {
|
||||
border-color: var(--mentor-blue-line);
|
||||
border-color: var(--mentor-blue);
|
||||
|
||||
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
|
||||
#mentorView .mentor-search-field .lucide {
|
||||
@@ -1260,7 +1260,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
#mentorView .mentor-option {
|
||||
width: 100%;
|
||||
|
||||
min-height: 82px;
|
||||
min-height: 70px;
|
||||
|
||||
display: grid;
|
||||
|
||||
@@ -1286,21 +1286,21 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border-radius: 0px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
color: var(--mentor-ink);
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
transition: background-color 150ms, box-shadow 150ms;
|
||||
transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
|
||||
}
|
||||
|
||||
#mentorView .mentor-option:hover {
|
||||
background: rgb(248, 250, 255);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
#mentorView .mentor-option.active {
|
||||
background: var(--mentor-blue-soft);
|
||||
background: var(--surface-selected);
|
||||
|
||||
box-shadow: inset 2px 0 0 var(--mentor-blue);
|
||||
}
|
||||
@@ -1318,11 +1318,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
#mentorView .mentor-option-main {
|
||||
min-width: 0px;
|
||||
|
||||
min-height: 81px;
|
||||
min-height: 69px;
|
||||
|
||||
display: block;
|
||||
|
||||
padding: 10px 7px 9px 14px;
|
||||
padding: 9px 7px 8px 14px;
|
||||
|
||||
border: 0px;
|
||||
|
||||
@@ -1342,7 +1342,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-option-main:focus-visible {
|
||||
outline: rgba(37, 99, 235, 0.42) solid 2px;
|
||||
outline: var(--action) solid 2px;
|
||||
|
||||
outline-offset: -3px;
|
||||
}
|
||||
@@ -1504,7 +1504,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
background: rgb(243, 244, 246);
|
||||
background: var(--surface-muted);
|
||||
|
||||
color: var(--mentor-sub);
|
||||
|
||||
@@ -1560,7 +1560,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
#mentorView .mentor-badge.quality {
|
||||
border-color: transparent;
|
||||
|
||||
background: rgb(243, 244, 246);
|
||||
background: var(--surface-muted);
|
||||
|
||||
color: var(--mentor-faint);
|
||||
}
|
||||
@@ -1704,11 +1704,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
|
||||
border-radius: 10px;
|
||||
border-radius: var(--card-radius);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
height: 100%;
|
||||
|
||||
@@ -1720,9 +1720,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
#mentorView .mentor-chat-header {
|
||||
border-bottom: 1px solid var(--mentor-line-soft);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
min-height: 69px;
|
||||
min-height: 64px;
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -1870,9 +1870,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
padding: 18px;
|
||||
padding: 20px 24px;
|
||||
|
||||
background: rgb(251, 252, 253);
|
||||
background: var(--surface);
|
||||
|
||||
scrollbar-color: rgb(215, 220, 228) transparent;
|
||||
|
||||
@@ -1910,9 +1910,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
background: rgb(243, 246, 251);
|
||||
background: var(--action-soft);
|
||||
|
||||
color: rgb(100, 130, 183);
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
#mentorView .mentor-empty-mark .lucide {
|
||||
@@ -1924,7 +1924,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-empty-state strong {
|
||||
color: rgb(75, 85, 99);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
@@ -1944,33 +1944,45 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-message {
|
||||
width: fit-content;
|
||||
width: min(100%, 900px);
|
||||
|
||||
max-width: min(84%, 820px);
|
||||
max-width: 100%;
|
||||
|
||||
margin: 0px 0px 12px;
|
||||
margin: 0px 0px 18px;
|
||||
|
||||
padding: 10px 12px;
|
||||
padding: 2px 8px 18px 16px;
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
border: 0px;
|
||||
|
||||
border-radius: 8px;
|
||||
border-bottom: 1px solid var(--mentor-line-soft);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
border-left: 2px solid var(--mentor-blue);
|
||||
|
||||
box-shadow: rgba(16, 24, 40, 0.024) 0px 1px 1px;
|
||||
border-radius: 0px;
|
||||
|
||||
background: transparent;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#mentorView .mentor-message.user {
|
||||
width: fit-content;
|
||||
|
||||
max-width: min(72%, 680px);
|
||||
|
||||
margin-left: auto;
|
||||
|
||||
border-color: var(--mentor-blue-line);
|
||||
padding: 9px 12px;
|
||||
|
||||
border: 1px solid var(--mentor-blue-line);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
background: var(--mentor-blue-soft);
|
||||
}
|
||||
|
||||
#mentorView .mentor-message.assistant {
|
||||
border-left: 2px solid var(--mentor-blue);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#mentorView .mentor-message-label {
|
||||
@@ -1988,11 +2000,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
color: rgb(55, 65, 81);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
line-height: 1.62;
|
||||
line-height: 1.72;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
@@ -2082,7 +2094,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border-top: 1px solid var(--mentor-line-soft);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface-subtle);
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
@@ -2110,9 +2122,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
|
||||
border-radius: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: var(--mentor-sub);
|
||||
|
||||
@@ -2144,11 +2156,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
gap: 8px;
|
||||
|
||||
padding: 8px 14px;
|
||||
padding: 9px 14px;
|
||||
|
||||
border-top: 1px solid var(--mentor-line-soft);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
#mentorView .mentor-chat-form textarea {
|
||||
@@ -2168,11 +2180,11 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 1px solid var(--mentor-line);
|
||||
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
outline: 0px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: var(--mentor-ink);
|
||||
|
||||
@@ -2204,9 +2216,9 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-chat-form textarea:focus {
|
||||
border-color: var(--mentor-blue-line);
|
||||
border-color: var(--mentor-blue);
|
||||
|
||||
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
|
||||
#mentorView .mentor-chat-form .button {
|
||||
@@ -2230,7 +2242,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
background: var(--mentor-blue);
|
||||
|
||||
color: rgb(255, 255, 255);
|
||||
color: var(--on-action);
|
||||
|
||||
font-size: 12.5px;
|
||||
}
|
||||
@@ -2252,7 +2264,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
padding: 0px 14px 8px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
color: var(--mentor-faint);
|
||||
|
||||
@@ -2263,7 +2275,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1100px) {
|
||||
#mentorView .mentor-layout {
|
||||
grid-template-columns: 292px minmax(0px, 1fr);
|
||||
grid-template-columns: 272px minmax(0px, 1fr);
|
||||
}
|
||||
|
||||
#mentorView .mentor-directory-title > span {
|
||||
@@ -2365,7 +2377,7 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
|
||||
border: 0px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
color: var(--mentor-ink);
|
||||
|
||||
@@ -2509,6 +2521,14 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
#mentorView .chat-box {
|
||||
height: 100%;
|
||||
|
||||
min-height: 0px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#mentorView .mentor-chat-header {
|
||||
min-height: 68px;
|
||||
|
||||
@@ -2535,6 +2555,10 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
#mentorView .mentor-messages {
|
||||
flex: 1 1 0%;
|
||||
|
||||
min-height: 0px;
|
||||
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
@@ -2747,13 +2771,13 @@ body[data-active-view="mentorView"] .overview-strip {
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView :is(.mentor-messages, .mentor-empty-mark) {
|
||||
background: var(--surface-muted);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #mentorView .mentor-message {
|
||||
border-color: var(--line-soft);
|
||||
border-color: var(--border-subtle);
|
||||
|
||||
background: var(--surface-subtle);
|
||||
background: transparent;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user