FEATURE Refining gravity form aspect

resources/css/forms/gravity-forms.css

@@ -6,6 +6,13 @@
   --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
   --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
 }
+
+/* 
+.gf_page_steps {
+  --gf-field-pg-steps-number-bg-color-active: red;
+  @apply !justify-center mb-12;
+} */
+
 body.front-end {
   .gform-theme--api,
   .gform-theme--framework {
@@ -72,6 +79,32 @@ body.front-end {
 
     --gf-field-pg-steps-number-radius: 0;
 
+    --gf-field-pg-prog-margin-y-end: 3rem;
+    --gf-field-pg-steps-number-bg-color-active: red;
+
+    --gf-field-pg-steps-number-bg-color-complete: white;
+    --gf-field-pg-steps-number-border-color-complete: none;
+    --gf-field-pg-steps-number-color-complete: var(--wp--preset--color--carhop-green);
+
+    --gf-ctrl-btn-color-secondary: var(--wp--preset--color--carhop-green);
+
+    --gf-form-spinner-fg-color: var(--wp--preset--color--carhop-green-light);
+
+    --gf-ctrl-file-prev-name-color: white;
+    --gf-ctrl-file-prev-font-size: 16px;
+
+    --gf-ctrl-file-prog-bar-bg-color-loading: theme('colors.green.200');
+    --gf-ctrl-file-prog-bar-bg-color-complete: theme('colors.green.400');
+    --gf-ctrl-btn-icon-color-simple: theme('colors.red.400');
+
+    /* --gf-field-pg-steps-number-bg-color-complete: ; */
+    .gf_step_completed {
+      .gf_step_number,
+      .gf_step_number::after {
+        @apply rounded-full;
+      }
+    }
+
     h2.gform_submission_error {
       @apply justify-center;
     }
@@ -122,6 +155,10 @@ body.front-end {
       }
     }
 
+    input[type='file'] {
+      padding-bottom: 60px;
+    }
+
     input[type='submit'] {
       --gf-ctrl-btn-font-size: 1.25rem;
       --gf-ctrl-btn-padding-x: 2rem;
@@ -188,27 +225,20 @@ body.front-end {
       --gf-ctrl-padding-y: 2rem;
     }
 
-    .gfield_description {
-      /* --gf-ctrl-desc-color: white;
-      --gf-ctrl-desc-color-focus: white;
-      --gf-ctrl-desc-color-hover: white; */
-    }
     p {
       @apply !pb-0;
     }
 
-    /* input::placeholder {
+    select {
-      color: red !important;
+      @apply justify-self-end cursor-pointer !appearance-none  pr-10 text-white !py-8;
-    } */
+      /* Remplace la flèche native (appearance-none) — même asset que .post-grid__toolbar select */
-  }
+      background-color: transparent;
-
+      background-image: url('../resources/img/elements/select-drop-button-white.svg') !important;
-  /* .gfield:has(input[aria-required='true']) {
+      background-repeat: no-repeat;
-    @apply relative;
+      background-position: right 0.75rem center;
-    &:after {
+      background-size: 2rem 2rem;
-      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
-      line-height: 1;
     }
-  } */
+  }
 
   select,
   input,
@@ -270,7 +300,14 @@ body.front-end {
     @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
     transition: all 0.15s ease-out;
   }
+
+  &:has(select) {
+    .gfield_label {
+      @apply !opacity-100 static;
+    }
+  }
 }
+
 .gfield:has(input:focus, textarea:focus),
 .gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
   .gfield_label {
@@ -281,6 +318,7 @@ body.front-end {
   --gf-ctrl-placeholder-color: transparent;
 
   #placeholder,
+  textarea::placeholder,
   input::placeholder {
     @apply !opacity-0;
   }
@@ -303,10 +341,7 @@ body.front-end {
     color: white !important;
   }
   .gf_page_steps {
-    /* @apply !text-blue-300 ; */
-
     .gf_step_label {
-      /* @apply !text-cyan-500; */
       --gf-color-out-ctrl-dark: white !important;
       --gf-local-color: white !important;
     }
@@ -319,18 +354,59 @@ body.front-end {
   }
 }
 
+.gform_page_footer {
+  @apply !justify-center !mt-16;
+}
+.gf_page_steps {
+  --gf-field-pg-steps-number-bg-color-active: red;
+  @apply !justify-center;
+}
+
 .gf_step {
   @apply !text-green-400;
 }
 .gf_step_number {
   @apply !text-white !bg-transparent;
-  --gf-local-border: 2px solid red;
   border: 1px solid white !important;
-  border-top: none !important;
+  /* --gf-local-border: 2px solid white; */
-  border-left: none !important;
+  --gf-field-pg-steps-number-radius: 100%;
-  border-right: none !important;
+
+  border: 1px solid white !important;
 }
 
+.gf_step_active {
+  .gf_step_number {
+    border: none !important;
+    @apply !bg-green-300 !text-carhop-green-800;
+  }
+}
+
+.gf_step_completed {
+  .gf_step_number,
+  .gf_step_number {
+    border: none !important;
+  }
+}
 .gf_step_pending {
   opacity: 0.5 !important;
 }
+
+input[type='submit'],
+.gform_next_button,
+.gform_previous_button {
+  @apply !text-xl !py-6 !px-6;
+}
+
+.gform-page-footer:has(.gform-loader) {
+  .gform_next_button,
+  .gform_previous_button {
+    @apply !opacity-50;
+  }
+}
+
+.gform_drop_instructions {
+  @apply !text-lg;
+}
+button.gform_button_select_files {
+  @apply !text-lg;
+}