9af36fb422
Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
24 lines
254 B
CSS
24 lines
254 B
CSS
@page {
|
|
size: A4;
|
|
margin: 20mm 15mm 26mm 15mm;
|
|
}
|
|
|
|
@page {
|
|
@bottom-center { content: string(title); }
|
|
}
|
|
|
|
h2 {
|
|
break-before: page;
|
|
}
|
|
|
|
.chapter > h2 {
|
|
string-set: title content(text);
|
|
}
|
|
|
|
#chapter-2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
}
|