와 호스트가 넣는 fluent-tree-item에는 scoped CSS 속성이 붙지 않아 전역으로 둔다.
선택 행은 평소 옅은 틴트 + 브랜드색 아이콘 + 기본 글자색, 사이드바에 키보드 포커스가 있을 때만 진한 채움(spec §5.4·§9).
:focus-within은 마우스 클릭 뒤에도 참이라 쓰지 않는다.
행의 hover·눌림 채움은 보조 표면(--tc-bg-secondary) 위에서 보이도록 고른 --tc-fill-hover-on-secondary·--tc-fill-pressed-on-secondary,
선택 채움은 사이드바 전용 --tc-sidebar-selected 다(tokens.css) — 전역 --tc-fill-hover 는 라이트에서 사이드바 배경과 같은 색이고,
전역 --tc-accent-tint 는 다크에서 사이드바 배경과 거의 같다. */
/* 사이드바 안 Fluent Subtle 버튼(섹션 ＋, 행 ⋯, 다중 선택 막대 ✕, Deployment 의 New Application ＋)의 hover·눌림:
Fluent 5.0.1 fluent-button 은 appearance="subtle" 의 :hover·:hover:active 배경에 var(--colorSubtleBackgroundHover)·var(--colorSubtleBackgroundPressed)를
쓴다(lib.module.js 1251–1261행). 라이트 값 #f5f5f5·#e0e0e0 의 hover 는 사이드바 배경과 같아 보이지 않으므로, 사이드바 안에서만 두 변수를
보조 표면 채움으로 바꾼다(사용자 정의 속성은 shadow 안 :host 규칙에도 상속된다). 같은 두 변수를 쓰는 다른 Fluent 요소는 트리 행
(.positioning-region:hover·:active, 5643–5651행 — 아래 트리 규칙이 이미 같은 값으로 덮는다)뿐이고, tablist·toggle-button 은 사이드바에 없다.
전역 --tc-fill-hover·--tc-fill-pressed 는 body 에서 풀린 값이라 이 재정의의 영향을 받지 않는다. */
.tc-sidebar {
--colorSubtleBackgroundHover: var(--tc-fill-hover-on-secondary);
--colorSubtleBackgroundPressed: var(--tc-fill-pressed-on-secondary);
}
/* 트리 행 안의 Subtle 버튼(⋯): 포인터가 ⋯ 위에 있으면 그 행도 hover 이거나 선택·다중 선택 채움이라, 위 값(행 hover 와 같은 채움)이면 ⋯ 의 hover 가
행과 구분되지 않는다(헤드리스 Edge 1.0:1). ⋯ hover 는 사이드바 바탕색으로 행 채움에서 도려낸 듯 보이게 하고(라이트 hover 행 대비 1.145·선택 1.262·
다중 선택 1.333, 다크 1.266·1.493·1.571 — fix 전 Fluent 라이트 값 #f5f5f5 와 같은 모양), 눌림은 보조 표면 눌림 채움이다. */
.tc-sidebar fluent-tree-item fluent-button {
--colorSubtleBackgroundHover: var(--tc-bg-secondary);
--colorSubtleBackgroundPressed: var(--tc-fill-pressed-on-secondary);
}
/* 그룹 목록(GroupedList) 상자 안 Fluent Subtle 버튼(예: Members 행의 ⋯)의 hover·눌림: 상자도 보조 표면(--tc-bg-secondary)이라 사이드바와 같은 이유로
라이트 hover 가 보이지 않는다 — 같은 보조 표면 채움 쌍으로 바꾼다(Task 8 fix K6). 누를 수 있는 행(a·button ListRow)의 hover 도 같은 채움이라,
그런 행 안에 Subtle 버튼을 둘 때는 사이드바 트리 행처럼 따로 정해야 한다(지금은 정적 행에만 있다). */
.tc-grouped-list__body {
--colorSubtleBackgroundHover: var(--tc-fill-hover-on-secondary);
--colorSubtleBackgroundPressed: var(--tc-fill-pressed-on-secondary);
}
.tc-sidebar-section + .tc-sidebar-section {
margin-top: var(--tc-space-4);
}
.tc-sidebar-section__header {
display: flex;
align-items: center;
gap: var(--tc-space-1);
min-height: var(--tc-space-6);
padding-inline: 10px var(--tc-space-1);
}
/* 섹션 제목: caption 12/16px 600, 보조색, Title Case 그대로 */
.tc-sidebar-section__title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--tc-text-secondary);
font-size: var(--tc-fs-caption);
line-height: var(--tc-lh-caption);
font-weight: var(--tc-fw-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.tc-sidebar-section__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--tc-space-1);
}
/* 행 사이 2px(--tc-row-sidebar-gap, 사용자 결정 2026-10-21) — gap 이라 첫 행 위·마지막 행 아래에는 생기지 않는다. 트리 행 사이는 아래 트리 규칙이 맡는다. */
.tc-sidebar-section__items {
display: flex;
flex-direction: column;
gap: var(--tc-row-sidebar-gap);
}
/* 행: 32px(≤768px 44px — --tc-row-sidebar, 사용자 결정 2026-10-21), 반경 8px, 패딩 0 10px, 아이콘 20px, 레이블 14px/500, 개수 caption */
.tc-sidebar .tc-sidebar-item {
display: flex;
align-items: center;
gap: var(--tc-space-2);
width: 100%;
height: var(--tc-row-sidebar);
box-sizing: border-box;
margin: 0;
padding: 0 10px;
border: 0;
border-radius: var(--tc-radius-md);
background-color: transparent;
color: var(--tc-text);
font: inherit;
font-size: var(--tc-fs-body);
line-height: var(--tc-lh-body);
font-weight: var(--tc-fw-medium);
text-align: start;
text-decoration: none;
cursor: pointer;
}
.tc-sidebar .tc-sidebar-item:hover {
background-color: var(--tc-fill-hover-on-secondary);
}
.tc-sidebar .tc-sidebar-item:active {
background-color: var(--tc-fill-pressed-on-secondary);
}
.tc-sidebar .tc-sidebar-item:disabled {
background-color: transparent;
color: var(--tc-text-tertiary);
cursor: default;
}
.tc-sidebar .tc-sidebar-item__icon {
flex: 0 0 auto;
color: var(--tc-accent-text);
}
.tc-sidebar .tc-sidebar-item:disabled .tc-sidebar-item__icon {
color: var(--tc-text-tertiary);
}
.tc-sidebar .tc-sidebar-item__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tc-sidebar .tc-sidebar-item__count {
flex: 0 0 auto;
color: var(--tc-text-secondary);
font-size: var(--tc-fs-caption);
line-height: var(--tc-lh-caption);
font-variant-numeric: tabular-nums;
}
/* 선택 행 (평소): hover·pressed보다 뒤에 두어 같은 특이도에서 이긴다. */
.tc-sidebar .tc-sidebar-item.is-active {
background-color: var(--tc-sidebar-selected);
color: var(--tc-text);
}
/* 선택 행 (사이드바에 키보드 포커스): 진한 채움 + 채움 위 글자색 */
.tc-sidebar:has(:focus-visible) .is-active {
background-color: var(--tc-accent);
color: var(--tc-on-accent);
}
.tc-sidebar:has(:focus-visible) .is-active .tc-sidebar-item__icon,
.tc-sidebar:has(:focus-visible) .is-active .tc-sidebar-item__count {
color: var(--tc-on-accent);
}
/* 트리(FluentTreeView)도 같은 행 높이·반경·선택 규칙. 선택 채움은 shadow DOM 안이라 ::part로 덮는다.
행 배경(선택 틴트·hover·키보드 포커스 링)은 깊이와 상관없이 사이드바 행 폭 전체이고 내용(펼침 화살표·아이콘·이름)만 깊이만큼 들여 쓴다(Finder 방식, 사용자 결정 2026-10-21).
Fluent 5.0.1 fluent-tree-item(lib.module.js)은 자식 항목을 shadow 의 .items(part="items") 안 slot 에 꽂고 그 상자를
padding-inline-start: var(--_subitem-padding-inline-start)로 민다(5669–5672행, size="small"이면 --spacingHorizontalM 12px — 5579–5581행).
배경을 그리는 .positioning-region 도 그 상자 안이라 함께 밀려, 깊은 행의 배경은 들여쓰기 자리에서 시작했다.
트리·항목은 size 속성이 없으면 small 이다(5527·5543행 this.size=sl.small — FluentTreeView 는 기본값 Medium 을 속성으로 내보내지 않는다).
그래서 .items 의 들여쓰기를 없애고 같은 12px 계단을 행의 안쪽 여백으로 옮긴다: 깊이 d 행의 padding-inline-start = 12px × (d + 1)
— small 의 기본 여백 12px(5693–5696행) + 예전 들여쓰기 12px × d 라 내용 자리는 그대로다.
깊이는 사용자 정의 속성이 flat tree 로 상속되는 것으로 센다: 자식 항목은 부모 .items 의 slot 에 꽂혀 .items 의 값을 물려받는다.
--tc-tree-indent 를 자기 값으로 다시 정의하면 순환이라 무효가 되므로, 부모의 값은 --tc-tree-parent-indent 로 따로 넘긴다.
포인터는 행(positioning-region)만 받는다: 항목 host 와 그 .items 는 pointer-events: none 이다(아래 행 사이 2px 설명). */
.tc-sidebar fluent-tree-item {
--tree-item-height: var(--tc-row-sidebar);
--tc-tree-indent: calc(var(--tc-tree-parent-indent, 0px) + var(--tc-space-3));
pointer-events: none;
}
.tc-sidebar fluent-tree-item::part(items) {
padding-inline-start: 0;
--tc-tree-parent-indent: var(--tc-tree-indent);
}
.tc-sidebar fluent-tree-item::part(positioning-region) {
padding-inline-start: var(--tc-tree-indent);
border-radius: var(--tc-radius-md);
pointer-events: auto;
}
/* 트리 행 사이 2px(--tc-row-sidebar-gap, 사용자 결정 2026-10-21): 같은 층의 다음 항목과 모든 자식 항목 위(자식의 바로 위 행은 부모 행이거나 앞 형제의 마지막 하위 행이다).
트리의 첫 항목 위·마지막 항목 아래에는 없고, 접힌 항목의 .items 는 display: none 이라 그 안의 여백도 생기지 않는다.
이 여백은 부모 항목의 상자(shadow .items 안, 첫 자식이면 부모 행과 .items 사이) 안에 놓인다. 그대로 두면 그 띠의 클릭이 부모 host 로 retarget 되어
fluent-tree 의 clickHandler(lib.module.js 5527행: Ot(e.target)이면 toggleExpansion() + selected = true)가 부모를 접고 선택했다 —
맨 위 폴더들 사이라면 부모는 Home 이라 트리 전체가 접히고 Home 으로 이동했다(T6b 리뷰 H1). 그래서 위 규칙이 항목 host 에 pointer-events: none,
행에만 auto 를 준다(pointer-events 는 flat tree 로 상속되어 행 안의 slot 내용 — 체크박스·이름·⋯·이름 바꾸기 입력·끌어 놓기 영역 — 은 그대로 auto 다).
띠의 포인터는 어느 항목에도 닿지 않고 fluent-tree 로 떨어져 아무 일도 하지 않는다: 클릭은 Ot(fluent-tree)가 거짓이라 무시되고, 어느 항목도 :hover 가 아니며
(부모의 다중 선택 체크박스가 나오지 않는다), 끌어 놓기 영역도 아니다. */
.tc-sidebar fluent-tree-item + fluent-tree-item,
.tc-sidebar fluent-tree-item > fluent-tree-item {
margin-top: var(--tc-row-sidebar-gap);
}
.tc-sidebar fluent-tree-item > span[slot="start"] {
color: var(--tc-accent-text);
}
/* 트리 행 hover·눌림: Fluent 는 shadow 의 .positioning-region:hover·:active 에 colorSubtleBackgroundHover·Pressed 를 쓴다(lib.module.js 5643–5651행) —
라이트의 Hover 는 사이드바 배경과 같은 #f5f5f5 라 보이지 않으므로 사이드바 토큰으로 덮는다. 선택 규칙보다 앞에 두어 같은 특이도에서 선택이 이긴다. */
.tc-sidebar fluent-tree-item::part(positioning-region):hover {
background-color: var(--tc-fill-hover-on-secondary);
}
.tc-sidebar fluent-tree-item::part(positioning-region):active {
background-color: var(--tc-fill-pressed-on-secondary);
}
.tc-sidebar fluent-tree-item[selected]::part(positioning-region) {
background-color: var(--tc-sidebar-selected);
color: var(--tc-text);
}
.tc-sidebar fluent-tree-item[selected]::part(content) {
color: var(--tc-text);
}
.tc-sidebar:has(:focus-visible) fluent-tree-item[selected]::part(positioning-region) {
background-color: var(--tc-accent);
color: var(--tc-on-accent);
}
.tc-sidebar:has(:focus-visible) fluent-tree-item[selected]::part(content),
.tc-sidebar:has(:focus-visible) fluent-tree-item[selected]::part(chevron),
.tc-sidebar:has(:focus-visible) fluent-tree-item[selected] > span[slot="start"] {
color: var(--tc-on-accent);
}
/* 같은 행 안의 Subtle 버튼(Cloud 트리의 ⋯): Fluent subtle 버튼의 글자색은 var(--colorNeutralForeground2)(라이트 #424242 — 진한 채움 위 약 1.8:1)라 흰색으로 바꾼다.
hover·눌림 글자 변수(…Foreground2Hover·Pressed)는 그대로 둔다 — ⋯ hover 는 사이드바 바탕색으로 도려낸 자리(아래 트리 행 Subtle 버튼 규칙)라 어두운 글리프가 맞다.
선택 행 자신의 내용(자식 fluent-tree-item 이 아닌 직계 자식)만 — 펼친 선택 폴더 안의 자식 행은 진한 채움 위가 아니다(final FA7). */
.tc-sidebar:has(:focus-visible) fluent-tree-item[selected] > :not(fluent-tree-item) fluent-button[appearance="subtle"] {
--colorNeutralForeground2: var(--tc-on-accent);
}
/* ── 사용자 메뉴 팝오버 (UserMenu): 반경 12px, 안쪽 여백 8px — fluent-popover-b의 shadow part ── */
fluent-popover-b.tc-user-menu::part(dialog) {
box-sizing: border-box;
padding: var(--tc-space-2);
border-radius: var(--tc-radius-lg);
}
/* 아바타 사진 비율 보존: v5 fluent-avatar 는 ::slotted(img)를 100% × 100%로만 맞추고 object-fit 을 주지 않아
비정사각 사진이 찌그러진다. 헤더·사용자 메뉴(셸)와 호스트 화면의 모든 FluentAvatar 에 한 번 준다 —
사진은 light DOM 의 ![]()
자식이라 바깥 규칙이 ::slotted 를 이긴다. */
fluent-avatar > img {
object-fit: cover;
}
/* Blazor 오류 표시줄 (마크업은 셸 BlazorErrorUi). 평소 숨김 — 오류가 나면 Blazor가 display:block으로 바꾼다. */
#blazor-error-ui {
display: none;
position: fixed;
inset: auto 0 0 0;
z-index: 1000;
padding: var(--tc-space-3) var(--tc-space-9) var(--tc-space-3) var(--tc-space-6);
background-color: var(--tc-bg-elevated);
color: var(--tc-text);
border-top: 2px solid var(--tc-warning);
box-shadow: var(--tc-shadow-popover);
font-size: var(--tc-fs-body);
line-height: var(--tc-lh-body);
}
#blazor-error-ui .reload {
color: var(--tc-accent-text);
}
/* 닫기는 키보드로도 누를 수 있게 네이티브 button이다 — 버튼 기본 모양을 지운다. */
#blazor-error-ui .dismiss {
position: absolute;
top: var(--tc-space-3);
inset-inline-end: var(--tc-space-4);
padding: 0;
border: 0;
background-color: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
/* 동작 줄이기: v5 FluentSkeleton은 이고 반짝임 애니메이션은 ::after에 있다. */
@media (prefers-reduced-motion: reduce) {
.fluent-skeleton[shimmer]::after,
[class*="fluent-skeleton-"]::after {
animation: none !important;
}
}
/* 아직 정의되지 않은 Fluent web components는 날것의 마크업을 비추지 않게 숨긴다.
v5는 fluent-badge-container·fluent-counter-badge-container를 등록하지 않는 감싸개 태그로 렌더하므로
빼지 않으면 붙은 배지와 그 앵커 내용이 영영 숨는다. */
:not(:defined):not(fluent-badge-container):not(fluent-counter-badge-container) {
visibility: hidden;
}