Erweiterungen

src/main/frontend/styles/pdf-builder.css

@@ -80,14 +80,70 @@
 
 .inspector-item {
   display: flex;
-  align-items: center;
-  gap: var(--lumo-space-s);
-  padding: var(--lumo-space-xs) 0;
+  flex-direction: column;
+  gap: var(--lumo-space-xs);
+  padding: var(--lumo-space-s) 0;
   border-bottom: 1px dashed var(--lumo-contrast-10pct);
+  margin-bottom: var(--lumo-space-s);
+}
+
+.inspector-item:last-child { 
+  border-bottom: none; 
+  margin-bottom: 0;
+}
+
+.inspector-item .item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--lumo-space-xs);
+}
+
+.inspector-item .item-label { 
+  font-weight: 500;
+  font-size: var(--lumo-font-size-s); 
+  color: var(--lumo-body-text-color);
+  margin: 0;
+}
+
+.inspector-item .field-collapse-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--lumo-space-xs);
+  border-radius: var(--lumo-border-radius-s);
+  color: var(--lumo-secondary-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+}
+
+.inspector-item .field-collapse-button:hover {
+  background: var(--lumo-contrast-10pct);
+  color: var(--lumo-body-text-color);
+}
+
+.inspector-item .item-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lumo-space-xs);
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+  max-height: 1000px;
+  overflow: hidden;
+}
+
+.inspector-item.fields-collapsed .item-fields {
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.pdf-inspector vaadin-number-field { 
+  width: 100%;
 }
-.inspector-item:last-child { border-bottom: none; }
-.inspector-item > span { min-width: 30%; font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); }
-.pdf-inspector vaadin-number-field { width: 65%; }
 
 .pdf-canvas {
   width: 100%;