eomsangdonandClaude Opus 5.5
02f15c3d6a
- [?] = openModal wide · 왼쪽 차례(임도 설계 B → 안정성평가 E → 예정노선 D · 지금 페이지 펼침) ·
오른쪽 = 모든 페이지 이어 그림 · 처음 = 보이는 data-help-topic 절 → 지금 페이지 절 → 맨 앞 · B05↔B06 짝 걷음
- 그리기: 덩어리마다 원문 줄(data-src) · `` → figure(loading=lazy · ?v=판) ·
없는 그림 = 관리자 「그림 없음 — 더블클릭해 지정」 / 일반 「그림 준비 중」 · `> 주의:` · `> 참고:` 상자 ·
`[글](B06/00_설명서)` → 모달 안 이동 · 페이지를 안 넘기면(B01 지식 채팅) 옛 출력 그대로
- GET /api/help 에 페이지마다 그림 판 · GET /api/help/{page}/img/{name}(이름 규칙 · no-cache) ·
옛 GET /api/help/{page} 걷음(모달이 한 가이드로 바뀜)
- B01 대시보드 머리 역할 배지 왼쪽에 [?]
- 시험 test_538_help_guide.py(변환 글 · 그림 404 · admin 칸) + helper_538_help_render.cjs
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
188 lines
3.8 KiB
CSS
188 lines
3.8 KiB
CSS
/* [?] 사용자 가이드(54-2 · 538) — 단추는 글자 폭만 · 넓은 모달 = 왼쪽 차례 · 오른쪽 가이드 통째 · [<] [>](280-2)도 같은 정사각 */
|
|
.ui-sidebar-actions .ui-help-btn,
|
|
.ui-help-btn,
|
|
.ui-sidebar-actions .ui-step-nav-btn,
|
|
.ui-step-nav-btn {
|
|
flex: none;
|
|
/* 정사각 — 너비 = 높이(글 한 줄 · 위아래 여백 · 테두리) */
|
|
width: calc(1em + 2 * var(--spacing-8) + 2px);
|
|
min-width: 0;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
/* B01 대시보드 머리 — [?] + 역할 배지 한 줄 */
|
|
.ui-help-head {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ui-help .ui-modal__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-help__grid {
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
gap: var(--spacing-16);
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.ui-help__toc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding-right: var(--spacing-8);
|
|
border-right: 1px solid var(--color-border);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ui-help__group {
|
|
margin: var(--spacing-12) 0 var(--spacing-4);
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ui-help__group:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ui-help__subs {
|
|
display: none;
|
|
flex-direction: column;
|
|
padding-left: var(--spacing-12);
|
|
}
|
|
|
|
.ui-help__toc-page.is-open > .ui-help__subs {
|
|
display: flex;
|
|
}
|
|
|
|
.ui-help__link,
|
|
.ui-help__link--sub {
|
|
width: 100%;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-help__link--sub {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ui-help__toc-page.is-open > .ui-help__link {
|
|
color: var(--color-text-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ui-help__link:hover,
|
|
.ui-help__link--sub:hover,
|
|
.ui-help__link.is-active,
|
|
.ui-help__link--sub.is-active {
|
|
background: color-mix(in srgb, var(--color-border) 60%, transparent);
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.ui-help__text {
|
|
overflow-y: auto;
|
|
padding-right: var(--spacing-8);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ui-help__page + .ui-help__page {
|
|
margin-top: var(--spacing-24);
|
|
padding-top: var(--spacing-24);
|
|
border-top: 2px solid var(--color-border);
|
|
}
|
|
|
|
.ui-help__item + .ui-help__item {
|
|
margin-top: var(--spacing-16);
|
|
}
|
|
|
|
.ui-help__page,
|
|
.ui-help__item {
|
|
scroll-margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.ui-help-figure {
|
|
max-width: 900px;
|
|
margin: var(--spacing-12) 0;
|
|
}
|
|
|
|
.ui-help-figure img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.ui-help-figure figcaption {
|
|
margin-top: var(--spacing-4);
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ui-help-figure__empty {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 120px;
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ui-help-note {
|
|
display: block;
|
|
margin: 0 0 var(--spacing-8);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-left: 4px solid var(--color-accent);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
|
}
|
|
|
|
.ui-help-note--warn {
|
|
border-left-color: var(--color-warning);
|
|
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
|
}
|
|
|
|
.ui-help-goto {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.ui-help__text h2 {
|
|
margin: 0 0 var(--spacing-12);
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.ui-help__text h3 {
|
|
margin: var(--spacing-16) 0 var(--spacing-4);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.ui-help__text h4,
|
|
.ui-help__text h5 {
|
|
margin: var(--spacing-12) 0 var(--spacing-4);
|
|
font-size: 1em;
|
|
}
|
|
|
|
.ui-help__text p,
|
|
.ui-help__text ul,
|
|
.ui-help__text ol {
|
|
margin: 0 0 var(--spacing-8);
|
|
}
|
|
|
|
.ui-help__text ul,
|
|
.ui-help__text ol {
|
|
padding-left: 1.4em;
|
|
}
|