Merge pull request #93 from dustinrb/result-blocks

Result block stylesheet improvements

Author: pfitzseb

styles/ink.less

@@ -66,43 +66,19 @@ atom-text-editor::shadow {
   }
 }
 
-// TODO: more CSS sharing
-
-.ink.under {
-  font-family: @font-family;
-  color: @text-color;
-
-  cursor: default;
-
-  &.error {
-    color: @text-color-error;
-  }
-
-  background-color: @inset-panel-background-color;
-
-  border-top: 1px solid @syntax-wrap-guide-color;
-  border-bottom: 1px solid @syntax-wrap-guide-color;
-  padding-left: 5px;
-}
-
-
-.ink.inline {
+.result-mixin() {
   color: @syntax-text-color;
-  position: relative;
-  left: 1em;
-
   pointer-events: auto;
 
   &.error {
     color: @text-color-error;
     border-left: 2px solid @background-color-error;
   }
 
-  background: @syntax-background-color;
   border-left: 2px solid @background-color-info;
   border-right: 2px solid contrast(@syntax-background-color,
-                             darken(@syntax-background-color, 4%),
-                             lighten(@syntax-background-color, 4%));
+                                   darken(@syntax-background-color, 4%),
+                                   lighten(@syntax-background-color, 4%));
 
   border-radius: 3px;
 
@@ -111,14 +87,18 @@ atom-text-editor::shadow {
   opacity: 1;
   cursor: default;
 
-  max-width: 400px;
   overflow: hidden;
   white-space: pre;
 
   * {
     vertical-align: top;
   }
 
+  a {
+    color: @syntax-text-color;
+    opacity: 0.65;
+  }
+
   p {
     margin: 0;
     padding: 0;
@@ -157,9 +137,7 @@ atom-text-editor::shadow {
       opacity: 1;
     }
   }
-  > .tree > .body {
-    max-height: 250px;
-  }
+
 
   .editor.editor-colors {
     color: @syntax-text-color;
@@ -170,6 +148,29 @@ atom-text-editor::shadow {
   }
 }
 
+.ink.inline {
+  .result-mixin;
+  background: @syntax-background-color;
+  position: relative;
+  left: 1em;
+  max-width: 400px;
+
+  > .tree > .body {
+    max-height: 250px;
+  }
+}
+
+.ink.under {
+  .result-mixin;
+  background: contrast(@syntax-background-color,
+                       darken(@syntax-background-color, 3%),
+                       lighten(@syntax-background-color, 3%));
+  font-size: 0.9em;
+  max-width: 100%;
+  white-space: pre-line;
+  padding: 0.5em 0.5em 0.5em 1em;
+}
+
 .ink.stepper {
   .ink.inline();
   max-width: initial;