@5minds/node-red-dashboard-2-processcube-dynamic-form 2.2.1 → 2.3.0-develop-999cb6-mfglqyd6

package/ui/stylesheets/ui-dynamic-form.css

@@ -68,7 +68,7 @@ code {
 .ui-dynamic-form-title-default {
   background: linear-gradient(131deg, #18181a 26.76%, #242326 100.16%);
   padding: 32px;
-  color: #ffffff;
+  color: #fff;
   font-size: 36px;
   font-weight: 700;
   border-radius: 8px 8px 0px 0px;
@@ -168,7 +168,8 @@ code {
   min-height: 36px;
   padding: 8px 12px;
   box-sizing: border-box;
-  flex-shrink: 0;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 @media screen and (min-width: 600px) {
@@ -177,10 +178,8 @@ code {
   }
 
   .ui-dynamic-form-footer-action-button {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    word-wrap: break-word;
   }
 }
 
@@ -287,15 +286,13 @@ code {
     font-size: 16px;
     width: 100%;
     box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    word-wrap: break-word;
   }
 
   .ui-dynamic-form-footer-action-button .v-btn__content {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
     max-width: 100% !important;
     display: block !important;
   }
@@ -310,9 +307,8 @@ code {
 
   .ui-dynamic-form-footer-action-primary .v-btn__content,
   .ui-dynamic-form-footer-action-secondary .v-btn__content {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
     max-width: 100% !important;
     display: block !important;
   }
@@ -597,3 +593,111 @@ code {
   margin: revert;
   padding: revert;
 }
+
+.ui-dynamic-form-image-previews {
+  margin-bottom: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.ui-dynamic-form-image-previews h4 {
+  margin: 0 0 12px 0;
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.ui-dynamic-form-preview-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.ui-dynamic-form-preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  max-width: 150px;
+}
+
+.ui-dynamic-form-preview-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.ui-dynamic-form-preview-image {
+  width: 120px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: border-color 0.2s ease;
+}
+
+.ui-dynamic-form-preview-image:hover {
+  border-color: #1976d2;
+}
+
+.ui-dynamic-form-preview-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 8px;
+  text-align: center;
+}
+
+.ui-dynamic-form-preview-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+  word-break: break-word;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ui-dynamic-form-preview-size {
+  font-size: 10px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.ui-dynamic-form-file-wrapper {
+  width: 100%;
+}
+
+/* Dark theme adjustments */
+.ui-dynamic-form-dark .ui-dynamic-form-image-previews {
+  background-color: #2d2d2d;
+  border-color: #555;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-image-previews h4 {
+  color: #fff;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-item {
+  background-color: #3d3d3d;
+  border-color: #555;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-name {
+  color: #fff;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-size {
+  color: #ccc;
+}