feat(visualizer): add layers + fast timeframe switching
This commit is contained in:
@@ -411,7 +411,7 @@ a:hover {
|
||||
|
||||
.marketHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@@ -480,12 +480,16 @@ a:hover {
|
||||
|
||||
.statsRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
/* 7 stat tiles by default (Last/Oracle/Bid/Ask/Spread/DLOB/L2), but keep it responsive. */
|
||||
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
|
||||
column-gap: 14px;
|
||||
row-gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.stat {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat__label {
|
||||
@@ -497,12 +501,18 @@ a:hover {
|
||||
margin-top: 4px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.stat__sub {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chartCard {
|
||||
@@ -981,6 +991,526 @@ body.chartFullscreen {
|
||||
padding: 10px 2px;
|
||||
}
|
||||
|
||||
.dlobDash {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dlobDash__head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dlobDash__title {
|
||||
font-weight: 950;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.dlobDash__meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dlobDash__market {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.dlobDash__statuses {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dlobStatus {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.dlobStatus__label {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.dlobDash__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dlobKpi {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.dlobKpi__label {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dlobKpi__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.dlobKpi__sub {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dlobDash__panes {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dlobDash__pane {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.costsPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.costsPanel--stack {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.costsPanel--stack .costsPanel__grid {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.costsPanel__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.costsPanel__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.costsPanel__grid--single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.costsCard {
|
||||
background: rgba(0, 0, 0, 0.20);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costsCard--new {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.costsCard--new .costsCard__subhead {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.costsCard__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costsCard__title {
|
||||
font-weight: 950;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.costsCard__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.costsCard__subhead {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.costsForm {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costsForm--new {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.costsForm--newSide {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.costsKpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costsKpis--new {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.costsKpis--newSide {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.costsNewLayout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 420px;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.costsNewCharts {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costsNewSide {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costKpi {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.costsCard--new .costKpi {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.costsCard--new .costKpi__label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.costsCard--new .costKpi__value {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.costKpi__label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.costKpi__value {
|
||||
margin-top: 4px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.costsMeta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.costsMeta--new {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.costsClose {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.costsClose__row {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.costCharts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.costCharts--new {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"price price"
|
||||
"bps usd";
|
||||
}
|
||||
|
||||
.costChart {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.costChart--big {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.costChart--price {
|
||||
grid-area: price;
|
||||
}
|
||||
.costChart--costBps {
|
||||
grid-area: bps;
|
||||
}
|
||||
.costChart--costUsd {
|
||||
grid-area: usd;
|
||||
}
|
||||
|
||||
.costChart__canvas {
|
||||
height: 280px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.costChart--price .costChart__canvas {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.costChart--costBps .costChart__canvas,
|
||||
.costChart--costUsd .costChart__canvas {
|
||||
height: 180px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.costChart__canvas canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.costChart__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.costChart__title {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.costChart__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.costChart__svg {
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
.costChart__scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.costChart__svg--time {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.costsPanel__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.costCharts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.costsForm--new {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.costsKpis--new {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.costCharts--new {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"price"
|
||||
"bps"
|
||||
"usd";
|
||||
}
|
||||
.costChart--price .costChart__canvas {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.costsNewLayout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.dlobDepth {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dlobDepth__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dlobDepth__title {
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dlobDepth__meta {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dlobDepth__table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dlobDepthRow {
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1fr 1fr 0.7fr;
|
||||
gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dlobDepthRow > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dlobDepthRow::before,
|
||||
.dlobDepthRow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.dlobDepthRow::before {
|
||||
transform: scaleX(var(--ask-scale, 0));
|
||||
transform-origin: left center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(239, 68, 68, 0.18) 0%,
|
||||
rgba(239, 68, 68, 0.06) 60%,
|
||||
rgba(239, 68, 68, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.dlobDepthRow::after {
|
||||
transform: scaleX(var(--bid-scale, 0));
|
||||
transform-origin: right center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(34, 197, 94, 0) 0%,
|
||||
rgba(34, 197, 94, 0.06) 40%,
|
||||
rgba(34, 197, 94, 0.18) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.dlobDepthRow--head {
|
||||
padding: 0 8px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dlobDepthRow--head::before,
|
||||
.dlobDepthRow--head::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dlobDepthRow__num {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dlobDepth__empty {
|
||||
padding: 8px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dlobSlippage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dlobSlippage__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dlobSlippage__title {
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dlobSlippage__chartWrap {
|
||||
height: 220px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.dlobSlippageChart {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.dlobSlippage__empty {
|
||||
padding: 8px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottomCard .uiCard__body {
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
@@ -1046,6 +1576,78 @@ body.chartFullscreen {
|
||||
padding: 2px 2px;
|
||||
border-radius: 8px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.orderbookRow > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.orderbookRow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.35;
|
||||
transform: scaleX(var(--ob-total-scale, 0));
|
||||
transition: transform 220ms ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.orderbookRow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
transform: scaleX(var(--ob-level-scale, 0));
|
||||
transition: transform 220ms ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.orderbookRow--ask::before {
|
||||
transform-origin: left center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(239, 68, 68, 0.24) 0%,
|
||||
rgba(239, 68, 68, 0.09) 60%,
|
||||
rgba(239, 68, 68, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.orderbookRow--bid::before {
|
||||
transform-origin: right center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(34, 197, 94, 0) 0%,
|
||||
rgba(34, 197, 94, 0.09) 40%,
|
||||
rgba(34, 197, 94, 0.24) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.orderbookRow--ask::after {
|
||||
transform-origin: left center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(239, 68, 68, 0.36) 0%,
|
||||
rgba(239, 68, 68, 0.12) 55%,
|
||||
rgba(239, 68, 68, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.orderbookRow--bid::after {
|
||||
transform-origin: right center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(34, 197, 94, 0) 0%,
|
||||
rgba(34, 197, 94, 0.12) 45%,
|
||||
rgba(34, 197, 94, 0.36) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.orderbookRow__num {
|
||||
@@ -1081,6 +1683,69 @@ body.chartFullscreen {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.orderbookMeta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 10px 2px 2px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.orderbookMeta__row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.orderbookMeta__val {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.liquidityBar {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.liquidityBar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
transform: translateX(-0.5px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.liquidityBar__bid,
|
||||
.liquidityBar__ask {
|
||||
height: 100%;
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.liquidityBar__bid {
|
||||
background: linear-gradient(90deg, rgba(34, 197, 94, 0.0) 0%, rgba(34, 197, 94, 0.35) 55%, rgba(34, 197, 94, 0.85) 100%);
|
||||
transform-origin: right center;
|
||||
transform: scaleX(var(--liq-bid, 0));
|
||||
}
|
||||
|
||||
.liquidityBar__ask {
|
||||
background: linear-gradient(90deg, rgba(239, 68, 68, 0.85) 0%, rgba(239, 68, 68, 0.35) 45%, rgba(239, 68, 68, 0.0) 100%);
|
||||
transform-origin: left center;
|
||||
transform: scaleX(var(--liq-ask, 0));
|
||||
}
|
||||
|
||||
.trades {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1309,6 +1974,215 @@ body.chartFullscreen {
|
||||
display: none;
|
||||
}
|
||||
.statsRow {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
body.stackMode {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stackBackdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1990;
|
||||
background: rgba(0, 0, 0, var(--stack-backdrop-opacity, 0.55));
|
||||
}
|
||||
|
||||
.stackDrawerHotspot {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 96px;
|
||||
z-index: 4050;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.stackDrawer {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
bottom: 12px;
|
||||
width: min(460px, calc(100vw - 24px));
|
||||
z-index: 4000;
|
||||
transform: translateX(0);
|
||||
transition: transform 180ms ease;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.stackDrawer--closed {
|
||||
transform: translateX(calc(-100% - 20px));
|
||||
opacity: 0;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.stackDrawer.uiCard {
|
||||
box-shadow: 0 30px 120px rgba(0, 0, 0, 0.55);
|
||||
pointer-events: auto;
|
||||
background: rgba(10, 11, 16, var(--stack-drawer-opacity, 0.92));
|
||||
border-color: rgba(255, 255, 255, 0.10);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stackPanel__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stackPanel__sliders {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stackPanel__sliderRow {
|
||||
display: grid;
|
||||
grid-template-columns: 68px 1fr 46px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stackPanel__slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stackPanel__sliderValue {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stackPanel__layerOpacity {
|
||||
margin-left: 8px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.stackPanel__layerOpacityValue {
|
||||
width: 42px;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stackPanel__layerBrightness {
|
||||
margin-left: 8px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.stackPanel__layerBrightnessValue {
|
||||
width: 46px;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stackPanel__iconBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
color: rgba(230, 233, 239, 0.9);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.stackPanel__iconBtn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.stackPanel__item--locked {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.stackPanel__item--hidden .stackPanel__label {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.stackPanel__hint {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stackPanel__sub {
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stackPanel__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stackPanel__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.stackPanel__item:hover {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.stackPanel__item--active {
|
||||
border-color: rgba(168, 85, 247, 0.45);
|
||||
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 18px 50px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.stackPanel__drag {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stackPanel__label {
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.stackPanel__badge {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(168, 85, 247, 0.14);
|
||||
border: 1px solid rgba(168, 85, 247, 0.25);
|
||||
color: rgba(230, 233, 239, 0.92);
|
||||
}
|
||||
|
||||
.stackLayer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2500;
|
||||
background: transparent;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stackLayer__body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.stackLayer__card {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user