mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 08:07:49 +00:00
arookieofcanda-rookie-of-C-language
98c8c55b9e
Project view rows were locked to the pane width, so deeply nested files and long names were clipped with no way to read the rest. Rows now size to their content and the view scrolls horizontally. Rows are virtualised, so the scroll range keeps the widest row until the rows change. Otherwise scrolling past a wide row would remove the scrollbar and reset the horizontal position. Other trees opt out and keep clipping long labels. Co-authored-by: a-rookie-of-C-language <186315048+a-rookie-of-C-language@users.noreply.github.com>
158 lines
3.1 KiB
CSS
158 lines
3.1 KiB
CSS
.wrap {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
/* Tree.border 4,12,4,12 minus the island padding; rows are inset so the rounded selection floats. */
|
|
.tree {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
outline: none;
|
|
padding: 0 var(--tree-inset, 6px);
|
|
}
|
|
.tree::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.tree::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border: 2px solid transparent;
|
|
border-radius: 5px;
|
|
background-clip: content-box;
|
|
}
|
|
.tree::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-thumb-hover);
|
|
}
|
|
.tree::-webkit-scrollbar-track,
|
|
.tree::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
.emptyWrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--fg-faint);
|
|
}
|
|
.sizer {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.row {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding-right: 8px;
|
|
border-radius: var(--radius-selection, 5px);
|
|
color: var(--fg-strong);
|
|
white-space: nowrap;
|
|
}
|
|
/* At least the visible width so the selection covers it; wider rows overflow the sizer. */
|
|
.wideRow {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
}
|
|
.contentWidth {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
pointer-events: none;
|
|
}
|
|
.row:hover {
|
|
background: var(--bg-tree-hover, color-mix(in srgb, var(--fg-strong) 4%, transparent));
|
|
}
|
|
/* Tree.selectionInactiveBackground when unfocused, selectionBackground when focused. */
|
|
.selected,
|
|
.selected:hover {
|
|
background: var(--bg-tree-selected-inactive);
|
|
}
|
|
.tree:focus .selected,
|
|
.tree:focus-within .selected {
|
|
background: var(--bg-tree-selected);
|
|
}
|
|
.tree:focus-visible .lead:not(.selected) {
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
|
|
}
|
|
.loading {
|
|
color: var(--fg-faint);
|
|
}
|
|
.before::before,
|
|
.after::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--focus-ring);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.before::before {
|
|
top: 0;
|
|
}
|
|
.after::after {
|
|
bottom: 0;
|
|
}
|
|
.chevron {
|
|
flex: none;
|
|
width: 16px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--fg-muted);
|
|
}
|
|
.icon {
|
|
flex: none;
|
|
margin-right: 2px;
|
|
color: var(--fg-muted);
|
|
}
|
|
.label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.detail {
|
|
min-width: 0;
|
|
margin-left: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--fg-muted);
|
|
}
|
|
/* SpeedSearch popup above the tree. */
|
|
.speedSearch {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 8px;
|
|
z-index: var(--z-panel);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 26px;
|
|
max-width: calc(100% - 16px);
|
|
padding: 0 10px 0 8px;
|
|
border-radius: var(--radius-control, 4px);
|
|
background: var(--bg-popup);
|
|
border: 1px solid var(--border-popup);
|
|
box-shadow: var(--shadow-popup);
|
|
color: var(--fg-muted);
|
|
font-size: var(--fs-ui);
|
|
pointer-events: none;
|
|
}
|
|
.speedQuery {
|
|
color: var(--fg-strong);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: pre;
|
|
}
|
|
.noMatch .speedQuery {
|
|
color: var(--danger);
|
|
}
|