style: match central stats bar to F12 poly-stat-item specs
Apply reference gap, colors, pipe separator, dividers, text-shadow, and click-stat padding. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -58,13 +58,11 @@ export function DashboardHeader({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="header-stats-bar side-polygon-stats absolute left-1/2 top-0 z-10 flex h-10 -translate-x-1/2 items-center justify-center rounded-b-2xl border-b border-[#135643] bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12 [filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.2))]">
|
<div className="header-stats-bar side-polygon-stats absolute left-1/2 top-0 z-10 flex h-10 -translate-x-1/2 items-center justify-center rounded-b-2xl border-b border-[#135643] bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12 [filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.2))]">
|
||||||
<div className="poly-stat-item flex items-center gap-2 text-[18px]">
|
<div className="poly-stat-item">
|
||||||
<span className="header-stat-text shrink-0 whitespace-nowrap font-semibold text-[rgba(255,255,255,0.77)]">
|
<span className="poly-stat-quarter header-stat-text">{quarterLabel}</span>
|
||||||
{quarterLabel}
|
<span className="poly-stat-pipe header-stat-text">|</span>
|
||||||
</span>
|
|
||||||
<span className="header-stat-text text-[#eeeae3]/60">·</span>
|
|
||||||
{statItems.map((item, index) => (
|
{statItems.map((item, index) => (
|
||||||
<span key={item.statusKey} className="flex items-center gap-2">
|
<span key={item.statusKey} className="contents">
|
||||||
{index > 0 && <StatDivider />}
|
{index > 0 && <StatDivider />}
|
||||||
<StatClick
|
<StatClick
|
||||||
label={item.label}
|
label={item.label}
|
||||||
@@ -103,7 +101,7 @@ export function DashboardHeader({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function StatDivider() {
|
function StatDivider() {
|
||||||
return <span className="h-4 w-px shrink-0 bg-[rgba(238,234,227,0.4)]" aria-hidden />;
|
return <div className="poly-stat-divider" aria-hidden />;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StatClickProps {
|
interface StatClickProps {
|
||||||
@@ -123,7 +121,7 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => onClick(isActive ? '전체' : statusKey)}
|
onClick={() => onClick(isActive ? '전체' : statusKey)}
|
||||||
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap rounded px-1.5 py-0.5 text-[18px] leading-none ${
|
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
|
||||||
isActive ? 'active' : ''
|
isActive ? 'active' : ''
|
||||||
} ${issue && !isActive ? 'issue' : ''}`}
|
} ${issue && !isActive ? 'issue' : ''}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -103,16 +103,47 @@ body,
|
|||||||
/* F12 — 통계 영역 텍스트 그림자 */
|
/* F12 — 통계 영역 텍스트 그림자 */
|
||||||
.header-stat-text {
|
.header-stat-text {
|
||||||
text-shadow:
|
text-shadow:
|
||||||
-1px -1px 1px rgba(0, 0, 0, 0.25),
|
-1px -1px 0 #00000040,
|
||||||
1px -1px 1px rgba(0, 0, 0, 0.25),
|
1px -1px 0 #00000040,
|
||||||
-1px 1px 1px rgba(0, 0, 0, 0.25),
|
-1px 1px 0 #00000040,
|
||||||
1px 1px 1px rgba(0, 0, 0, 0.25);
|
1px 1px 0 #00000040;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* F12 — poly-stat-item (중앙 통계 한 줄) */
|
||||||
|
.poly-stat-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #e6eae3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poly-stat-quarter {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.77);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poly-stat-pipe {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: rgba(238, 234, 227, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poly-stat-divider {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0 4px;
|
||||||
|
background-color: rgba(230, 234, 227, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* F12 — poly-click-stat */
|
/* F12 — poly-click-stat */
|
||||||
.poly-click-stat {
|
.poly-click-stat {
|
||||||
color: rgba(255, 255, 255, 0.99);
|
color: rgba(255, 255, 255, 0.99);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
transition: all 0.15s ease;
|
transition: all 0.15s ease;
|
||||||
|
|||||||
Reference in New Issue
Block a user