Change some scss to style the checkbox

view/template/acquisition/youtube.php

@@ -141,12 +141,10 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
       <p>LBRY offers a single-click sync process<br>for existing YouTubers</p>
         <form class="form" id="sync" method="post" action="http://api.lbry.io/yt/connect">
             <div class="form-inner">
-                <div class="block">
             <input type="text" hidden name="type" value="sync"/>
-                </div>
+
-                <div class="block">
+                <input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/><label class="block full" for="immediate-sync">I want to sync my content.</label>
-            <input name="immediate_sync" type="checkbox" value="true"/>I want to sync my content.
+
-                </div>
                 <div class="block">
                     <input type="submit" value="Sync Now"/>
                 </div>

web/scss/yt2.scss

@@ -675,22 +675,50 @@ header .right a.github {
       text-align: center;
     }
   }
-  .button {
+  form {
     float: left;
     width: 100%;
-    margin: 40px 0 0 0;
+    margin: 60px 0 0 0;
-    a {
+  }
-      float: none;
+  .form-inner {
-      display: block;
+    float: none;
-      text-decoration: none;
+    width: 446px;
+    margin: 0 auto;
+  }
+  .block {
+    position: relative;
+    float: left;
+    margin-top: 10px;
+  }
+  .error {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    font: normal 400 14px/40px 'metropolis-medium';
+    color: #E2495E;
+  }
+  label {
+    display: block;
+    text-indent: 15px;
+    margin-bottom: 15px;
+  }
+  input {
+    float: left;
+    height: 50px;
+    border-radius: 25px;
+    font: normal 400 16px/50px 'metropolis-medium';
+    &[type="text"] {
+      width: 306px;
+      background: #FFF;
+      text-indent: 32px;
+    }
+    &[type="submit"] {
       width: 120px;
-      height: 50px;
+      background: #2F3C5C;
-      background: #45B0AF;
-      margin: 0 auto;
-      border-radius: 25px;
-      font: normal 400 16px/50px 'metropolis-medium';
-      text-align: center;
       color: #FFF;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 0 0 20px;
       -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
       box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
@@ -699,9 +727,43 @@ header .right a.github {
         -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
         -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
-      }
+      }&[type="checkbox"] {
+         height: 50px;
+         margin: 6px 8px 0 0;
+         border-radius: 0;
+         &[readonly] {
+           pointer-events: none;
+         }
+       }
     }
   }
+  .error {
+    font: normal 400 14px/40px 'metropolis-medium';
+    color: #E2495E;
+  }
+  button {
+    float: left;
+    height: 50px;
+    background: #2F3C5C;
+    border-radius: 25px;
+    padding: 0 20px;
+    font: normal 400 16px/50px 'metropolis-medium';
+    color: #FFF;
+    cursor: pointer;
+    -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+    transition: box-shadow 0.3s;
+  }
+  a {
+    color: #45B0AF;
+  }
+  button:hover {
+    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  }
+
 }
 
 /* --- CONTACT --- */