Start designing the card details pane

Implement a dynamic overflow to focus sight on the pane.

client/components/lists/main.styl

@@ -8,7 +8,7 @@
   position: relative
   // Even if this background color is the same as the body we can't leave it
   // transparent, because that won't work during a list drag.
-  background: darken(white, 10%)
+  background: darken(white, 13%)
   height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
@@ -17,7 +17,7 @@
     margin-left: 5px
     border-left: none
 
-  .card-detail + &
+  .card-details + &
     border-left: none
 
   &.ui-sortable-helper
@@ -32,13 +32,15 @@
     box-shadow: none
     height: 100px
 
-  &.list-composer
+  &.list-composer, & list-composer
     padding: 17px
 
+    form
+      margin-top: -5px
+
     .list-name-input
-      background: rgba(0, 0, 0, .05)
+      background: rgba(255, 255, 255, .4)
       border-color: #aaa
-      box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
       display: block
       margin: 0
       transition: margin 85ms ease-in,
@@ -52,14 +54,9 @@
       overflow: hidden
       margin: 4px 0 0
 
-      input[type=submit]
-        margin-top: 0
-        min-height: 30px
-        height: 30px
-
 .list-header
   flex: 0 0 auto
-  margin: 20px 15px 4px
+  margin: 20px 12px 4px
   position: relative
   min-height: 20px
 
@@ -76,17 +73,9 @@
     word-wrap: break-word
 
   .list-header-menu-icon
-    background-clip: content-box
-    background-origin: content-box
-    // padding: 6px 8px
     position: absolute
     top: 0
     right: 0
-    color: #a6a6a6
-
-  .list-header-num-cards
-    color: #8c8c8c
-    margin: 0
 
 .list-body
   flex: 1
@@ -119,9 +108,3 @@
       background: #fafafa
       color: #222
       box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@keyframes fadeIn
-  from
-    opacity: 0
-  to
-    opacity: 1