Macbook
105 lines
2.0 KiB
CSS
105 lines
2.0 KiB
CSS
/* 가상 스크롤 공통 — @tanstack/react-virtual */
|
|
.vl-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.vl-scroll-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.vl-scroll-row {
|
|
width: 100%;
|
|
}
|
|
|
|
.vl-grid-row {
|
|
display: grid;
|
|
width: 100%;
|
|
align-items: start;
|
|
}
|
|
|
|
.vl-scroll--list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.vl-scroll-item {
|
|
width: 100%;
|
|
list-style: none;
|
|
}
|
|
|
|
/* 추세검색 — 테이블 대체 가상 행 */
|
|
.tsd-virtual-body.vl-scroll {
|
|
border-top: none;
|
|
}
|
|
|
|
.tsd-virtual-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(100px, 1.4fr) minmax(72px, 0.9fr) minmax(56px, 0.7fr) minmax(120px, 1.5fr) minmax(72px, 0.8fr);
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--tsd-border) 60%, transparent);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.tsd-virtual-row:hover {
|
|
background: color-mix(in srgb, var(--tsd-gold) 6%, transparent);
|
|
}
|
|
|
|
.tsd-virtual-row.tsd-row--sel {
|
|
background: color-mix(in srgb, var(--tsd-gold) 12%, transparent);
|
|
box-shadow: inset 3px 0 0 var(--tsd-gold);
|
|
}
|
|
|
|
.tsd-virtual-cell {
|
|
padding: 9px 10px;
|
|
color: var(--tsd-text);
|
|
min-width: 0;
|
|
}
|
|
|
|
.vtd-grid-wrap--virtual {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 가상 그리드 — 스크롤 컨테이너는 block, 행 단위로 CSS grid */
|
|
.vtd-grid-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
display: block;
|
|
padding: 4px 4px 12px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.vtd-grid-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--vtd-grid-cols, 2), minmax(0, 1fr));
|
|
gap: 14px;
|
|
align-items: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.vtd-grid-row .vtd-card--detail {
|
|
height: auto;
|
|
align-self: start;
|
|
}
|
|
|
|
.notify-virtual-list.vl-scroll,
|
|
.virtual-target-virtual-list.vl-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|