Tweak CSS for form controls in focused state.

static/css/bootstrap.css

@@ -1742,15 +1742,12 @@ output {
   border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
 .form-control:focus {
   border-color: #66afe9;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
 }
 .form-control::-moz-placeholder {
   color: #999999;
@@ -2011,8 +2008,8 @@ select[multiple].input-lg {
 }
 .has-success .form-control:focus {
   border-color: #2b542c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(60, 118, 61, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(60, 118, 61, 0.2);
 }
 .has-success .input-group-addon {
   color: #3c763d;
@@ -2041,8 +2038,8 @@ select[multiple].input-lg {
 }
 .has-warning .form-control:focus {
   border-color: #66512c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(138, 109, 59, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(138, 109, 59, 0.2);
 }
 .has-warning .input-group-addon {
   color: #8a6d3b;
@@ -2071,8 +2068,8 @@ select[multiple].input-lg {
 }
 .has-error .form-control:focus {
   border-color: #843534;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(169, 68, 66, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(169, 68, 66, 0.2);
 }
 .has-error .input-group-addon {
   color: #a94442;

stuff/bootstrap/forms.less

@@ -124,7 +124,6 @@ output {
   border: 1px solid @input-border;
   border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
   // Customize the `:focus` state to imitate native WebKit styles.
   .form-control-focus();

stuff/bootstrap/mixins/forms.less

@@ -22,8 +22,9 @@
     border-color: @border-color;
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
+      @color-rgba: rgba(red(@border-color), green(@border-color), blue(@border-color), .2);
       border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px @color-rgba;
       .box-shadow(@shadow);
     }
   }
@@ -53,11 +54,11 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 .form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .2);
   &:focus {
     border-color: @color;
     outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px @{color-rgba}");
   }
 }
 

templates/integrations/add_matrix.html

@@ -80,7 +80,7 @@
     <form method="post" class="form-horizontal">
         {% csrf_token %}
 
-        <div class="form-group {{ form.room_id.css_classes }}">
+        <div class="form-group {{ form.alias.css_classes }}">
             <label for="alias" class="col-sm-2 control-label">Room Alias or ID</label>
             <div class="col-sm-6">
                 <input

templates/integrations/add_opsgenie.html

@@ -66,7 +66,7 @@
 
     <form method="post" class="form-horizontal">
         {% csrf_token %}
-        <div class="form-group {{ form.value.css_classes }}">
+        <div class="form-group {{ form.key.css_classes }}">
             <label for="api-key" class="col-sm-2 control-label">API Key</label>
             <div class="col-sm-4">
                 <input