/* ========================================================================== Grouped Status View ========================================================================== */ .grouped-status-view-container { height: 100%; overflow: hidden; } /* Header */ .grouped-status-header { padding: var(--size-4-2) var(--size-4-3); background: var(--background-secondary); border-bottom: 1px solid var(--background-modifier-border); } .grouped-status-title { margin: 0 0 var(--size-4-2) 0; font-size: var(--font-ui-large); font-weight: var(--font-semibold); } /* Filters */ .grouped-status-filters { display: flex; flex-direction: column; gap: var(--size-4-2); } .grouped-status-note-input { width: 100%; padding: var(--size-2-2) var(--size-2-3); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--background-primary); color: var(--text-normal); font-size: var(--font-ui-medium); } .grouped-status-note-input:focus { outline: none; border-color: var(--interactive-accent); box-shadow: 0 0 0 2px var(--background-modifier-accent); } /* Content */ .grouped-status-content { flex: 1; overflow-y: auto; padding: var(--size-4-2); } /* Tag Section */ .grouped-status-tag-section { margin-bottom: var(--size-4-3); } .grouped-status-tag-header { display: flex; justify-content: space-between; align-items: center; padding: var(--size-4-2) var(--size-4-3); background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); cursor: pointer; transition: all var(--anim-duration-fast) ease; margin-bottom: var(--size-4-2); } .grouped-status-tag-header:hover { background: var(--background-modifier-hover); } .grouped-status-tag-content { padding-left: var(--size-4-2); } /* Status Group */ .grouped-status-group { margin-bottom: 2px; border-radius: var(--radius-m); overflow: hidden; } .grouped-status-group__header { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; cursor: pointer; border-radius: var(--radius-s); transition: background var(--anim-duration-fast) ease; position: relative; } .grouped-status-group__header:hover { background: var(--background-modifier-hover); } .grouped-status-group__header:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: -2px; } .grouped-status-group__status { display: flex; align-items: center; gap: var(--size-2-2); min-width: 0; flex: 1; } .grouped-status-group__template-badge { display: inline-flex; align-items: center; padding: var(--size-2-1) var(--size-2-2); background: var(--background-modifier-border); border-radius: var(--radius-s); font-size: var(--font-ui-smaller); color: var(--text-muted); font-weight: var(--font-medium); } .grouped-status-group__info { display: flex; align-items: center; gap: var(--size-2-2); margin-left: auto; } /* Files List */ .grouped-status-files { margin-bottom: var(--size-2-2); } .grouped-status-files-list { max-height: 400px; overflow-y: auto; } .grouped-status-file-item { cursor: pointer; transition: background var(--anim-duration-fast) ease; border-radius: var(--radius-s); margin-top: 1px; } .grouped-status-file-item:hover .tree-item-self { background: var(--background-modifier-hover); } .grouped-status-file-content { display: flex; flex-direction: column; width: 100%; } .grouped-status-file-name { font-weight: var(--font-medium); color: var(--text-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grouped-status-file-path { font-size: var(--font-ui-smaller); color: var(--text-muted); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Load More */ .grouped-status-load-more { display: flex; justify-content: center; padding: var(--size-4-2); border-top: 1px solid var(--background-modifier-border); } .grouped-status-load-btn { padding: var(--size-2-2) var(--size-4-2); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--interactive-normal); color: var(--text-normal); cursor: pointer; font-size: var(--font-ui-small); font-weight: var(--font-medium); transition: all var(--anim-duration-fast) ease; } .grouped-status-load-btn:hover { background: var(--interactive-hover); transform: translateY(-1px); } /* States */ .grouped-status-loading, .grouped-status-empty { display: flex; align-items: center; justify-content: center; padding: var(--size-4-6); color: var(--text-muted); font-size: var(--font-ui-medium); } .grouped-status-view-disabled { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--size-4-4); text-align: center; font-size: var(--font-ui-medium); color: var(--text-muted); background: var(--background-secondary); border: 2px dashed var(--background-modifier-border); border-radius: var(--radius-m); margin: var(--size-4-4); } /* Scrollbar */ .grouped-status-content::-webkit-scrollbar, .grouped-status-files-list::-webkit-scrollbar { width: var(--scrollbar-width); } .grouped-status-content::-webkit-scrollbar-thumb, .grouped-status-files-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: var(--radius-s); } .grouped-status-content::-webkit-scrollbar-thumb:hover, .grouped-status-files-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-active-bg); } /* Template Filter (BEM) */ .grouped-status-filters__template { display: flex; flex-direction: column; gap: var(--size-2-1); } .grouped-status-filters__template-select { width: 100%; padding: var(--size-2-2) var(--size-2-3); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--background-primary); color: var(--text-normal); font-size: var(--font-ui-small); cursor: pointer; } .grouped-status-filters__template-select:focus { outline: none; border-color: var(--interactive-accent); box-shadow: 0 0 0 2px var(--background-modifier-accent); } .grouped-status-filters__note { display: flex; flex-direction: column; gap: var(--size-2-1); } .grouped-status-filters__note-input { width: 100%; padding: var(--size-2-2) var(--size-2-3); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); background: var(--background-primary); color: var(--text-normal); font-size: var(--font-ui-small); } .grouped-status-filters__note-input:focus { outline: none; border-color: var(--interactive-accent); box-shadow: 0 0 0 2px var(--background-modifier-accent); } /* Template Badge (BEM) */ .grouped-status-group__status { display: flex; align-items: center; gap: var(--size-2-2); } .grouped-status-group__template-badge { background: var(--background-modifier-border); color: var(--text-muted); padding: var(--size-2-1) var(--size-2-2); border-radius: var(--radius-s); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); text-transform: capitalize; white-space: nowrap; }