airkjw/claude-mem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Context Settings Modal with Terminal Preview and UI Enhancements (#161)

Browse Source 
* feat: Add Context Injection Settings modal with terminal preview

Adds a new settings modal accessible from the viewer UI header that allows users to configure context injection parameters with a live terminal preview showing how observations will appear.

Changes:
- New ContextSettingsModal component with auto-saving settings
- TerminalPreview component for live context visualization
- useContextPreview hook for fetching preview data
- Modal positioned to left of color mode button
- Settings sync with backend via worker service API

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: Add demo data and modify contextHook for cm_demo_content project

- Introduced DEMO_OBSERVATIONS and DEMO_SUMMARIES for the cm_demo_content project to provide mock data for testing and demonstration purposes.
- Updated contextHook to utilize demo data when the project is cm_demo_content, filtering observations based on configured types and concepts.
- Adjusted the worker service to use the contextHook with demo data, ensuring ANSI rendering for terminal output.
- Enhanced error handling and ensured proper closure of database connections.

* feat: add GitHub stars button with dynamic star count

- Implemented a new GitHubStarsButton component that fetches and displays the star count for a specified GitHub repository.
- Added useGitHubStars hook to handle API requests and state management for star count.
- Created formatStarCount utility function to format the star count into compact notation (k/M suffixes).
- Styled the GitHub stars button to match existing UI components, including hover and active states.
- Updated Header component to include the new GitHubStarsButton, replacing the static GitHub link.
- Added responsive styles to hide the GitHub stars button on mobile devices.

* feat: add API endpoint to fetch distinct projects and update context settings modal

- Implemented a new API endpoint `/api/projects` in `worker-service.ts` to retrieve a list of distinct projects from the observations.
- Modified `ContextSettingsModal.tsx` to replace the current project display with a dropdown for selecting projects, utilizing the fetched project list.
- Updated `useContextPreview.ts` to fetch projects on mount and manage the selected project state.
- Removed the `currentProject` prop from `ContextSettingsModal` and `App` components as it is now managed internally within the modal.

* Enhance Context Settings Modal and Terminal Preview

- Updated the styling of the Context Settings Modal for a modern clean design, including improved backdrop, header, and body layout.
- Introduced responsive design adjustments for smaller screens.
- Added custom scrollbar styles for better user experience.
- Refactored the TerminalPreview component to utilize `ansi-to-html` for rendering ANSI content, improving text display.
- Implemented new font variables for terminal styling across the application.
- Enhanced checkbox and input styles in the settings panel for better usability and aesthetics.
- Improved the layout and structure of settings groups and chips for a more organized appearance.

* Refactor UI components for compact design and enhance MCP toggle functionality

- Updated grid layout in viewer.html and viewer-template.html for better space utilization.
- Reduced padding and font sizes in settings groups, filter chips, and form controls for a more compact appearance.
- Implemented MCP toggle state management in ContextSettingsModal with API integration for status fetching and toggling.
- Reorganized settings groups for clarity, renaming and consolidating sections for improved user experience.
- Added feedback mechanism for MCP toggle status to inform users of changes and errors.

* feat: add collapsible sections, chip groups, form fields with tooltips, and toggle switches in settings modal

- Implemented collapsible sections for better organization of settings.
- Added chip groups with select all/none functionality for observation types and concepts.
- Enhanced form fields with optional tooltips for better user guidance.
- Introduced toggle switches for various settings, improving user interaction.
- Updated styles for new components to ensure consistency and responsiveness.
- Refactored ContextSettingsModal to utilize new components and improve readability.
- Improved TerminalPreview component styling for better layout and usability.

* Refactor modal header and preview selector styles; enhance terminal preview functionality

- Updated modal header padding and added gap for better spacing.
- Introduced a new header-controls section to include a project preview selector.
- Enhanced the preview selector styles for improved usability and aesthetics.
- Adjusted the preview column styles for a cleaner look.
- Implemented word wrap toggle functionality in the TerminalPreview component, allowing users to switch between wrapped and scrollable text.
- Improved scroll position handling in TerminalPreview to maintain user experience during content updates.

* feat: enhance modal settings with new icon links and update header controls

- Added new modal icon links for documentation and social media in ContextSettingsModal.
- Updated the header to remove sidebar toggle functionality and replaced it with context preview toggle.
- Refactored styles for modal icon links to improve UI/UX.
- Removed sidebar component from App and adjusted related state management.

* chore: remove abandoned cm_demo_content demo data approach

The demo data feature was prototyped but didn't work out. Removes:
- DEMO_OBSERVATIONS and DEMO_SUMMARIES arrays
- Conditional logic that bypassed DB for demo project
- Demo mode check in prior message extraction

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alex Newman
2025-12-03 21:34:41 -05:00
committed by GitHub
parent c78500cac2
commit 375dd1c3d6
17 changed files with 2937 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugin/scripts/context-hook.js
+7 -7
View File
File diff suppressed because one or more lines are too long
plugin/scripts/worker-service.cjs
+102 -96
View File
File diff suppressed because one or more lines are too long
plugin/ui/viewer-bundle.js
+11 -9
View File
File diff suppressed because one or more lines are too long
plugin/ui/viewer.html
+906
View File
@@ -80,6 +80,9 @@
--color-skeleton-highlight: #e8ecef;
--shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
/* Font families */
--font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}
/* Theme Variables - Dark Mode */
@@ -146,6 +149,9 @@
--color-skeleton-highlight: #4a4540;
--shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
/* Font families */
--font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}
/* System preference default */
@@ -213,6 +219,9 @@
--color-skeleton-highlight: #e8ecef;
--shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
/* Font families */
--font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}
}
@@ -280,6 +289,9 @@
--color-skeleton-highlight: #505050;
--shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
/* Font families */
--font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}
}
@@ -602,6 +614,61 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* GitHub Stars Button - Similar to Community Button */
.github-stars-btn {
background: var(--color-bg-card);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0 14px;
height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.github-stars-btn:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-focus);
color: var(--color-text-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.github-stars-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Stars count animation */
.stars-count {
animation: countUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
.stars-loading {
opacity: 0.5;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.icon-link {
display: flex;
align-items: center;
@@ -1453,6 +1520,11 @@
.community-btn {
display: none;
}
/* Hide GitHub stars button on mobile */
.github-stars-btn {
display: none;
}
}
/* Mobile Responsive Styles - 480px and below */
@@ -1590,6 +1662,840 @@
height: 44px;
}
}
/* Context Settings Modal - Modern Clean Design */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: fadeIn 0.2s ease-out;
padding: 20px;
}
.context-settings-modal {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 12px;
width: 100%;
max-width: 1200px;
height: 90vh;
max-height: 800px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.modal-header {
padding: 14px 20px;
border-bottom: 1px solid var(--color-border-primary);
background: var(--color-bg-header);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-shrink: 0;
}
.modal-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--color-text-header);
letter-spacing: -0.01em;
flex-shrink: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
justify-content: flex-end;
}
.preview-selector {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--color-text-secondary);
white-space: nowrap;
}
.preview-selector select {
background: var(--color-bg-card);
border: 1px solid var(--color-border-primary);
color: var(--color-text-primary);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.preview-selector select:hover {
border-color: var(--color-border-focus);
background: var(--color-bg-card-hover);
}
.preview-selector select:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.modal-close-btn {
background: transparent;
border: 1px solid var(--color-border-primary);
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}
.modal-close-btn:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-focus);
color: var(--color-text-primary);
transform: scale(1.05);
}
.modal-close-btn:active {
transform: scale(0.95);
}
.modal-icon-link {
background: transparent;
border: 1px solid var(--color-border-primary);
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
text-decoration: none;
}
.modal-icon-link:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-focus);
color: var(--color-text-primary);
transform: scale(1.05);
}
.modal-icon-link:active {
transform: scale(0.95);
}
.modal-body {
flex: 1;
display: grid;
grid-template-columns: 70fr 30fr;
gap: 0;
overflow: hidden;
min-height: 0;
}
/* Preview Column - Terminal Style */
.preview-column {
padding: 20px;
overflow: hidden;
border-right: none;
background: transparent;
display: flex;
flex-direction: column;
}
.preview-column-header {
padding: 16px 20px;
background: #141414;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.preview-column-header label {
display: block;
font-size: 11px;
font-weight: 600;
color: #888;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.preview-column-header select {
width: 100%;
background: #0a0a0a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
padding: 8px 12px;
height: 36px;
font-size: 13px;
font-weight: 500;
color: #ddd;
cursor: pointer;
transition: all 0.2s;
}
.preview-column-header select:hover {
border-color: rgba(255, 255, 255, 0.2);
background: #111;
}
.preview-column-header select:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}
.preview-content {
flex: 1;
overflow-y: auto;
padding: 20px;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
font-size: 13px;
line-height: 1.6;
color: #ccc;
}
.preview-content pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Settings Column */
.settings-column {
padding: 0;
overflow-y: auto;
background: var(--color-bg-primary);
position: relative;
}
/* Custom Scrollbar */
.settings-column::-webkit-scrollbar {
width: 8px;
}
.settings-column::-webkit-scrollbar-track {
background: transparent;
}
.settings-column::-webkit-scrollbar-thumb {
background: var(--color-bg-scrollbar-thumb);
border-radius: 4px;
}
.settings-column::-webkit-scrollbar-thumb:hover {
background: var(--color-bg-scrollbar-thumb-hover);
}
.preview-content::-webkit-scrollbar {
width: 8px;
}
.preview-content::-webkit-scrollbar-track {
background: transparent;
}
.preview-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
.preview-content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Settings Groups - Compact */
.settings-group {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border-primary);
}
.settings-group:last-child {
border-bottom: none;
}
.settings-group h4 {
margin: 0 0 10px 0;
font-size: 10px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
}
/* Filter Chips - Compact */
.chips-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
min-height: 28px;
border: 1px solid var(--color-border-primary);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-bg-card);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.chip:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-border-hover);
color: var(--color-text-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.chip:active {
transform: translateY(0);
}
.chip.selected {
background: linear-gradient(135deg, var(--color-bg-button) 0%, var(--color-accent-primary) 100%);
color: white;
border-color: var(--color-bg-button);
box-shadow: 0 2px 8px rgba(9, 105, 218, 0.25);
}
.chip.selected:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(9, 105, 218, 0.35);
}
/* Form Controls in Modal - Compact */
.settings-group input[type="number"],
.settings-group select {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border-primary);
border-radius: 4px;
padding: 6px 10px;
height: 32px;
font-size: 12px;
color: var(--color-text-primary);
transition: all 0.2s;
margin-top: 4px;
}
.settings-group input[type="number"]:hover,
.settings-group select:hover {
border-color: var(--color-border-hover);
}
.settings-group input[type="number"]:focus,
.settings-group select:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}
.settings-group label {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 4px;
}
/* Checkboxes - Compact */
.settings-group input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
margin-right: 6px;
accent-color: var(--color-accent-primary);
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.checkbox-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 4px 0;
}
.checkbox-item label {
margin: 0;
cursor: pointer;
font-size: 11px;
font-weight: 500;
color: var(--color-text-secondary);
}
.checkbox-item:hover label {
color: var(--color-text-primary);
}
/* Number Input Group - Compact */
.number-input-group {
margin-top: 6px;
}
.select-group {
margin-top: 6px;
}
.number-input-group + .number-input-group,
.select-group + .number-input-group,
.number-input-group + .select-group {
margin-top: 10px;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ============================================
NEW: Collapsible Sections
============================================ */
.settings-section-collapsible {
border-bottom: 1px solid var(--color-border-primary);
}
.settings-section-collapsible:last-child {
border-bottom: none;
}
.section-header-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.section-header-btn:hover {
background: var(--color-bg-card-hover);
}
.section-header-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.section-title {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.section-description {
font-size: 11px;
color: var(--color-text-muted);
font-weight: 400;
}
.chevron-icon {
color: var(--color-text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.chevron-icon.rotated {
transform: rotate(180deg);
}
.section-content {
padding: 0 16px 16px 16px;
}
/* ============================================
NEW: Chip Groups with All/None
============================================ */
.chip-group {
margin-bottom: 14px;
}
.chip-group:last-child {
margin-bottom: 0;
}
.chip-group-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.chip-group-label {
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chip-group-actions {
display: flex;
gap: 4px;
}
.chip-action {
padding: 2px 8px;
font-size: 10px;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: 3px;
cursor: pointer;
transition: all 0.15s ease;
}
.chip-action:hover {
color: var(--color-text-primary);
border-color: var(--color-border-hover);
background: var(--color-bg-card-hover);
}
.chip-action.active {
color: var(--color-accent-primary);
border-color: var(--color-accent-primary);
background: var(--color-type-badge-bg);
}
/* ============================================
NEW: Form Fields with Tooltips
============================================ */
.form-field {
margin-bottom: 12px;
}
.form-field:last-child {
margin-bottom: 0;
}
.form-field-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.tooltip-trigger {
display: inline-flex;
align-items: center;
color: var(--color-text-muted);
cursor: help;
transition: color 0.15s ease;
}
.tooltip-trigger:hover {
color: var(--color-accent-primary);
}
.form-field input[type="number"],
.form-field select {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 8px 12px;
height: 36px;
font-size: 13px;
color: var(--color-text-primary);
transition: all 0.15s ease;
}
.form-field input[type="number"]:hover,
.form-field select:hover {
border-color: var(--color-border-hover);
}
.form-field input[type="number"]:focus,
.form-field select:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}
/* ============================================
NEW: Toggle Switches
============================================ */
.toggle-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-secondary);
}
.toggle-row:last-child {
border-bottom: none;
}
.toggle-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.toggle-label {
font-size: 12px;
font-weight: 500;
color: var(--color-text-primary);
cursor: pointer;
}
.toggle-description {
font-size: 11px;
color: var(--color-text-muted);
line-height: 1.3;
}
.toggle-switch {
position: relative;
width: 40px;
height: 22px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: 11px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
margin-left: 12px;
padding: 0;
}
.toggle-switch:hover:not(.disabled) {
border-color: var(--color-border-hover);
}
.toggle-switch.on {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
}
.toggle-switch.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-switch.on .toggle-knob {
transform: translateX(18px);
}
/* ============================================
NEW: Display Subsections
============================================ */
.display-subsection {
padding: 12px 0;
border-bottom: 1px solid var(--color-border-secondary);
}
.display-subsection:first-child {
padding-top: 0;
}
.display-subsection:last-child {
border-bottom: none;
padding-bottom: 0;
}
.subsection-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
/* ============================================
Improved Chip Styles
============================================ */
.chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
min-height: 30px;
border: 1px solid var(--color-border-primary);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-bg-card);
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.chip:hover {
background: var(--color-bg-card-hover);
border-color: var(--color-accent-primary);
color: var(--color-text-primary);
}
.chip:active {
transform: scale(0.98);
}
.chip.selected {
background: var(--color-accent-primary);
color: white;
border-color: var(--color-accent-primary);
}
.chip.selected:hover {
background: var(--color-bg-button-hover);
border-color: var(--color-bg-button-hover);
}
/* Responsive Modal */
@media (max-width: 900px) {
.modal-body {
grid-template-columns: 1fr;
}
.preview-column {
display: none;
}
}
@media (max-width: 600px) {
.modal-backdrop {
padding: 0;
}
.context-settings-modal {
border-radius: 0;
height: 100vh;
max-height: none;
}
.modal-header {
padding: 12px 16px;
gap: 12px;
}
.preview-selector {
font-size: 11px;
gap: 6px;
}
.preview-selector select {
padding: 5px 10px;
font-size: 11px;
}
.settings-group {
padding: 14px 16px;
}
.section-header-btn {
padding: 12px 14px;
}
.section-content {
padding: 0 14px 14px 14px;
}
.toggle-row {
padding: 8px 0;
}
.toggle-switch {
width: 36px;
height: 20px;
}
.toggle-knob {
width: 14px;
height: 14px;
}
.toggle-switch.on .toggle-knob {
transform: translateX(16px);
}
}
</style>
</head>