Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161/* src/layout/file-tree/FileTreeItem.css */
.file-tree-item { position: relative; display: flex; align-items: center; gap: 0.375rem; /* Left padding is set inline (depth-aware, includes FILE_TREE_BASE_PAD_PX). * Right padding leaves room for the absolute-positioned action button. */ padding: 0.25rem 1.75rem 0.25rem 0; cursor: pointer; /* Flush rectangular hover/active fill to match the rectilinear chrome * across the rest of the app shell (side-tab strip, ribbon, chrome row). */ border-radius: 0; user-select: none; font-size: 0.875rem; color: var(--text-primary); transition: background-color 0.1s ease;}
.file-tree-item:hover { background-color: var(--file-tree-hover-bg);}
.file-tree-item:focus { outline: none; background-color: var(--file-tree-hover-bg); box-shadow: inset 0 0 0 1px var(--accent);}
.file-tree-item--active { background-color: var(--file-tree-active-bg);}
.file-tree-item--active:hover { /* Distinct from base hover and active — see --file-tree-active-hover-bg * in src/index.css. Previously this rule reused --file-tree-active-bg, * which silently collapsed the hover affordance for active rows. */ background-color: var(--file-tree-active-hover-bg);}
.file-tree-item--dragging { opacity: 0.5;}
.file-tree-item--drag-over-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background-color: var(--accent);}
.file-tree-item--drag-over-bottom::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: var(--accent);}
.file-tree-item__chevron { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: transform 0.15s ease; background: none; border: none; padding: 0; cursor: pointer;}
.file-tree-item__chevron:hover { color: var(--text-primary);}
.file-tree-item__chevron--expanded { transform: rotate(90deg);}
.file-tree-item__icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-secondary);}
.file-tree-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* Action button (ellipsis / more) — positioned absolutely to avoid consuming layout space and truncating filenames when hidden. */.file-tree-item__action-btn { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; color: var(--text-tertiary); cursor: pointer; /* Square — matches the rectilinear chrome. */ border-radius: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.1s ease, background-color 0.1s ease;}
.file-tree-item:hover .file-tree-item__action-btn,.file-tree-item:focus-within .file-tree-item__action-btn { opacity: 1; pointer-events: auto;}
.file-tree-item__action-btn:hover { background-color: var(--file-tree-hover-bg); color: var(--text-primary);}
/* Mobile touch targets */@media (pointer: coarse) { .file-tree-item { min-height: 44px; padding: 0.5rem; /* Always reserve space for action button on mobile */ padding-right: 2.5rem; }
.file-tree-item__chevron { width: 24px; height: 24px; }
/* Mobile: always show action button */ .file-tree-item__action-btn { opacity: 1; pointer-events: auto; width: 28px; height: 28px; right: 0.5rem; }}