d707c5001d
- Split styles.css (1319 lines) into 6 CSS modules: - base.css, layout.css, modal.css, text-generator.css, components.css, legend.css - Split app.js (1219 lines) into 8 JS modules: - core.js, custom.js, dxf.js, export.js, legend.js, legend-export.js, path-parser.js, utils.js - Split symbols.js (870 lines) into 10 JS modules: - index.js, schaeden.js, werkzeuge.js, bauteile.js, moebel.js, sanitaer.js, vermessung.js, vermessung-infra.js, vermessung-topo.js, init.js - Updated index.html to load new modular files All files now comply with 300-line maximum rule. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
86 lines
1.5 KiB
CSS
86 lines
1.5 KiB
CSS
/* ============================================
|
|
LEGEND - Legenden-Modal und Preview
|
|
============================================ */
|
|
|
|
/* ========== MODAL WIDE ========== */
|
|
.modal-wide {
|
|
max-width: 1000px;
|
|
width: 95%;
|
|
}
|
|
|
|
.modal-medium {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.modal-small {
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* ========== LEGEND MODAL BODY ========== */
|
|
.legend-modal-body {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.legend-editor {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.legend-editor h3,
|
|
.legend-preview-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1rem;
|
|
color: #374151;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
/* ========== LEGEND PREVIEW ========== */
|
|
.legend-preview-section {
|
|
flex: 0 0 350px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.legend-preview-box {
|
|
flex: 1;
|
|
background: #ffffff;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
overflow: auto;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.legend-preview-box svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.legend-preview-actions {
|
|
margin-top: 0.75rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.legend-preview-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ========== RESPONSIVE ========== */
|
|
@media (max-width: 768px) {
|
|
.legend-modal-body {
|
|
flex-direction: column;
|
|
}
|
|
.legend-preview-section {
|
|
flex: none;
|
|
}
|
|
}
|