feat: unify trading workspace visual system
This commit is contained in:
leefer
@@ -848,7 +848,7 @@ body.sidebar-collapsed .app-main {
|
||||
.header-actions > .icon-button:hover {
|
||||
border-color: transparent;
|
||||
|
||||
background: rgb(241, 243, 246);
|
||||
background: var(--control-hover);
|
||||
|
||||
color: var(--primary);
|
||||
}
|
||||
@@ -880,7 +880,7 @@ body.sidebar-collapsed .app-main {
|
||||
|
||||
text-align: left;
|
||||
|
||||
color: rgb(75, 85, 101);
|
||||
color: var(--text-secondary);
|
||||
|
||||
transition: color var(--duration-fast), background var(--duration-fast);
|
||||
|
||||
@@ -906,13 +906,13 @@ body.sidebar-collapsed .app-main {
|
||||
|
||||
stroke-width: 1.75;
|
||||
|
||||
color: rgb(136, 147, 164);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.module-tab.active {
|
||||
border: 0px;
|
||||
|
||||
background: var(--xb-blue-50);
|
||||
background: var(--surface-selected);
|
||||
|
||||
color: var(--primary);
|
||||
|
||||
@@ -920,7 +920,7 @@ body.sidebar-collapsed .app-main {
|
||||
|
||||
position: relative;
|
||||
|
||||
font-weight: 650;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.module-tab.active::before {
|
||||
@@ -1053,17 +1053,17 @@ body.sidebar-collapsed .app-main {
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 108px;
|
||||
height: var(--mobile-header-height);
|
||||
|
||||
min-height: 108px;
|
||||
min-height: var(--mobile-header-height);
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
padding: 8px 10px 0px;
|
||||
padding: var(--mobile-shell-pad) 10px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
@@ -1075,25 +1075,29 @@ body.sidebar-collapsed .app-main {
|
||||
.header-actions {
|
||||
grid-area: 1 / 2;
|
||||
|
||||
position: absolute;
|
||||
position: static;
|
||||
|
||||
inset: 56px 10px auto;
|
||||
inset: auto;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
|
||||
gap: 6px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.header-date-group {
|
||||
gap: 1px;
|
||||
|
||||
height: 42px;
|
||||
height: 36px;
|
||||
|
||||
min-width: 0px;
|
||||
|
||||
flex: 1 1 0%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.header-date-group > .icon-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-date-group .date-input {
|
||||
@@ -1101,17 +1105,17 @@ body.sidebar-collapsed .app-main {
|
||||
|
||||
font-size: 11.5px;
|
||||
|
||||
width: 104px;
|
||||
width: 100%;
|
||||
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.header-actions > .icon-button {
|
||||
width: 40px;
|
||||
width: 36px;
|
||||
|
||||
min-width: 40px;
|
||||
min-width: 36px;
|
||||
|
||||
min-height: 42px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.module-nav {
|
||||
@@ -1354,7 +1358,7 @@ body.sidebar-collapsed {
|
||||
|
||||
background: var(--r2-blue);
|
||||
|
||||
color: rgb(255, 255, 255);
|
||||
color: var(--on-action);
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1450,7 +1454,7 @@ body.sidebar-collapsed .module-nav .nav-group + .nav-group {
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: rgb(55, 65, 81);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
@@ -1470,7 +1474,7 @@ body.sidebar-collapsed .module-nav .nav-group + .nav-group {
|
||||
}
|
||||
|
||||
.module-nav .module-tab:hover {
|
||||
background: rgb(246, 247, 249);
|
||||
background: var(--surface-hover);
|
||||
|
||||
color: var(--r2-ink);
|
||||
}
|
||||
@@ -1492,11 +1496,11 @@ body.sidebar-collapsed .module-nav .nav-group + .nav-group {
|
||||
}
|
||||
|
||||
.module-nav .module-tab.active::before {
|
||||
display: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.module-nav .module-tab.mobile-active::before {
|
||||
display: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed .module-nav {
|
||||
@@ -1518,7 +1522,7 @@ body.sidebar-collapsed .module-nav {
|
||||
|
||||
border-right: 1px solid var(--r2-line);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
width: 64px;
|
||||
|
||||
@@ -1566,7 +1570,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: rgb(55, 65, 81);
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
@@ -1632,7 +1636,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
}
|
||||
|
||||
.header-date-group .date-input {
|
||||
@@ -1666,9 +1670,9 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: rgb(75, 85, 99);
|
||||
color: var(--text-secondary);
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1684,9 +1688,9 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-radius: 7px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--control-surface);
|
||||
|
||||
color: rgb(75, 85, 99);
|
||||
color: var(--text-secondary);
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
@@ -1726,7 +1730,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
margin: 0px;
|
||||
|
||||
padding: 0px 16px 14px;
|
||||
padding: 0 var(--page-pad-x) var(--page-pad-y);
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -1738,9 +1742,9 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
grid-template-columns: minmax(178px, 1.15fr) repeat(5, minmax(68px, 0.52fr)) minmax(168px, 0.9fr) 92px;
|
||||
|
||||
height: 32px;
|
||||
height: var(--summary-height);
|
||||
|
||||
min-height: 34px;
|
||||
min-height: var(--summary-height);
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -1764,7 +1768,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-radius: 0px;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1832,7 +1836,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
}
|
||||
|
||||
.overview-strip .full .cell {
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
padding: 10px 16px;
|
||||
}
|
||||
@@ -1954,7 +1958,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
max-width: none;
|
||||
|
||||
margin: 14px 0px 0px;
|
||||
margin: 0;
|
||||
|
||||
border-width: 0px;
|
||||
|
||||
@@ -1962,15 +1966,15 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-image: none;
|
||||
|
||||
padding: 14px 16px 24px;
|
||||
padding: var(--page-pad-y) 0 24px;
|
||||
|
||||
border-color: var(--r2-line);
|
||||
border-color: transparent;
|
||||
|
||||
border-radius: var(--r2-radius);
|
||||
border-radius: 0;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: transparent;
|
||||
|
||||
box-shadow: var(--r2-shadow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
@@ -2006,7 +2010,7 @@ body.sidebar-collapsed .module-nav .module-tab {
|
||||
|
||||
border-top: 1px solid var(--line);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
color: var(--faint);
|
||||
|
||||
@@ -2109,9 +2113,9 @@ body.sidebar-collapsed .status-bar {
|
||||
.workspace-view:is(#auctionView, #themeLibraryView, #popularityView, #dragonView) {
|
||||
width: auto;
|
||||
|
||||
margin: 14px 0px 0px;
|
||||
margin: 0;
|
||||
|
||||
padding: 14px 16px 22px;
|
||||
padding: var(--page-pad-y) var(--page-pad-x) 22px;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
@@ -2152,7 +2156,7 @@ body.sidebar-collapsed .status-bar {
|
||||
|
||||
width: var(--sidebar-width);
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
border-right: 1px solid var(--line);
|
||||
|
||||
@@ -2184,7 +2188,7 @@ body.sidebar-collapsed .status-bar {
|
||||
|
||||
background: var(--blue);
|
||||
|
||||
color: rgb(255, 255, 255);
|
||||
color: var(--text-inverse);
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -2282,7 +2286,7 @@ body.sidebar-collapsed .status-bar {
|
||||
|
||||
z-index: 50;
|
||||
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--surface);
|
||||
|
||||
border-bottom: 1px solid var(--line);
|
||||
|
||||
@@ -2481,7 +2485,17 @@ body.sidebar-collapsed .status-bar {
|
||||
}
|
||||
|
||||
.header-command-group {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
|
||||
top: calc(var(--mobile-header-height) + var(--space-4));
|
||||
|
||||
right: var(--mobile-shell-pad);
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-command-group.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.module-nav {
|
||||
@@ -2620,6 +2634,11 @@ body.sidebar-collapsed .status-bar {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.module-nav .module-tab.active::before,
|
||||
.module-nav .module-tab.mobile-active::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-nav .module-tab.mobile-primary-tab .nav-label-desktop {
|
||||
display: none;
|
||||
}
|
||||
@@ -2664,6 +2683,12 @@ body.sidebar-collapsed .status-bar {
|
||||
padding-inline: var(--mobile-shell-pad);
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.overview-strip::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overview-strip .row {
|
||||
|
||||
Reference in New Issue
Block a user