First Initial

wwwroot/BackendScript/assets/dropzone/css/stylus/dropzone.styl

@@ -0,0 +1,152 @@
+@import "nib"
+@import "basic"
+
+@keyframes loading
+  from
+    background-position: 0 -400px
+  to
+    background-position: -7px -400px
+
+.dropzone
+  border 1px solid rgba(0, 0, 0, 0.03)
+  min-height 360px
+  border-radius 3px
+  background rgba(0, 0, 0, 0.03)
+  padding 23px
+
+  .default.message
+    opacity 1
+    transition opacity 0.3s ease-in-out
+    
+    image "../images/spritemap.png" 428px 406px
+    background-repeat no-repeat
+    background-position 0 0
+
+    position absolute
+    width 428px
+    height 123px
+    margin-left -(@width / 2)
+    margin-top -(@height / 2)
+    top 50%
+    left 50%
+    span
+      display none
+
+  &.square
+    .default.message
+      background-position 0 -123px
+      width 268px
+      margin-left -(@width / 2)
+      height 174px
+      margin-top -(@height / 2)
+
+  &.drag-hover
+    .message
+      opacity 0.15
+
+  &.started
+    .message
+      display block
+      opacity 0 // Rather fade out nicely
+
+
+.dropzone
+.dropzone-previews
+
+  .preview
+    box-shadow 1px 1px 4px rgba(0, 0, 0, 0.16)
+    font-size 14px
+
+
+    .details
+      img
+        width 100px
+        height 100px
+
+      // Not implemented yet. This is the CSS definition of the file
+      // content as text.
+      // .content
+      //   font-size 3px
+      //   white-space pre
+      //   position absolute
+      //   top 5px
+      //   left 12px
+      //   right 19px
+      //   bottom 5px
+      //   overflow hidden
+      //   line-height 100%
+      //   cursor default
+      //   word-wrap break-word
+
+    &.image-preview
+      &:hover
+        .details
+          img
+            display block
+            opacity 0.1
+
+    &.success
+      .success-mark
+        opacity 1
+    &.error
+      .error-mark
+        opacity 1
+      .progress .upload
+        background #EE1E2D
+
+    .error-mark
+    .success-mark
+      display block
+      opacity 0 // Fade in / out
+      transition opacity 0.4s ease-in-out
+      image "../images/spritemap.png" 428px 406px
+      background-repeat no-repeat
+
+      span
+        display none
+    .error-mark
+      background-position -268px -123px
+    .success-mark
+      background-position -268px -163px
+
+
+
+    .progress
+      .upload
+        animation loading 0.4s linear infinite
+        transition width 0.3s ease-in-out
+        border-radius 2px
+        position absolute
+        top 0
+        left 0
+        width 0%
+        height 100%
+        
+        image "../images/spritemap.png" 428px 406px
+        background-repeat repeat-x
+        background-position 0px -400px
+
+
+    &.success
+      .progress
+        display block
+        opacity 0
+        transition opacity 0.4s ease-in-out
+
+
+    // Disabled for now until I find a better way to cope with long filenames
+    // .filename
+    //   span
+    //     overflow ellipsis
+
+    .error-message
+      display block
+      opacity 0 // Rather fade in / out
+      transition opacity 0.3s ease-in-out
+
+    &:hover.error
+      .error-message
+        opacity 1
+
+
+