diff --git a/src/index.html b/src/index.html
index f2610db..a2c62ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -369,6 +369,25 @@
Adjust message density and spacing
+
Preview
diff --git a/src/main.js b/src/main.js
index 28b2422..1c0ac9a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -170,6 +170,37 @@ function loadSavedViewMode() {
applyViewMode(savedMode);
}
+// Apply font size
+function applyFontSize(scale) {
+ const root = document.documentElement;
+
+ // Calculate font size based on scale (80-140%)
+ const baseFontSize = 14; // Default base size in px
+ const newFontSize = (baseFontSize * scale) / 100;
+
+ root.style.setProperty('--base-font-size', `${newFontSize}px`);
+ root.style.fontSize = `${newFontSize}px`;
+
+ // Update the display value
+ const fontSizeValue = document.getElementById('font-size-value');
+ if (fontSizeValue) {
+ fontSizeValue.textContent = `${scale}%`;
+ }
+
+ // Store preference
+ localStorage.setItem('claudia-font-size', scale.toString());
+}
+
+// Load saved font size
+function loadSavedFontSize() {
+ const savedSize = parseInt(localStorage.getItem('claudia-font-size') || '100');
+ const fontSizeSlider = document.getElementById('font-size-slider');
+ if (fontSizeSlider) {
+ fontSizeSlider.value = savedSize;
+ }
+ applyFontSize(savedSize);
+}
+
// Helper function to get avatar URL
async function getAvatarUrl(avatarFilename) {
if (!avatarFilename) return null;
@@ -1211,6 +1242,14 @@ function setupAppControls() {
applyViewMode(e.target.value);
});
}
+
+ // Setup font size slider
+ const fontSizeSlider = document.getElementById('font-size-slider');
+ if (fontSizeSlider) {
+ fontSizeSlider.addEventListener('input', (e) => {
+ applyFontSize(parseInt(e.target.value));
+ });
+ }
}
// Keyboard shortcuts
@@ -1608,6 +1647,7 @@ window.addEventListener('DOMContentLoaded', () => {
// Load saved preferences before anything else
loadSavedTheme();
loadSavedViewMode();
+ loadSavedFontSize();
loadExistingConfig();
});
diff --git a/src/styles.css b/src/styles.css
index e211e15..052643a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1324,6 +1324,65 @@ body {
cursor: pointer;
}
+/* Font size slider */
+.font-size-slider {
+ width: 100%;
+ height: 6px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+ cursor: pointer;
+}
+
+.font-size-slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 18px;
+ height: 18px;
+ background: var(--accent);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.font-size-slider::-webkit-slider-thumb:hover {
+ background: var(--accent-hover);
+ transform: scale(1.1);
+}
+
+.font-size-slider::-moz-range-thumb {
+ width: 18px;
+ height: 18px;
+ background: var(--accent);
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.font-size-slider::-moz-range-thumb:hover {
+ background: var(--accent-hover);
+ transform: scale(1.1);
+}
+
+.font-size-slider::-moz-range-track {
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ height: 6px;
+}
+
+#font-size-value {
+ color: var(--accent);
+ font-weight: 600;
+ font-size: 13px;
+}
+
/* View Mode Styles */
/* Compact Mode */