feat: modify input radius in gradient border (#513)

Co-authored-by: Dunsin <[email protected]>

Author: FardeenCODEIIEST

index.html

@@ -583,19 +583,28 @@ <h1>Gradient Border</h1>
             <div class="preview" id="gradient-border-color-preview"></div>
 
             <label class="radius" for="gradient-border-radius">
-              <input type="checkbox" id="gradient-border-radius" name="check" />
-              <span> Include Radius </span>
-              <label id="radius-input-label" for="gradient-border-input">
-                <input
-                  type="number"
-                  id="gradient-border-input"
-                  name="desired-radius"
-                  placeholder="Enter a number e.g. 50"
-                  class="toggle-radius"
-                  autofocus
-                  required
-                />
-              </label>
+              <div class="radius-input-container">
+                <div class="radius-checkbox-container">
+                  <input
+                    class="circular-checkbox"
+                    type="checkbox"
+                    id="gradient-border-radius"
+                    name="check"
+                  />
+                  <span> Include Radius </span>
+                </div>
+                <label id="radius-input-label" for="gradient-border-input">
+                  <input
+                    type="number"
+                    id="gradient-border-input"
+                    name="desired-radius"
+                    placeholder="Enter a number e.g. 50"
+                    class="toggle-radius styled-input"
+                    autofocus
+                    required
+                  />
+                </label>
+              </div>
             </label>
 
             <label id="degree">

src/style.css

@@ -569,12 +569,21 @@ input::placeholder {
   left: 0;
 }
 
-#animation-duration,
+#animation-duration {
+  background: #0e213c;
+  border: 1px solid black;
+  border-radius: 5px;
+  -webkit-text-fill-color: white;
+  padding: 4px;
+  font-family: inherit;
+}
+
 #gradient-border-input {
-  border: 2px solid #2196f3;
+  background: white;
+  border: 1px solid black;
   border-radius: 5px;
+  -webkit-text-fill-color: black;
   padding: 4px;
-  margin-top: 8px;
   font-family: inherit;
 }
 
@@ -934,6 +943,19 @@ input[type='number']::-webkit-outer-spin-button {
   width: 100%;
 }
 
+.radius-checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.radius-input-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
 #border-radius-code {
   /* padding: 1rem; */
   background: var(--primary-color);