chore: create Multica handoff checkpoint
This commit is contained in:
leefer
@@ -479,13 +479,13 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.account-button {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-command-group .account-button {
|
||||
width: 100%;
|
||||
|
||||
@@ -1020,7 +1020,7 @@ button.account-role-badge:focus-visible {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.account-menu-shell {
|
||||
width: 100%;
|
||||
|
||||
@@ -1128,7 +1128,7 @@ button.account-role-badge:focus-visible {
|
||||
box-shadow: rgba(22, 34, 46, 0.15) 0px 14px 35px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.account-settings-dialog,
|
||||
.settings-dialog {
|
||||
width: calc(-16px + 100vw);
|
||||
@@ -1648,7 +1648,7 @@ button.account-role-badge:focus-visible {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
.account-menu-shell {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@@ -125,13 +125,13 @@ dialog::backdrop {
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
html {
|
||||
width: 100%;
|
||||
|
||||
@@ -185,3 +185,28 @@ dialog::backdrop {
|
||||
animation: auto ease 0s 1 normal none running none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile document contract: the page owns the only vertical scrollbar. */
|
||||
@media (max-width: 767px) {
|
||||
html {
|
||||
width: 100%;
|
||||
min-width: var(--mobile-min-width);
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body.mobile-shell {
|
||||
width: 100%;
|
||||
min-width: var(--mobile-min-width);
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
padding-bottom: var(--mobile-content-bottom);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
body.mobile-shell.mobile-command-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -168,7 +168,7 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
.redesigned-page-head {
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
:is(.redesigned-auction-view, .redesigned-theme-view, .redesigned-popularity-view, .redesigned-dragon-view) {
|
||||
width: min(100%, 2200px);
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
stroke-width: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-command-group .command-button {
|
||||
width: 100%;
|
||||
|
||||
@@ -106,7 +106,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.command-button {
|
||||
width: 32px;
|
||||
|
||||
@@ -118,7 +118,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1023px) {
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.sidebar-collapse-button span {
|
||||
display: none;
|
||||
}
|
||||
@@ -132,7 +132,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-command-group .button.primary {
|
||||
border-color: var(--action);
|
||||
|
||||
@@ -186,7 +186,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.stock-heaven-button span {
|
||||
display: none;
|
||||
}
|
||||
@@ -241,7 +241,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
font-weight: 670;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.sidebar-collapse-button span {
|
||||
display: none;
|
||||
}
|
||||
@@ -253,7 +253,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-menu-button {
|
||||
width: 34px;
|
||||
|
||||
@@ -593,7 +593,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.module-nav .sidebar-collapse-button {
|
||||
display: none;
|
||||
}
|
||||
@@ -751,7 +751,7 @@ body.sidebar-collapsed .sidebar-collapse-button {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) and (min-width: 721px) {
|
||||
@media (max-width: 1023px) and (min-width: 768px) {
|
||||
.sidebar-collapse-button span {
|
||||
display: none;
|
||||
}
|
||||
@@ -944,33 +944,7 @@ textarea {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
padding: 12px 16px;
|
||||
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex: 1 1 0%;
|
||||
|
||||
border: 1px solid var(--line);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
padding: 9px 12px;
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-input input:focus {
|
||||
border-color: var(--blue-line);
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
.sidebar-collapse-button {
|
||||
display: none;
|
||||
}
|
||||
@@ -1034,8 +1008,84 @@ textarea {
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
.header-menu-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile control contract. */
|
||||
@media (max-width: 767px) {
|
||||
body.mobile-shell .header-menu-button,
|
||||
body.mobile-shell .header-actions > .header-menu-button {
|
||||
width: var(--mobile-touch-size);
|
||||
min-width: var(--mobile-touch-size);
|
||||
height: var(--mobile-touch-size);
|
||||
min-height: var(--mobile-touch-size);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group .command-button {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: var(--mobile-touch-size);
|
||||
justify-content: flex-start;
|
||||
padding: 0 var(--space-12);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--control-surface);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group .command-button > span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-command-shortcut {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: var(--mobile-touch-size);
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-market-selector:not([hidden]) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: var(--mobile-touch-size);
|
||||
min-height: var(--mobile-touch-size);
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) var(--mobile-nav-icon-size);
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
margin: var(--mobile-page-pad) 0 0;
|
||||
padding: 0 var(--space-12);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-market-selector select {
|
||||
width: 100%;
|
||||
height: calc(var(--mobile-touch-size) - 2px);
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-align: right;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
body.mobile-shell :is(.button, .icon-button, button) {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .mobile-command-shortcut {
|
||||
border-color: var(--border);
|
||||
background: var(--surface-subtle);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.dialog-header-actions {
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -189,7 +189,7 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.global-search-dialog {
|
||||
width: calc(-16px + 100vw);
|
||||
|
||||
@@ -431,7 +431,7 @@
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.alerts-dialog {
|
||||
width: calc(-16px + 100vw);
|
||||
|
||||
@@ -713,7 +713,7 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.assistant-dialog {
|
||||
max-width: none;
|
||||
|
||||
|
||||
@@ -14,10 +14,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.loading-message p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes breathe-core {
|
||||
0%,
|
||||
100% {
|
||||
@@ -163,7 +159,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
@keyframes command-menu-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.toolbar-controls {
|
||||
width: 100%;
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
.redesigned-page-head .toolbar-controls {
|
||||
width: 100%;
|
||||
|
||||
@@ -219,8 +219,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
.toolbar-controls {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile navigation and filter contract. */
|
||||
@media (max-width: 767px) {
|
||||
body.mobile-shell .toolbar-controls,
|
||||
body.mobile-shell .redesigned-page-head .toolbar-controls {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
margin-left: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .toolbar-controls::-webkit-scrollbar,
|
||||
body.mobile-shell .redesigned-page-head .toolbar-controls::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .segmented,
|
||||
body.mobile-shell .redesigned-page-head .segmented {
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
min-height: var(--mobile-touch-size);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
body.mobile-shell .segment,
|
||||
body.mobile-shell .redesigned-page-head .segment {
|
||||
min-width: var(--mobile-touch-size);
|
||||
min-height: calc(var(--mobile-touch-size) - var(--space-4));
|
||||
padding: 0 var(--space-12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@
|
||||
background: var(--table-selected);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.data-table {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
+426
-27
@@ -65,21 +65,13 @@ body.sidebar-collapsed .nav-group + .nav-group {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.header-actions {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1023px) {
|
||||
.module-nav {
|
||||
width: 64px;
|
||||
|
||||
padding-right: 7px;
|
||||
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.nav-group:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -93,7 +85,7 @@ body.sidebar-collapsed .nav-group + .nav-group {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.market-tape {
|
||||
display: none;
|
||||
}
|
||||
@@ -139,6 +131,16 @@ body.sidebar-collapsed .nav-group + .nav-group {
|
||||
.status-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:is(
|
||||
[data-active-view="screenerView"],
|
||||
[data-active-view="screenerTrackingView"],
|
||||
[data-active-view="mentorView"],
|
||||
[data-active-view="heavenView"],
|
||||
[data-active-view="reviewWorkspaceView"]
|
||||
) .overview-strip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.market-breadth-panel .workspace-heading {
|
||||
@@ -295,7 +297,7 @@ body.sidebar-collapsed .nav-group + .nav-group {
|
||||
font-weight: 770;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
body.sidebar-collapsed .module-nav {
|
||||
width: 68px;
|
||||
|
||||
@@ -315,7 +317,7 @@ body.sidebar-collapsed .nav-group + .nav-group {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-command-group {
|
||||
position: fixed;
|
||||
|
||||
@@ -441,7 +443,7 @@ body.sidebar-collapsed .module-tab {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1023px) {
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.module-tab span {
|
||||
display: none;
|
||||
}
|
||||
@@ -457,7 +459,7 @@ body.sidebar-collapsed .module-tab {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.module-tab span {
|
||||
display: none;
|
||||
}
|
||||
@@ -473,7 +475,7 @@ body.sidebar-collapsed .module-tab {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.header-date-group .icon-button {
|
||||
width: 30px;
|
||||
|
||||
@@ -535,7 +537,7 @@ body.sidebar-collapsed .module-tab {
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.metric {
|
||||
gap: 2px;
|
||||
|
||||
@@ -557,7 +559,7 @@ body.sidebar-collapsed .module-tab {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.metric-label {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
@@ -695,7 +697,7 @@ body.sidebar-collapsed .app-main {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
.module-nav .market-sub-tab {
|
||||
display: none;
|
||||
}
|
||||
@@ -1015,7 +1017,7 @@ body.sidebar-collapsed .app-main {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) and (max-width: 1279px) {
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
.app-header {
|
||||
padding-left: 8px;
|
||||
|
||||
@@ -1033,7 +1035,7 @@ body.sidebar-collapsed .app-main {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 767px) {
|
||||
body.sidebar-collapsed {
|
||||
display: block;
|
||||
|
||||
@@ -2055,7 +2057,7 @@ body.sidebar-collapsed .status-bar {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) and (min-width: 721px) {
|
||||
@media (max-width: 1023px) and (min-width: 768px) {
|
||||
.module-nav {
|
||||
width: 64px;
|
||||
|
||||
@@ -2089,7 +2091,7 @@ body.sidebar-collapsed .status-bar {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
.redesigned-page-head .section-title-group {
|
||||
width: 100%;
|
||||
|
||||
@@ -2101,7 +2103,7 @@ body.sidebar-collapsed .status-bar {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
.app-main {
|
||||
min-height: 0px;
|
||||
|
||||
@@ -2397,7 +2399,7 @@ body.sidebar-collapsed .status-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
body:is([data-active-view="sentimentCycleView"], [data-active-view="yesterdayView"]) .app-main {
|
||||
height: var(--workspace-height);
|
||||
|
||||
@@ -2449,7 +2451,7 @@ body.sidebar-collapsed .status-bar {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
||||
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
||||
body.sidebar-collapsed {
|
||||
display: block;
|
||||
|
||||
@@ -2808,7 +2810,7 @@ body.sidebar-collapsed .status-bar {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
@media (min-width: 768px) {
|
||||
.header-actions > .icon-button {
|
||||
min-width: 31px;
|
||||
}
|
||||
@@ -2823,3 +2825,400 @@ body.sidebar-collapsed .status-bar {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.main,
|
||||
body.sidebar-collapsed .main {
|
||||
width: calc(100% - var(--sidebar-compact-width));
|
||||
min-width: 0;
|
||||
margin-left: var(--sidebar-compact-width);
|
||||
}
|
||||
|
||||
.module-nav,
|
||||
body.sidebar-collapsed .module-nav {
|
||||
width: var(--sidebar-compact-width);
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.status-bar,
|
||||
body.sidebar-collapsed .status-bar {
|
||||
left: var(--sidebar-compact-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Canonical mobile shell. Page-specific responsive rules remain with each page. */
|
||||
.mobile-page-context,
|
||||
.mobile-command-shortcuts,
|
||||
.mobile-command-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mobile-shell,
|
||||
.mobile-shell.sidebar-collapsed {
|
||||
display: block;
|
||||
min-height: 100dvh;
|
||||
padding-bottom: var(--mobile-content-bottom);
|
||||
}
|
||||
|
||||
body.mobile-shell .main,
|
||||
body.mobile-shell.sidebar-collapsed .main {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100dvh;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body.mobile-shell .app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--mobile-layer-header);
|
||||
width: 100%;
|
||||
height: var(--mobile-header-height);
|
||||
min-height: var(--mobile-header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-4) var(--mobile-shell-pad);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.mobile-shell.mobile-command-open .app-header {
|
||||
z-index: var(--mobile-layer-menu);
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-page-context {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-page-context span {
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--font-size-aux);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-page-context strong {
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.mobile-shell .market-tape,
|
||||
body.mobile-shell .header-actions > :is(.global-search-button, .theme-toggle, .alert-button, .assistant-button) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .header-actions {
|
||||
position: static;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.mobile-shell .header-date-group {
|
||||
width: var(--mobile-date-width);
|
||||
height: var(--mobile-touch-size);
|
||||
min-height: var(--mobile-touch-size);
|
||||
padding: 0 var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--control-surface);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-date-group > .icon-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .header-date-group .date-input {
|
||||
width: 100%;
|
||||
height: calc(var(--mobile-touch-size) - 2px);
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
body.mobile-shell .app-header .header-actions > .header-menu-button {
|
||||
width: var(--mobile-touch-size);
|
||||
min-width: var(--mobile-touch-size);
|
||||
height: var(--mobile-touch-size);
|
||||
min-height: var(--mobile-touch-size);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--control-surface);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group {
|
||||
position: fixed;
|
||||
inset: auto var(--mobile-shell-pad) var(--mobile-content-bottom);
|
||||
z-index: var(--mobile-layer-menu);
|
||||
width: auto;
|
||||
max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-content-bottom) - var(--space-16));
|
||||
display: none;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-12);
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-overlay);
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group.is-open {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-command-shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-8);
|
||||
padding-bottom: var(--space-8);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group .mobile-command-shortcuts > .mobile-command-shortcut {
|
||||
min-width: 0;
|
||||
min-height: var(--mobile-touch-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-8) var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-subtle);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group > .command-button,
|
||||
body.mobile-shell .header-command-group .account-button {
|
||||
width: 100%;
|
||||
min-height: var(--mobile-touch-size);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
body.mobile-shell .header-command-group .account-dropdown {
|
||||
position: static;
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
body.mobile-shell .mobile-command-backdrop:not([hidden]) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: var(--mobile-layer-backdrop);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: var(--backdrop);
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav,
|
||||
body.mobile-shell.sidebar-collapsed .module-nav {
|
||||
position: fixed;
|
||||
inset: auto 0 0;
|
||||
z-index: var(--mobile-layer-nav);
|
||||
width: 100%;
|
||||
height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
|
||||
min-height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
|
||||
max-height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 0;
|
||||
padding: var(--space-4) var(--space-4) max(var(--space-4), var(--mobile-safe-bottom));
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface-overlay);
|
||||
box-shadow: var(--elevation-raised);
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav :is(.sidebar-brand, .nav-group-label, .market-sub-tab, .sidebar-collapse-button),
|
||||
body.mobile-shell.sidebar-collapsed .module-nav :is(.sidebar-brand, .nav-group-label, .market-sub-tab, .sidebar-collapse-button) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .nav-group,
|
||||
body.mobile-shell.sidebar-collapsed .module-nav .nav-group {
|
||||
display: contents;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab,
|
||||
body.mobile-shell.sidebar-collapsed .module-nav .module-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab,
|
||||
body.mobile-shell.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: var(--mobile-tab-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
padding: var(--space-4);
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--font-size-aux);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab .lucide {
|
||||
width: var(--mobile-nav-icon-size);
|
||||
height: var(--mobile-nav-icon-size);
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab:is(.active, .mobile-active) {
|
||||
background: var(--action-soft);
|
||||
color: var(--action);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab span,
|
||||
body.mobile-shell.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab span {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab .nav-label-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .module-nav .module-tab.mobile-primary-tab .nav-label-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.mobile-shell .app-main,
|
||||
body.mobile-shell.sidebar-collapsed .app-main,
|
||||
body.mobile-shell:is([data-active-view]) .app-main {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-content-bottom));
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 var(--mobile-page-pad) var(--mobile-page-pad);
|
||||
overflow: visible;
|
||||
background: var(--surface-canvas);
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip,
|
||||
body.mobile-shell .overview-strip[data-overview-expanded="true"] {
|
||||
width: calc(100% + var(--mobile-page-pad) + var(--mobile-page-pad));
|
||||
height: var(--mobile-tab-height);
|
||||
min-height: var(--mobile-tab-height);
|
||||
display: flex;
|
||||
margin: 0 calc(var(--mobile-page-pad) * -1);
|
||||
padding: 0 var(--mobile-page-pad);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip .row {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip .sentiment-block,
|
||||
body.mobile-shell .overview-strip .metric,
|
||||
body.mobile-shell .overview-strip[data-overview-expanded="true"] .metric {
|
||||
min-width: max-content;
|
||||
min-height: var(--mobile-touch-size);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: 0 var(--space-8);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip .metric:nth-of-type(n) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body.mobile-shell .overview-strip .metric-wide,
|
||||
body.mobile-shell .overview-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .workspace-view,
|
||||
body.mobile-shell .workspace-view.page:not(#heavenView),
|
||||
body.mobile-shell:is([data-active-view]) .workspace-view.active-view {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: var(--mobile-page-pad) 0 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.mobile-shell .status-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px) {
|
||||
.header-date-group {
|
||||
width: calc(var(--mobile-date-width) - var(--space-16));
|
||||
}
|
||||
|
||||
.mobile-page-context span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,25 +2,42 @@
|
||||
"use strict";
|
||||
|
||||
const SIDEBAR_STORAGE_KEY = "xiaobai-sidebar-collapsed";
|
||||
const MOBILE_BREAKPOINT = 767;
|
||||
|
||||
function isMobileViewport() {
|
||||
return global.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`).matches;
|
||||
}
|
||||
|
||||
function create(options) {
|
||||
const state = options.state;
|
||||
const registry = options.pages;
|
||||
let initialized = false;
|
||||
|
||||
function syncViewportMode() {
|
||||
document.body.classList.toggle("mobile-shell", isMobileViewport());
|
||||
}
|
||||
|
||||
function toggleHeaderCommandMenu(force) {
|
||||
const menu = document.querySelector("#headerCommandGroup");
|
||||
const button = document.querySelector("#headerMenuButton");
|
||||
const backdrop = document.querySelector("#mobileCommandBackdrop");
|
||||
if (!menu || !button) return;
|
||||
const open = typeof force === "boolean" ? force : !menu.classList.contains("is-open");
|
||||
menu.classList.toggle("is-open", open);
|
||||
button.setAttribute("aria-expanded", String(open));
|
||||
document.body.classList.toggle("mobile-command-open", open && isMobileViewport());
|
||||
if (backdrop) backdrop.hidden = !(open && isMobileViewport());
|
||||
if (open && isMobileViewport()) {
|
||||
global.requestAnimationFrame(() => menu.querySelector("button:not([hidden])")?.focus({ preventScroll: true }));
|
||||
} else if (force === false && document.activeElement && menu.contains(document.activeElement)) {
|
||||
button.focus({ preventScroll: true });
|
||||
}
|
||||
}
|
||||
|
||||
function updateSidebarControl() {
|
||||
const button = document.querySelector("#sidebarCollapseButton");
|
||||
if (!button) return;
|
||||
const automaticallyCollapsed = global.innerWidth <= 1023 && global.innerWidth > 720;
|
||||
const automaticallyCollapsed = global.innerWidth <= 1023 && !isMobileViewport();
|
||||
const collapsed = document.body.classList.contains("sidebar-collapsed") || automaticallyCollapsed;
|
||||
button.setAttribute("aria-expanded", String(!collapsed));
|
||||
button.setAttribute("aria-label", collapsed ? "展开侧栏" : "收起侧栏");
|
||||
@@ -44,11 +61,19 @@
|
||||
const navigationId = page?.navigation_alias || viewId;
|
||||
const marketView = page?.group === "market";
|
||||
document.body.dataset.activeView = viewId;
|
||||
const mobileGroup = document.querySelector("#mobilePageGroup");
|
||||
const mobileTitle = document.querySelector("#mobilePageTitle");
|
||||
if (mobileGroup) {
|
||||
mobileGroup.textContent = page?.group === "market"
|
||||
? "行情"
|
||||
: page?.group === "personal" ? "复盘" : "工具";
|
||||
}
|
||||
if (mobileTitle) mobileTitle.textContent = page?.title || "小白复盘";
|
||||
document.querySelectorAll(".module-tab").forEach((button) => {
|
||||
button.classList.toggle("active", button.dataset.view === navigationId);
|
||||
button.classList.toggle(
|
||||
"mobile-active",
|
||||
global.innerWidth <= 720
|
||||
isMobileViewport()
|
||||
&& marketView
|
||||
&& button.dataset.view === "limitPool"
|
||||
&& viewId !== "limitPool",
|
||||
@@ -127,6 +152,7 @@
|
||||
collapsed = false;
|
||||
}
|
||||
document.body.classList.toggle("sidebar-collapsed", collapsed);
|
||||
syncViewportMode();
|
||||
updateSidebarControl();
|
||||
syncNavigation(state.activeView);
|
||||
document.querySelectorAll(".module-tab").forEach((button) => {
|
||||
@@ -143,6 +169,16 @@
|
||||
event.stopPropagation();
|
||||
toggleHeaderCommandMenu();
|
||||
});
|
||||
document.querySelector("#mobileCommandBackdrop")?.addEventListener("click", () => {
|
||||
toggleHeaderCommandMenu(false);
|
||||
});
|
||||
document.querySelectorAll("[data-mobile-command-target]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const target = document.getElementById(button.dataset.mobileCommandTarget || "");
|
||||
toggleHeaderCommandMenu(false);
|
||||
target?.click();
|
||||
});
|
||||
});
|
||||
document.querySelector("#headerCommandGroup")?.addEventListener("click", (event) => {
|
||||
if (event.target.closest("button") && !event.target.closest(".account-menu-shell")) {
|
||||
toggleHeaderCommandMenu(false);
|
||||
@@ -170,7 +206,8 @@
|
||||
if (event.key === "Escape") toggleHeaderCommandMenu(false);
|
||||
});
|
||||
global.addEventListener("resize", () => {
|
||||
if (global.innerWidth > 720) toggleHeaderCommandMenu(false);
|
||||
toggleHeaderCommandMenu(false);
|
||||
syncViewportMode();
|
||||
updateSidebarControl();
|
||||
syncNavigation(state.activeView);
|
||||
});
|
||||
@@ -184,6 +221,7 @@
|
||||
setPageStatus,
|
||||
setStatus,
|
||||
syncNavigation,
|
||||
syncViewportMode,
|
||||
toggleHeaderCommandMenu,
|
||||
toggleSidebar,
|
||||
updateSidebarControl,
|
||||
|
||||
@@ -150,6 +150,7 @@
|
||||
--space-24: 24px;
|
||||
|
||||
--sidebar-width: var(--size-sidebar);
|
||||
--sidebar-compact-width: 64px;
|
||||
--topbar-height: var(--size-topbar);
|
||||
--summary-height: var(--size-summary);
|
||||
--statusbar-height: var(--size-statusbar);
|
||||
@@ -173,12 +174,25 @@
|
||||
--sentiment-history-min-height: 220px;
|
||||
--primary-share: 1.45fr;
|
||||
--secondary-share: .75fr;
|
||||
--mobile-nav-height: 58px;
|
||||
--mobile-header-height: 50px;
|
||||
--mobile-tab-height: 54px;
|
||||
--mobile-shell-pad: 8px;
|
||||
--mobile-page-pad: 10px;
|
||||
--mobile-nav-height: 64px;
|
||||
--mobile-header-height: 52px;
|
||||
--mobile-tab-height: 56px;
|
||||
--mobile-touch-size: 44px;
|
||||
--mobile-date-width: 116px;
|
||||
--mobile-nav-icon-size: 20px;
|
||||
--mobile-chart-height: 240px;
|
||||
--mobile-table-min-height: 260px;
|
||||
--mobile-phase-badge-width: 88px;
|
||||
--mobile-summary-card-width: 124px;
|
||||
--mobile-shell-pad: var(--space-8);
|
||||
--mobile-page-pad: var(--space-12);
|
||||
--mobile-min-width: 320px;
|
||||
--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--mobile-content-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + var(--mobile-page-pad));
|
||||
--mobile-layer-header: 50;
|
||||
--mobile-layer-nav: 70;
|
||||
--mobile-layer-menu: 80;
|
||||
--mobile-layer-backdrop: 75;
|
||||
--font-aux: var(--font-size-aux);
|
||||
|
||||
--dragon-profile-list-width: 340px;
|
||||
@@ -205,6 +219,14 @@
|
||||
--dragon-profile-weight-strong: 750;
|
||||
--dragon-profile-weight-semibold: 600;
|
||||
|
||||
--mentor-directory-width: 280px;
|
||||
--mentor-profile-width: 272px;
|
||||
--mentor-pane-header-height: 58px;
|
||||
--mentor-avatar-size: 38px;
|
||||
--mentor-profile-avatar-size: 68px;
|
||||
--mentor-composer-min-height: 94px;
|
||||
--mentor-message-max-width: 82%;
|
||||
|
||||
--chart-background: #fbfcfd;
|
||||
--chart-grid: #e2e8ec;
|
||||
--chart-axis: #6c7983;
|
||||
|
||||
Reference in New Issue
Block a user