remove browser-solidity.css

assets/css/browser-solidity.css

@@ -1,72 +0,0 @@
-.sol.success,
-.sol.error,
-.sol.warning {
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-    background-color: hsla(0, 82%, 82%, 0.1);
-    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.sol.warning {
-    background-color: hsla(59, 56%, 78%, 0.5);
-    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
-}
-
-.sol.success {
-    background-color: hsla(141, 58%, 95%, 1);
-    border: .2em dotted hsla(141, 40%, 48%, 1);
-}
-
-.highlightreference {
-    position:absolute;
-    z-index:20;
-    background-color: lightgrey;
-    opacity: 0.7
-}
-
-.highlightreferenceline {
-    position:absolute;
-    z-index:20;
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    opacity: 0.7
-}
-
-.highlightcode {
-    position:absolute;
-    z-index:20;
-    background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.ace_gutter-cell.ace_breakpoint{
-    background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}

src/app/editor/editor.js

@@ -20,6 +20,28 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
         background-color: rgba(225, 229, 251, 0.5);
+    }  
+    .ace_gutter-cell.ace_breakpoint{
+      background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+    }
+    .highlightreference {
+      position:absolute;
+      z-index:20;
+      background-color: lightgrey;
+      opacity: 0.7
+    }
+
+    .highlightreferenceline {
+      position:absolute;
+      z-index:20;
+      background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
+      opacity: 0.7
+    }
+
+    .highlightcode {
+      position:absolute;
+      z-index:20;
+      background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
     }
   </style>
 `)

src/app/ui/renderer.js

@@ -1,9 +1,59 @@
 'use strict'
 
 var $ = require('jquery')
-
+var yo = require('yo-yo')
 var utils = require('../../lib/utils')
 
+var css = yo`<style>
+.sol.success,
+.sol.error,
+.sol.warning {
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.sol.success pre,
+.sol.error pre,
+.sol.warning pre {
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.sol.success .close,
+.sol.error .close,
+.sol.warning .close {
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.sol.error {
+    background-color: hsla(0, 82%, 82%, 0.1);
+    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+}
+
+.sol.warning {
+    background-color: hsla(59, 56%, 78%, 0.5);
+    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
+}
+
+.sol.success {
+    background-color: hsla(141, 58%, 95%, 1);
+    border: .2em dotted hsla(141, 40%, 48%, 1);
+}</style>`
+
 /**
  * After refactor, the renderer is only used to render error/warning
  * TODO: This don't need to be an object anymore. Simplify and just export the renderError function.
@@ -11,6 +61,9 @@ var utils = require('../../lib/utils')
  */
 function Renderer (appAPI) {
   this.appAPI = appAPI
+  if (document && document.head) {
+    document.head.appendChild(css)
+  }
 }
 
 Renderer.prototype.error = function (message, container, options) {