ui *b0mb*

- more fun 3d animation & controls
- better responsive behavior

Author: khoerling

app/stylus/animations.styl

@@ -27,13 +27,11 @@ box-shadow(arg1, arg2, arg3)
 
 @keyframes move-down
   0%
-    transform translateY(-3) rotateZ(0deg)
-  15%
-    transform scale(1.1)
+    transform translateY(-5px)
   30%
-    transform rotateY(-3deg) translateY(3px)
+    transform translateY(4px) scale(1.15)
   100%
-    transform scale(.9) translateY(-2px)
+    transform scale(.9) translateY(-3px)
 
 @keyframes hover-around
   0%
@@ -52,12 +50,11 @@ box-shadow(arg1, arg2, arg3)
   animation-iteration-count infinite
   animation-direction alternate
 .move-down
-  perspective 300
+  perspective 100
   transformation-style preserve-3d
   animation-name move-down
-  animation-name hover-around
   animation-direction alternate
-  animation-duration 2s
+  animation-duration 1s
   animation-iteration-count infinite
 
 @keyframes tiny-grow

app/stylus/controls.styl

@@ -170,6 +170,7 @@ label.switch-control
     text-shadow 0px 1px 0 black
   else
     text-shadow 0px 1px 0 black,1px 1px 0 rgba(100,100,100,.5)
+  transform scale(1.02) translateY(-1px)
   transition none
 button:disabled:hover::before, input[type="submit"]:disabled:hover::before, input[type="button"]:disabled:hover::before
   background-image linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,.1) 80%)
@@ -190,7 +191,7 @@ button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled
   //border-bottom 1px solid dark_theme_color
   //border-right 1px solid dark_theme_color
   border-bottom-color #888
-  transform translateY(2px)
+  transform translateY(1px)
   border-radius 8px / 4px
   opacity .9
 // bottom "darken" fx
@@ -210,16 +211,15 @@ input[type="submit"]::after, button::after, .button::after
   background-image linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.25) 100%)
   opacity .75
   height 4px
-// XXX this is stealing clicks!  (...but it looks so good ;/)
 //- top gloss fx
-//input[type="submit"]:active::before, button:active::before, .button:active::before
-//  height 53%!important
-//  opacity .7
-//input[type="submit"]:hover::before, button:hover::before, .button:hover::before
-//  background-image linear-gradient(to bottom, rgba(255,255,255,.33) 0%, rgba(255,255,255,.28) 100%)
-//  opacity .9
-//  height 48%
-//  transition opacity .08s ease-out, height .02s ease-out
+input[type="submit"]:active::before, button:active::before, .button:active::before
+  height 53%!important
+  opacity .5!important
+input[type="submit"]:hover::before, button:hover::before, .button:hover::before
+  background-image linear-gradient(to bottom, rgba(255,255,255,.33) 0%, rgba(255,255,255,.28) 100%)
+  opacity .9
+  height 48%
+  transition opacity .08s ease-out, height .02s ease-out
 input[type="submit"]::before, button::before, .button::before
   position absolute
   content ''
@@ -263,6 +263,6 @@ input[type="submit"]::before, button::before, .button::before
     font-weight 500
   padding 6px 15px
   text-align center
-  border-radius 6px/5px
+  border-radius 3px
 //}}}
 // vim: fdm=marker

app/stylus/layout.styl

@@ -639,6 +639,7 @@ body.scrolled
      height header_height!important
   .onclick-scroll-top
     cursor n-resize
+    z-index 9
     width 22px
     height 22px
     opacity 1
@@ -692,7 +693,7 @@ body.collapsed
         border none
         background-color theme_color
         height 48px
-        width 28px
+        width 23px
         border-radius 3px
         top 34px
         left 8px

app/stylus/mutants-layout.styl

@@ -739,7 +739,7 @@ html.profile
     .forum
       .overview
         text-transform capitalize
-        margin 0 0 20px -5px
+        margin 0 0 20px 5px
         color #555
         font-size 1em
         border-bottom 1px solid #ddd

app/stylus/responsive.styl

@@ -10,7 +10,7 @@
     display none
   #main_content.main-content
     .forum
-      margin-left 0
+      margin-left 20px
   footer
     .post-container
       width 85%!important
@@ -27,7 +27,7 @@
     .main-content
       .forum, .search
         padding-left 20px!important
-        margin-left 0!important
+        margin-left 20px!important
         .social
           bottom 12px
           z-index 6

component/Sales.styl

@@ -307,9 +307,7 @@ body.scrolled
         position absolute
         top 55px
         left 170px
-        animation-duration 1s
-        animation-iteration-count infinite
-        animation-direction alternate
+        transition none
     &:hover
       letter-spacing 4px
       color #fff