Add click handler on iframe to close Coloris color picker when user clicks in the preview area. Also improve editor panel spacing and styling consistency. Coloris Close Fix: - Import Coloris in App.vue - Add click listener on iframe document to call Coloris.close() - Fixes issue where Coloris remained open when clicking in preview iframe (clicks in iframes don't bubble to parent document) Editor Styling Improvements: - Increase EditorPanel width from 30rem to 35rem for better readability - Add CSS variable --space-xs (0.5rem) for consistent spacing - Improve form field spacing with gaps and better padding - Add row-gap to margins subsection - Fix input-with-color width and button height (1.1rem) - Add gap to unit-toggle buttons - Better visual hierarchy with margins on h2 and h3 CSS Changes: - _forms.scss: Consistent spacing, better input padding, gap utilities - _variables.scss: Add --space-xs variable - Compiled CSS updated with new styles 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
27 lines
298 B
CSS
27 lines
298 B
CSS
@page {
|
|
size: A4;
|
|
margin: 20mm 15mm 26mm 15mm;
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
@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;
|
|
}
|