style: button hierarchy, full-width search, inline status row
- 버튼 위계 정리: 파란 틴트=동작(동기화/배포), ghost=네비/유틸(새로고침·이전·다음) - 새로고침: ghost + 원형화살표 아이콘 + 컴팩트, 페이저: ghost + ◀/▶ 삼각형 - 검색창 가로 꽉(width 100%) + 얇게 - 헤더(th) 한글 라벨에 모노 폰트 안 먹게 td 로 한정 + 모노 스택에 한글 폴백 - 상태: '상태'+연결배지 한 줄 배치, '상태'='저장소' 글자 크기 통일, 배지 14px Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -37,8 +37,10 @@
|
||||
--danger: #f04452;
|
||||
|
||||
--radius-card: 12px;
|
||||
/* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3) */
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
/* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3).
|
||||
혹시 섞이는 한글은 모노에 글리프가 없으니 한글 sans 로 폴백. */
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
|
||||
"Apple SD Gothic Neo", "Noto Sans KR", monospace;
|
||||
|
||||
/* Pico 매핑 */
|
||||
--pico-font-family-sans-serif: "Pretendard Variable", -apple-system,
|
||||
@@ -122,6 +124,22 @@ section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* 상태: 라벨 + 배지 한 줄 */
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.status-label {
|
||||
font-size: 22px; /* 저장소 h2 와 동일 */
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
.status-row .status-line {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 버튼 — Toss: radius 7, weight 600, 누름 피드백 scale(0.98) (design-ref §4·§6) */
|
||||
button,
|
||||
[role="button"] {
|
||||
@@ -149,6 +167,27 @@ button.danger,
|
||||
--pico-border-color: var(--danger);
|
||||
--pico-color: #ffffff;
|
||||
}
|
||||
/* 유틸리티(새로고침 등): 중립 ghost — 동기화(틴티드 블루)와 구분 */
|
||||
button.ghost,
|
||||
[role="button"].ghost {
|
||||
--pico-background-color: transparent;
|
||||
--pico-border-color: var(--border-strong);
|
||||
--pico-color: var(--text-secondary);
|
||||
}
|
||||
button.ghost:hover,
|
||||
[role="button"].ghost:hover {
|
||||
--pico-background-color: var(--bg-alt);
|
||||
--pico-border-color: var(--text-dim);
|
||||
}
|
||||
/* 아이콘 + 글자 버튼 */
|
||||
.btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.btn-icon .icon {
|
||||
flex: none;
|
||||
}
|
||||
button:disabled,
|
||||
[role="button"]:disabled {
|
||||
opacity: 0.45;
|
||||
@@ -244,9 +283,10 @@ button:disabled,
|
||||
.repo-name a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
/* 숫자/버전/시각: 모노 + tabular */
|
||||
.num,
|
||||
.mono {
|
||||
/* 숫자/버전/시각: 모노 + tabular — 본문 셀(td)과 .mono 에만 적용.
|
||||
헤더(th)는 한글 라벨이라 모노 제외(Pretendard 유지). */
|
||||
.mono,
|
||||
td.num {
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum" 1;
|
||||
}
|
||||
@@ -369,9 +409,12 @@ th.num {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.repo-search {
|
||||
max-width: 280px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
/* 세로로 얇게 */
|
||||
--pico-form-element-spacing-vertical: 0.5rem;
|
||||
height: auto;
|
||||
}
|
||||
.table-card thead th a.th-sort {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in New Issue
Block a user