Hyemin Lee
9b686e35ba
디자인 핸드오프(design_handoff_console_redesign)를 실제 앱에 반영.
CSS 드롭인 교체 + 최소 마크업 추가, HTMX 훅·id·data 속성은 모두 보존.
- app.css: 재디자인 토큰/컴포넌트로 교체(요약카드 호버 리프트, 표
제브라, 중앙 경고형 배포 모달, secondary/ghost/danger 버튼 체계,
진행률·상태칩·스켈레톤 등).
- base.html: 브랜드 로고 큐브(.brand-mark) 추가 + 데모 배너.
- repo_list: 요약 카드 .card-top/.card-ico + 검색 돋보기 아이콘.
- table_wrap: 회전형 정렬 인디케이터, 동기화 버튼 아이콘.
- progress: .sync-head/.sync-pct/.is-active/.indeterminate 구조.
- deploy_modal: 중앙 경고형 + 현재→대상 프리뷰 카드 + 타입-투-컨펌
체크/X 시각 상태.
- deploy_success: 그려지는 체크 원 배너.
- version_list: 표 → .version-item 카드 리스트.
Pico v2 호환(미리보기는 pico-shim 기준이라 안 드러났던 것):
- Pico 의 `:is(...).secondary`(0,2,0)·hover(0,4,0) 특정성을 이기도록
오버라이드를 :is() 형태로 상향 → 동기화 버튼 흰배경+파란글씨 유지,
hover 시 어두워지던 문제 해결.
- `input[type=search]` 의 Pico 기본 돋보기 배경 제거(아이콘 중복).
- `td` 배경을 투명 처리해 tr 제브라/hover 가 보이도록(Pico 의
`td{background:var(--pico-background-color)}` 가 덮던 문제), 줄무늬
색을 --bg-alt 로 또렷하게.
- .row-action 을 40px 고정 → 버튼↔진행률↔배지 교체 시 높이 흔들림·
위아래 테두리 잘림 해소.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
143 lines
4.1 KiB
CSS
143 lines
4.1 KiB
CSS
/* ─────────────────────────────────────────────────────────────
|
|
pico-shim.css — 미리보기 전용 (배포 대상 아님)
|
|
실제 앱은 Pico.css v2를 로드합니다. 폐쇄망 미리보기에서
|
|
외부 CDN 없이 화면을 재현하려고, app.css가 참조하는 --pico-*
|
|
변수 위에서 동작하는 최소 기본 스타일만 담았습니다.
|
|
───────────────────────────────────────────────────────────── */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--pico-font-family, system-ui, sans-serif);
|
|
font-size: 16px;
|
|
line-height: var(--pico-line-height, 1.5);
|
|
background: var(--pico-background-color);
|
|
color: var(--pico-color);
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
padding-inline: 20px;
|
|
}
|
|
h1, h2, h3, h4 {
|
|
margin: 0 0 0.4em;
|
|
line-height: 1.2;
|
|
}
|
|
h1 { color: var(--pico-h1-color); }
|
|
h2 { color: var(--pico-h2-color); }
|
|
h3 { color: var(--pico-h3-color); }
|
|
p { margin: 0 0 1rem; }
|
|
a { color: var(--accent); }
|
|
small { font-size: 0.8125em; }
|
|
|
|
/* 폼 요소 */
|
|
input, button, select, textarea {
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
}
|
|
input[type="search"],
|
|
input[type="text"],
|
|
input:not([type]) {
|
|
display: block;
|
|
width: 100%;
|
|
padding: calc(var(--pico-form-element-spacing-vertical, 0.75rem)) 0.875rem;
|
|
background: var(--pico-form-element-background-color, var(--surface));
|
|
color: var(--pico-form-element-color, var(--text));
|
|
border: 1px solid var(--pico-form-element-border-color, var(--border));
|
|
border-radius: var(--pico-border-radius, 7px);
|
|
outline: none;
|
|
transition: border-color 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
input::placeholder { color: var(--text-dim); }
|
|
input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
|
|
}
|
|
|
|
/* 버튼 기본 (app.css가 세부를 오버라이드).
|
|
버튼 요소에서 --pico-background-color 등을 primary 로 "리셋"해 두면,
|
|
app.css 의 .secondary/.ghost/.danger 가 이 변수를 덮어써서 실제 Pico처럼 동작. */
|
|
button,
|
|
[role="button"] {
|
|
display: inline-block;
|
|
padding: 11px 18px;
|
|
--pico-background-color: var(--pico-primary-background, var(--accent));
|
|
--pico-border-color: var(--pico-primary-border, var(--accent));
|
|
--pico-color: var(--pico-primary, #fff);
|
|
background: var(--pico-background-color);
|
|
color: var(--pico-color);
|
|
border: 1px solid var(--pico-border-color);
|
|
border-radius: var(--pico-border-radius, 7px);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
button:hover,
|
|
[role="button"]:hover {
|
|
--pico-background-color: var(--pico-primary-hover-background, var(--accent-hover));
|
|
--pico-border-color: var(--pico-primary-hover-border, var(--accent-hover));
|
|
}
|
|
|
|
/* 표 */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
}
|
|
th, td {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
/* 진행바 */
|
|
progress {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
display: block;
|
|
width: 100%;
|
|
height: 6px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: var(--pico-progress-background-color, var(--surface));
|
|
overflow: hidden;
|
|
}
|
|
progress::-webkit-progress-bar {
|
|
background: var(--pico-progress-background-color, var(--surface));
|
|
border-radius: 999px;
|
|
}
|
|
progress::-webkit-progress-value {
|
|
background: var(--accent);
|
|
border-radius: 999px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
progress::-moz-progress-bar {
|
|
background: var(--accent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* 카드/아티클 */
|
|
article {
|
|
background: var(--pico-card-background-color, var(--bg));
|
|
border: 1px solid var(--pico-card-border-color, var(--border));
|
|
border-radius: var(--pico-border-radius, 7px);
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* 다이얼로그 */
|
|
dialog {
|
|
margin: auto;
|
|
border: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: var(--pico-color);
|
|
max-width: 90vw;
|
|
}
|
|
dialog::backdrop {
|
|
background: rgba(15, 20, 30, 0.45);
|
|
}
|