diff --git a/symbols/css/styles.css b/symbols/css/styles.css index e72b71f..3bb348c 100644 --- a/symbols/css/styles.css +++ b/symbols/css/styles.css @@ -1246,3 +1246,74 @@ input[type="range"]::-moz-range-thumb { [data-theme="dark"] .standalone-arrow-section .section-header h4 { color: #f5f1e8; } + +/* Legenden-Modal mit Vorschau */ +.modal-wide { + max-width: 1000px; + width: 95%; +} + +.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-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; +} + +@media (max-width: 768px) { + .legend-modal-body { + flex-direction: column; + } + .legend-preview-section { + flex: none; + } +} diff --git a/symbols/index.html b/symbols/index.html index 25f4322..fba5df0 100644 --- a/symbols/index.html +++ b/symbols/index.html @@ -159,7 +159,7 @@