a6cc173293
Add reusable CollapsibleSection component with animated chevron and persisted collapse state. Applied to Sources, Templates, and Output tabs where natural content groupings exist. General and History tabs stay flat. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
81 lines
1.4 KiB
CSS
81 lines
1.4 KiB
CSS
/* Tab navigation for settings */
|
|
.cc-settings-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 16px;
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-primary);
|
|
z-index: 1;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.cc-settings-tab {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
border-bottom: 2px solid transparent;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.cc-settings-tab:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.cc-settings-tab.is-active {
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--interactive-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Collapsible sections */
|
|
.cc-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cc-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 4px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
user-select: none;
|
|
}
|
|
|
|
.cc-section-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.cc-section-title {
|
|
flex: 1;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cc-section-chevron {
|
|
font-size: 16px;
|
|
transition: transform 0.2s ease;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.cc-section.is-collapsed .cc-section-chevron {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.cc-section-content {
|
|
max-height: 2000px;
|
|
overflow: hidden;
|
|
transition: max-height 0.25s ease, opacity 0.2s ease;
|
|
opacity: 1;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.cc-section.is-collapsed .cc-section-content {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
padding-top: 0;
|
|
}
|