eomsangdonandClaude Opus 5.5
fbe0f982d3
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ji4nuyLVHcxrXWHTdb5nRD
99 lines
3.1 KiB
CSS
99 lines
3.1 KiB
CSS
/* =============================================================================
|
|
* device_context.css — 기기 대응 공통 규칙(PLAN_기기대응 2-6)
|
|
* 모든 규칙은 `<html>` 표시(data-touch · data-size) 안에서만 — 데스크탑 마우스 화면은 안 바뀜.
|
|
* 표시는 `device_context.ts` 가 적음.
|
|
* ========================================================================== */
|
|
|
|
/* 누를 자리 44px — 손가락(주 입력 coarse) 또는 터치 모드 켬 */
|
|
html[data-touch="on"]
|
|
:is(
|
|
.ui-btn,
|
|
.ui-workflow-overlay__toggle,
|
|
.ui-sidebar-row,
|
|
.ui-workflow-layout__step,
|
|
.ui-ctx-menu__item,
|
|
select,
|
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"])
|
|
) {
|
|
min-height: 44px;
|
|
}
|
|
|
|
html[data-touch="on"] .ui-btn {
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* 체크 · 라디오 — 상자를 키우고 글까지 한 줄 전체가 누를 자리 */
|
|
html[data-touch="on"] :is(input[type="checkbox"], input[type="radio"]) {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
html[data-touch="on"] .ui-checkbox {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* 접힌 좌측 패널 손잡이 — 손가락 폭 · 화면 왼쪽 끝 안 */
|
|
html[data-touch="on"]
|
|
.ui-workflow-overlay__panel--title.is-collapsed
|
|
> .ui-workflow-overlay__handle--side {
|
|
width: 32px;
|
|
right: -32px;
|
|
}
|
|
|
|
/* 팝업(2-4) — 폭 600 미만은 전체 화면 · 겹치면 나중 것(맨 위)만 보이고 × 로 앞 창.
|
|
공용 모달(.ui-modal) · 페이지 팝업은 공용 클래스 `.ui-popup` 만 붙여 맞춤(자리 · 크기 인라인 값도 덮음) */
|
|
html[data-size="compact"] :is(.ui-modal, .ui-popup) {
|
|
position: fixed !important;
|
|
inset: 0 !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
min-width: 0 !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
margin: 0 !important;
|
|
border-radius: 0 !important;
|
|
transform: none !important;
|
|
overflow: auto;
|
|
}
|
|
|
|
html[data-size="compact"] .ui-confirm__panel {
|
|
min-width: 0;
|
|
max-width: calc(100vw - var(--spacing-32));
|
|
}
|
|
|
|
/* 공용 표(2-5) — 폭 840 미만은 고정 열이 없는 표도 첫 열을 붙임(머리줄은 늘 붙어 있음 · 가로는 밀기) */
|
|
html:is([data-size="compact"], [data-size="medium"])
|
|
.ui-data-table__table:not(:has(.is-frozen))
|
|
tr
|
|
> :first-child {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
html:is([data-size="compact"], [data-size="medium"])
|
|
.ui-data-table__table:not(:has(.is-frozen))
|
|
thead
|
|
tr
|
|
> :first-child {
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 터치 모드에서만 보이는 단추(자판 없는 기기용 · 4-3) — 마우스 화면엔 없음 */
|
|
html:not([data-touch="on"]) .ui-touch-only {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 위 줄 높이(6-1) — 화면 높이 계산이 모두 이 값을 씀 · 로그인 뒤 쪽(B · M)은 위 줄을 걷어 0(7-1)
|
|
☰ 폭(7-4) · 들여쓰기(7-2) = 왼쪽 위에 뜬 ☰(자리 8 + 폭) + 틈 8 · 그 자리에 걸치는 첫 줄이 이만큼 왼쪽을 비움 */
|
|
:root {
|
|
--app-header-h: 64px;
|
|
--app-burger-w: 36px;
|
|
--app-burger-inset: 0px;
|
|
}
|
|
|
|
html.is-bm-route {
|
|
--app-header-h: 0px;
|
|
--app-burger-inset: calc(var(--spacing-8) * 2 + var(--app-burger-w));
|
|
}
|