Fix captcha and box-shadow

app/assets/stylesheets/colors.css.scss

@@ -7,7 +7,7 @@ $background-blue: #E7F2F7;
 $grey: #2B2B2B;
 $light-grey: #DDDDDD;
 
-$border-grey: #CCCCCC;
+$border-grey: #DDDDDD;
 $border-dark-grey: #999999;
 
 $link-grey: #777777;

app/assets/stylesheets/new_styles/_forms.scss

@@ -1,19 +1,19 @@
 input,
+input[type=email],
+input[type=text],
+input[type=password],
 textarea { /* Bootstrap reset */
   &,
   &:active,
   &:invalid,
-  &:invalid:required, {
+  &:invalid:required,
-    border-color: $border-grey;
-    box-shadow: none;
-  }
-
   &:focus,
   &:active:focus,
   &:invalid:focus,
   &:invalid:required:focus {
-    border-color: $border-dark-grey;
+    border-color: $border-grey;
     box-shadow: none;
+    color : $text-dark-grey;
   }
 }
 
@@ -78,19 +78,6 @@ form.block-form {
       }
     }
 
-    .form-control:focus {
-      &,
-      &:invalid,
-      &:invalid:required {
-        border-color: $border-dark-grey;
-        border-bottom-width: 1px;
-      }
-      /* remove the border of the element under the one with the focus */
-      & + label + .entypo + .form-control {
-        border-top-width: 0px;
-      }
-    }
-
     .entypo {
       position: absolute;
       top: 10px;
@@ -113,7 +100,7 @@ form.block-form {
       top: 130px;
     }
 
-    input:-moz-placeholder { text-transform: uppercase; }
+    input::-moz-placeholder { text-transform: uppercase; }
     input::-webkit-input-placeholder { text-transform: uppercase; }
     input:-ms-input-placeholder { text-transform: uppercase; }
   }

app/assets/stylesheets/new_styles/_registration.scss

@@ -32,39 +32,25 @@
   }
 
   form {
-    .form-control:last-of-type {
+    max-width: 400px;
-      border-bottom-left-radius: 0px;
+
-      border-bottom-right-radius: 0px;
+    .captcha_img {
+      position: absolute;
+      left: 10px;
+      width: 120px;
+      top: 169px;
     }
 
-    .captcha {
+    #user_captcha {
-      border: 1px solid $border-grey;
+      font-size: 16px;
-      border-top: 0px;
+      height: 40px;
+      padding: 10px 10px 10px 130px;
+      line-height: 20px;
+      box-sizing: border-box;
+      width: 100%;
+      border-bottom: 1px solid $border-grey;
       border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
-
-      .captcha_img {
-        float: left;
-        margin-top: 3px;
-      }
-
-      #user_captcha {
-        float: right;
-        width: 69%;
-        border: 0px;
-        border-radius: 0px;
-        border-bottom-right-radius: 5px;
-        border-left: 1px solid $border-grey;
-
-        &:focus {
-          border: solid 1px $border-dark-grey;
-          /* Sorry about this dirty hack, the only way I found to correctly display the grey border */
-          position: relative;
-          top: -1px;
-          margin-right: -1px;
-          margin-bottom: -2px;
-        }
-      }
     }
 
     #terms > a {

app/views/registrations/new.haml

@@ -8,7 +8,7 @@
           %h3#diaspora-hearts
             = t('.diaspora')
         .span5
-          .pull-right
+          .text-center
             %h2#pod-name
               = AppConfig.settings.pod_name
             = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
@@ -34,9 +34,7 @@
                 = f.password_field :password_confirmation, class: "input-block-level form-control", placeholder: t('.password_confirmation'), title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
 
                 - if AppConfig.settings.captcha.enable?
-                  .captcha
+                  = show_simple_captcha :object => 'user', :code_type => 'numeric'
-                    = show_simple_captcha(object: 'user', code_type: 'numeric')
-                    %div{style: "clear:both;"}
 
                 = invite_hidden_tag(invite)