Put sepia effect on skip

butterfly/static/coffees/term.coffee

@@ -17,9 +17,13 @@
 
 
 # This has been forked from term.js
+#
 #   Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 #   https://github.com/chjj/term.js
+#
+#
 # which has been forked from jslinux
+#
 #   Copyright (c) 2011 Fabrice Bellard
 #   http://bellard.org/jslinux/
 
@@ -1089,10 +1093,12 @@ class Terminal
         # May be redundant with keyPrefix
         if ev.altKey and ev.keyCode is 90 and not @skipNextKey
             @skipNextKey = true
+            @element.classList.add('skip')
             return cancel(ev)
 
         if @skipNextKey
             @skipNextKey = false
+            @element.classList.remove('skip')
             return true
 
         switch ev.keyCode

butterfly/static/javascripts/main.js

@@ -1188,10 +1188,12 @@ Terminal = (function() {
     }
     if (ev.altKey && ev.keyCode === 90 && !this.skipNextKey) {
       this.skipNextKey = true;
+      this.element.classList.add('skip');
       return cancel(ev);
     }
     if (this.skipNextKey) {
       this.skipNextKey = false;
+      this.element.classList.remove('skip');
       return true;
     }
     switch (ev.keyCode) {

butterfly/static/sass/main.sass

@@ -37,11 +37,14 @@ body
       background-color: $bg
       color: $fg
       text-shadow: 0 0 $shadow rgba($fg, $shadow-alpha)
-      transition: 50ms
+      transition: 200ms
 
       &.bell
         -webkit-filter: blur(2px)
 
+      &.skip
+        -webkit-filter: sepia(1)
+
       div
         overflow: visible
 
@@ -54,11 +57,9 @@ body
 
 ::selection
   background-color: black
-  box-shadow: 0 0 10px inset white
 
 ::-moz-selection
   background-color: black
-  box-shadow: 0 0 10px inset white
 
 .cursor.reverse-video
   box-shadow: 0 0 10px $fg
@@ -82,7 +83,6 @@ body
 
 .blur .cursor.reverse-video
   background: none
-  border: 1px solid $fg
 
 =termcolor($i, $color)
   .bg-color-#{$i}

butterfly/static/stylesheets/main.css

@@ -79,74 +79,75 @@ body main .terminal {
   background-color: #110f13;
   color: #f4ead5;
   text-shadow: 0 0 6px rgba(244, 234, 213, 0.5);
-  transition: 50ms;
+  transition: 200ms;
 }
 /* line 42, ../sass/main.sass */
 body main .terminal.bell {
   -webkit-filter: blur(2px);
 }
 /* line 45, ../sass/main.sass */
+body main .terminal.skip {
+  -webkit-filter: sepia(1);
+}
+/* line 48, ../sass/main.sass */
 body main .terminal div {
   overflow: visible;
 }
-/* line 48, ../sass/main.sass */
+/* line 51, ../sass/main.sass */
 body main .terminal div .inline-html {
   white-space: normal;
 }
 
-/* line 52, ../sass/main.sass */
+/* line 55, ../sass/main.sass */
 .focus .cursor {
   transition: 300ms;
 }
 
-/* line 55, ../sass/main.sass */
+/* line 58, ../sass/main.sass */
 ::selection {
   background-color: black;
-  box-shadow: 0 0 10px inset white;
 }
 
-/* line 59, ../sass/main.sass */
+/* line 61, ../sass/main.sass */
 ::-moz-selection {
   background-color: black;
-  box-shadow: 0 0 10px inset white;
 }
 
-/* line 63, ../sass/main.sass */
+/* line 64, ../sass/main.sass */
 .cursor.reverse-video {
   box-shadow: 0 0 10px #f4ead5;
 }
 
 /* Terminal styles */
-/* line 67, ../sass/main.sass */
+/* line 68, ../sass/main.sass */
 .bold {
   font-weight: bold;
 }
 
-/* line 70, ../sass/main.sass */
+/* line 71, ../sass/main.sass */
 .underline {
   text-decoration: underline;
 }
 
-/* line 73, ../sass/main.sass */
+/* line 74, ../sass/main.sass */
 .blink {
   text-decoration: blink;
 }
 
-/* line 76, ../sass/main.sass */
+/* line 77, ../sass/main.sass */
 .invisible {
   visibility: hidden;
 }
 
-/* line 79, ../sass/main.sass */
+/* line 80, ../sass/main.sass */
 .reverse-video {
   color: #110f13;
   background-color: #f4ead5;
 }
 
-/* line 83, ../sass/main.sass */
+/* line 84, ../sass/main.sass */
 .blur .cursor.reverse-video {
   background: none;
-  border: 1px solid #f4ead5;
 }
 
 /* line 88, ../sass/main.sass */