Design updates

e.g. no more hover stuff (not good for mobile)

web/democode/perleditor.css

@@ -22,7 +22,7 @@ pre {
 }
 
 .codewithfn {
-	margin-top: 0.1em;
+	margin-top: 0.4em;
 }
 .fnfuncs {
 	cursor: default;
@@ -35,11 +35,10 @@ pre {
 	cursor: auto;
 }
 .filefuncs {
-	display: none;
-	margin-left: 1em;
-}
-.fnfuncs:hover .filefuncs {
 	display: inline-block;
+	padding-top: 2px;
+	position: absolute;
+	right: 0.2em;
 }
 .fakelink {
 	color: darkblue;
@@ -54,22 +53,11 @@ pre {
 #misctools {
 	display: inline-block;
 	border: 1px solid grey;
-	padding: 1px 0.5em;
-	margin-top: 1px;
-	margin-right: 3px;
-	color: grey;
-}
-#misctools_reveal {
-	display: none;
-}
-#misctools:hover {
-	color: inherit;
-}
-#misctools:hover #misctools_reveal {
-	display: inline-block;
+	padding: 1px 0.8em 1px 0.5em;
+	margin-top: 0.5em;
 }
 #runnerstate {
-	margin-top: 0.1em;
+	margin-top: 0.2em;
 	margin-bottom: 0.3em;
 }
 #runnererrors {

web/democode/perleditor.html

@@ -206,7 +206,7 @@ function makeCodeWithFn (fn,targ,ro,isscript) {
 			$('<span/>',{class:"fakelink",text:"Cancel"})
 				.click(function () { conf.hide(); }),
 		);
-	$('<span/>',{class:"fakelink",text:"delete"})
+	$('<span/>',{class:"fakelink",text:"Delete"})
 		.appendTo(filefuncs).click(function () {
 			conf.show();
 		});
@@ -410,22 +410,8 @@ $(function () {
 	<input type="text" id="argv" class="code" value='perl' />
 </div>
 
-<div class="text">
-	<textarea id="pageurl" style="display:none;"></textarea>
-	<div id="misctools">
-		Tools
-		<div id="misctools_reveal">
-			&nbsp;
-			<span id="addscript" class="fakelink" style="display:none;">Add Script</span>
-			&nbsp;
-			<span id="addinput" class="fakelink">Add Input File</span>
-			&nbsp;
-			<span id="addoutput" class="fakelink">Add Output File</span>
-			&nbsp;
-			<span id="copyurl" class="fakelink">Copy Frame URL</span>
-		</div>
-	</div>
-	<span id="runnerstate">Loading...</span>
+<div id="runnerstate" class="text">
+	Loading...
 </div>
 
 <div id="runnererrors" style="display:none;">
@@ -444,5 +430,21 @@ $(function () {
 
 <div id="outputhere" style="display:none;"></div>
 
+<div class="text">
+	<textarea id="pageurl" style="display:none;"></textarea>
+	<div id="misctools">
+		Tools
+		&nbsp;
+		<span id="addscript" class="fakelink" style="display:none;">Add Script</span>
+		&nbsp;
+		<span id="addinput" class="fakelink">Add Input File</span>
+		&nbsp;
+		<span id="addoutput" class="fakelink">Add Output File</span>
+		&nbsp;
+		<span id="copyurl" class="fakelink">Copy Frame URL</span>
+		</div>
+	</div>
+</div>
+
 </body>
 </html>