feat: redesign settings as slide-in sidebar with collapsible sections
- Changed from full-screen overlay to 500px slide-in sidebar from right - Added dark overlay backdrop that dims chat - Organized character settings into collapsible sections: * Basic Information (name, avatar, system prompt, greeting) * Roleplay Details (personality, description, scenario, examples) * Advanced Settings (post-history, alternate greetings) * Metadata (tags, creator, version, notes) - Smooth slide and collapse animations - Click overlay to close sidebar - Responsive: full width on mobile - More compact button layouts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
341
src/index.html
341
src/index.html
@@ -55,7 +55,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="settings-panel" id="settings-panel" style="display: none;">
|
<!-- Settings overlay backdrop -->
|
||||||
|
<div class="settings-overlay" id="settings-overlay"></div>
|
||||||
|
|
||||||
|
<div class="settings-panel" id="settings-panel">
|
||||||
<div class="settings-header">
|
<div class="settings-header">
|
||||||
<h2>Settings</h2>
|
<h2>Settings</h2>
|
||||||
<button id="close-settings-btn" class="icon-btn">
|
<button id="close-settings-btn" class="icon-btn">
|
||||||
@@ -125,165 +128,217 @@
|
|||||||
<label for="character-settings-select">Select Character</label>
|
<label for="character-settings-select">Select Character</label>
|
||||||
<select id="character-settings-select"></select>
|
<select id="character-settings-select"></select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-name">Character Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="character-name"
|
|
||||||
placeholder="Assistant"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Basic Info Section -->
|
||||||
<label for="character-avatar">Avatar (Optional)</label>
|
<div class="settings-section" data-section="basic">
|
||||||
<div class="avatar-upload">
|
<div class="settings-section-header">
|
||||||
<div id="avatar-preview" class="avatar-preview">
|
<div class="settings-section-title">
|
||||||
<div class="avatar-circle-large"></div>
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Basic Information
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="settings-section-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-name">Character Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="character-name"
|
||||||
|
placeholder="Assistant"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-avatar">Avatar (Optional)</label>
|
||||||
|
<div class="avatar-upload">
|
||||||
|
<div id="avatar-preview" class="avatar-preview">
|
||||||
|
<div class="avatar-circle-large"></div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="character-avatar"
|
||||||
|
accept="image/png,image/jpeg,image/jpg,image/webp"
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
<button type="button" id="upload-avatar-btn" class="btn-secondary">
|
||||||
|
Choose Image
|
||||||
|
</button>
|
||||||
|
<button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-system-prompt">System Prompt</label>
|
||||||
|
<textarea
|
||||||
|
id="character-system-prompt"
|
||||||
|
placeholder="You are a helpful AI assistant..."
|
||||||
|
rows="6"
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-greeting">Greeting (Optional)</label>
|
||||||
|
<textarea
|
||||||
|
id="character-greeting"
|
||||||
|
placeholder="Hello! How can I help you today?"
|
||||||
|
rows="2"
|
||||||
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="character-avatar"
|
|
||||||
accept="image/png,image/jpeg,image/jpg,image/webp"
|
|
||||||
style="display: none;"
|
|
||||||
/>
|
|
||||||
<button type="button" id="upload-avatar-btn" class="btn-secondary">
|
|
||||||
Choose Image
|
|
||||||
</button>
|
|
||||||
<button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
|
|
||||||
Remove
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Roleplay Details Section -->
|
||||||
<label for="character-system-prompt">System Prompt</label>
|
<div class="settings-section collapsed" data-section="roleplay">
|
||||||
<textarea
|
<div class="settings-section-header">
|
||||||
id="character-system-prompt"
|
<div class="settings-section-title">
|
||||||
placeholder="You are a helpful AI assistant..."
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
||||||
rows="6"
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
required
|
</svg>
|
||||||
></textarea>
|
Roleplay Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="settings-section-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-personality">Personality Tags</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="character-personality"
|
||||||
|
placeholder="helpful, friendly, knowledgeable"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-description">Description</label>
|
||||||
|
<textarea
|
||||||
|
id="character-description"
|
||||||
|
placeholder="Detailed character description, appearance, background..."
|
||||||
|
rows="8"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-scenario">Scenario</label>
|
||||||
|
<textarea
|
||||||
|
id="character-scenario"
|
||||||
|
placeholder="The setting or situation where the character exists..."
|
||||||
|
rows="4"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-mes-example">Message Examples</label>
|
||||||
|
<textarea
|
||||||
|
id="character-mes-example"
|
||||||
|
placeholder="Example dialogue from the character..."
|
||||||
|
rows="4"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Advanced Settings Section -->
|
||||||
<label for="character-greeting">Greeting (Optional)</label>
|
<div class="settings-section collapsed" data-section="advanced">
|
||||||
<textarea
|
<div class="settings-section-header">
|
||||||
id="character-greeting"
|
<div class="settings-section-title">
|
||||||
placeholder="Hello! How can I help you today?"
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
||||||
rows="2"
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
></textarea>
|
</svg>
|
||||||
|
Advanced Settings
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="settings-section-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-post-history">Post-History Instructions</label>
|
||||||
|
<textarea
|
||||||
|
id="character-post-history"
|
||||||
|
placeholder="Instructions to apply after chat history..."
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-alt-greetings">Alternate Greetings</label>
|
||||||
|
<textarea
|
||||||
|
id="character-alt-greetings"
|
||||||
|
placeholder="One greeting per line..."
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Metadata Section -->
|
||||||
<label for="character-personality">Personality Tags (Optional)</label>
|
<div class="settings-section collapsed" data-section="metadata">
|
||||||
<input
|
<div class="settings-section-header">
|
||||||
type="text"
|
<div class="settings-section-title">
|
||||||
id="character-personality"
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
||||||
placeholder="helpful, friendly, knowledgeable"
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
/>
|
</svg>
|
||||||
</div>
|
Metadata
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="settings-section-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="character-tags">Tags</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="character-tags"
|
||||||
|
placeholder="fantasy, adventure, comedy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="character-description">Description (Optional)</label>
|
<label for="character-creator">Creator</label>
|
||||||
<textarea
|
<input
|
||||||
id="character-description"
|
type="text"
|
||||||
placeholder="Detailed character description, appearance, background..."
|
id="character-creator"
|
||||||
rows="10"
|
placeholder="Card creator name"
|
||||||
></textarea>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="character-scenario">Scenario (Optional)</label>
|
<label for="character-version">Character Version</label>
|
||||||
<textarea
|
<input
|
||||||
id="character-scenario"
|
type="text"
|
||||||
placeholder="The setting or situation where the character exists..."
|
id="character-version"
|
||||||
rows="4"
|
placeholder="1.0"
|
||||||
></textarea>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="character-mes-example">Message Example (Optional)</label>
|
<label for="character-creator-notes">Creator Notes</label>
|
||||||
<textarea
|
<textarea
|
||||||
id="character-mes-example"
|
id="character-creator-notes"
|
||||||
placeholder="Example dialogue from the character..."
|
placeholder="Notes from the creator..."
|
||||||
rows="4"
|
rows="2"
|
||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-post-history">Post-History Instructions (Optional)</label>
|
|
||||||
<textarea
|
|
||||||
id="character-post-history"
|
|
||||||
placeholder="Instructions to apply after chat history..."
|
|
||||||
rows="3"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-alt-greetings">Alternate Greetings (Optional)</label>
|
|
||||||
<textarea
|
|
||||||
id="character-alt-greetings"
|
|
||||||
placeholder="One greeting per line..."
|
|
||||||
rows="3"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-tags">Tags (Optional)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="character-tags"
|
|
||||||
placeholder="fantasy, adventure, comedy"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-creator">Creator (Optional)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="character-creator"
|
|
||||||
placeholder="Card creator name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-version">Character Version (Optional)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="character-version"
|
|
||||||
placeholder="1.0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="character-creator-notes">Creator Notes (Optional)</label>
|
|
||||||
<textarea
|
|
||||||
id="character-creator-notes"
|
|
||||||
placeholder="Notes from the creator..."
|
|
||||||
rows="2"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="character-message" class="validation-message"></div>
|
<div id="character-message" class="validation-message"></div>
|
||||||
|
|
||||||
<button type="submit" id="save-character-btn" class="btn-primary">
|
<div style="display: flex; gap: 8px;">
|
||||||
Save Character
|
<button type="submit" id="save-character-btn" class="btn-primary" style="flex: 1;">
|
||||||
</button>
|
Save Character
|
||||||
<button type="button" id="delete-character-btn" class="btn-danger">
|
</button>
|
||||||
Delete Character
|
<button type="button" id="delete-character-btn" class="btn-danger">
|
||||||
</button>
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
|
<div style="display: flex; gap: 8px;">
|
||||||
<label>Character Card Import/Export</label>
|
<button type="button" id="import-character-btn" class="btn-secondary" style="flex: 1;">
|
||||||
<div style="display: flex; gap: 0.5rem;">
|
Import v2 Card
|
||||||
<button type="button" id="import-character-btn" class="btn-secondary" style="flex: 1;">
|
</button>
|
||||||
Import v2 Card
|
<button type="button" id="export-character-btn" class="btn-secondary" style="flex: 1;">
|
||||||
</button>
|
Export v2 Card
|
||||||
<button type="button" id="export-character-btn" class="btn-secondary" style="flex: 1;">
|
</button>
|
||||||
Export v2 Card
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
19
src/main.js
19
src/main.js
@@ -821,14 +821,16 @@ function setStatus(text, type = 'default') {
|
|||||||
|
|
||||||
// Show/hide settings
|
// Show/hide settings
|
||||||
async function showSettings() {
|
async function showSettings() {
|
||||||
settingsPanel.style.display = 'block';
|
const overlay = document.getElementById('settings-overlay');
|
||||||
chatView.style.display = 'none';
|
settingsPanel.classList.add('open');
|
||||||
|
overlay.classList.add('show');
|
||||||
await loadCharacterSettings();
|
await loadCharacterSettings();
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideSettings() {
|
function hideSettings() {
|
||||||
settingsPanel.style.display = 'none';
|
const overlay = document.getElementById('settings-overlay');
|
||||||
chatView.style.display = 'flex';
|
settingsPanel.classList.remove('open');
|
||||||
|
overlay.classList.remove('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tab switching
|
// Tab switching
|
||||||
@@ -1015,6 +1017,7 @@ function handleAvatarRemove() {
|
|||||||
function setupAppControls() {
|
function setupAppControls() {
|
||||||
document.getElementById('settings-btn').addEventListener('click', showSettings);
|
document.getElementById('settings-btn').addEventListener('click', showSettings);
|
||||||
document.getElementById('close-settings-btn').addEventListener('click', hideSettings);
|
document.getElementById('close-settings-btn').addEventListener('click', hideSettings);
|
||||||
|
document.getElementById('settings-overlay').addEventListener('click', hideSettings);
|
||||||
document.getElementById('clear-btn').addEventListener('click', clearHistory);
|
document.getElementById('clear-btn').addEventListener('click', clearHistory);
|
||||||
characterSelect.addEventListener('change', handleCharacterSwitch);
|
characterSelect.addEventListener('change', handleCharacterSwitch);
|
||||||
newCharacterBtn.addEventListener('click', handleNewCharacter);
|
newCharacterBtn.addEventListener('click', handleNewCharacter);
|
||||||
@@ -1028,6 +1031,14 @@ function setupAppControls() {
|
|||||||
document.getElementById('remove-avatar-btn').addEventListener('click', handleAvatarRemove);
|
document.getElementById('remove-avatar-btn').addEventListener('click', handleAvatarRemove);
|
||||||
document.getElementById('import-character-btn').addEventListener('click', handleImportCharacter);
|
document.getElementById('import-character-btn').addEventListener('click', handleImportCharacter);
|
||||||
document.getElementById('export-character-btn').addEventListener('click', handleExportCharacter);
|
document.getElementById('export-character-btn').addEventListener('click', handleExportCharacter);
|
||||||
|
|
||||||
|
// Setup collapsible sections
|
||||||
|
document.querySelectorAll('.settings-section-header').forEach(header => {
|
||||||
|
header.addEventListener('click', () => {
|
||||||
|
const section = header.parentElement;
|
||||||
|
section.classList.toggle('collapsed');
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keyboard shortcuts
|
// Keyboard shortcuts
|
||||||
|
|||||||
113
src/styles.css
113
src/styles.css
@@ -832,28 +832,56 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Settings Panel */
|
/* Settings Panel - Slide-in Sidebar */
|
||||||
.settings-panel {
|
.settings-panel {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -500px;
|
||||||
|
width: 500px;
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-left: 1px solid var(--border);
|
||||||
|
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1000;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
transition: right 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-panel.open {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings overlay backdrop */
|
||||||
|
.settings-overlay {
|
||||||
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: var(--bg-primary);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 1000;
|
z-index: 999;
|
||||||
overflow-y: auto;
|
opacity: 0;
|
||||||
padding: 60px 20px 20px;
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-overlay.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-header {
|
.settings-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-header h2 {
|
.settings-header h2 {
|
||||||
font-size: 20px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -863,9 +891,6 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
max-width: 400px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn {
|
.tab-btn {
|
||||||
@@ -902,13 +927,68 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings-form {
|
.settings-form {
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Collapsible sections */
|
||||||
|
.settings-section {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section-header:hover {
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section.collapsed .settings-section-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section-content {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
max-height: 2000px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section.collapsed .settings-section-content {
|
||||||
|
max-height: 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1095,6 +1175,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings-panel {
|
.settings-panel {
|
||||||
padding: 60px 16px 16px;
|
width: 100%;
|
||||||
|
right: -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-panel.open {
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user