Refine survey list layout and backend active toggle

contao/templates/frontend/_survey_assets.html.twig

@@ -277,13 +277,13 @@
 
     .survey-list-card {
         display: grid;
-        gap: 0.9rem;
-        padding: 1.1rem 1.15rem;
+        gap: 0.55rem;
+        padding: 0.9rem 1rem;
     }
 
     .survey-list-card__head {
         display: flex;
-        gap: 1rem;
+        gap: 0.75rem;
         justify-content: space-between;
         align-items: flex-start;
     }
@@ -322,10 +322,21 @@
     .survey-list-card__stats {
         display: flex;
         flex-wrap: wrap;
-        gap: 0.85rem;
+        gap: 0.45rem;
+        margin-top: 0.1rem;
+    }
+
+    .survey-list-stat {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.34rem 0.62rem;
+        border-radius: 999px;
+        border: 1px solid rgba(0, 100, 173, 0.12);
+        background: rgba(255, 255, 255, 0.72);
         color: var(--survey-gray-dark);
-        font-weight: 600;
-        margin-top: 0.3rem;
+        font-size: 0.78rem;
+        font-weight: 700;
+        line-height: 1;
     }
 
     .survey-meta {
@@ -379,7 +390,7 @@
         transform: translateY(0);
     }
 
-    .survey-visibility-eye {
+    .survey-visibility-dot {
         width: 2.75rem;
         height: 2.75rem;
         border-radius: 999px;
@@ -392,41 +403,28 @@
         transition: background 0.18s ease, border-color 0.18s ease;
     }
 
-    .survey-visibility-eye__icon {
-        width: 1.25rem;
-        height: 0.8rem;
-        border: 2px solid currentColor;
-        border-radius: 99px;
-        position: relative;
-        color: #7f8793;
-    }
-
-    .survey-visibility-eye__icon::after {
-        content: "";
-        position: absolute;
-        width: 0.34rem;
-        height: 0.34rem;
+    .survey-visibility-dot__icon {
+        width: 1rem;
+        height: 1rem;
         border-radius: 50%;
-        background: currentColor;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
+        background: #7f8793;
+        display: inline-block;
     }
 
-    .survey-visibility-eye.is-on {
+    .survey-visibility-dot.is-on {
         background: rgba(0, 174, 151, 0.2);
         border-color: rgba(0, 174, 151, 0.68);
     }
 
-    .survey-visibility-eye.is-on .survey-visibility-eye__icon {
-        color: #0a8378;
+    .survey-visibility-dot.is-on .survey-visibility-dot__icon {
+        background: #0a8378;
     }
 
     .survey-button-row {
         display: flex;
         flex-wrap: wrap;
-        gap: 0.75rem;
-        margin-top: 1rem;
+        gap: 0.5rem;
+        margin-top: 0.65rem;
     }
 
     .survey-button-row--form-actions {
@@ -517,7 +515,7 @@
         justify-content: center;
         align-items: center;
         gap: 0.5rem;
-        padding: 0.8rem 1rem;
+        padding: 0.72rem 0.95rem;
         border-radius: 999px;
         border: 1px solid transparent;
         text-decoration: none;
@@ -525,6 +523,15 @@
         cursor: pointer;
     }
 
+    .survey-list-card__actions .survey-button {
+        padding: 0.55rem 0.82rem;
+        font-size: 0.9rem;
+    }
+
+    .survey-editor-meta-card {
+        margin-bottom: 1rem;
+    }
+
     .survey-button.primary { background: var(--survey-blue); color: #fff; }
     .survey-button.secondary { background: rgba(255,255,255,0.86); color: var(--survey-blue); border-color: rgba(0,100,173,0.18); }
     .survey-button.danger { background: rgba(157, 82, 118, 0.12); color: var(--survey-purple); border-color: rgba(157, 82, 118, 0.22); }