CSS changes to demo and gui

This commit is contained in:
George Michael Brower 2011-01-25 00:43:32 -07:00
parent 9570c1de57
commit b7f2d4fa54
3 changed files with 27 additions and 33 deletions

View File

@ -1,37 +1,23 @@
pre { body {
padding: 10px;
border: 1px solid #ccc;
max-width: 500px;
} }
/* Pretty printing styles. Used with prettify.js. */ pre {
padding: 15px;
background-color: #222;
max-width: 500px;
font: 10px Monaco, monospace;
}
/* SPAN elements with the classes below are added by prettyprint. */ /* SPAN elements with the classes below are added by prettyprint. */
.str { color: #080; } .str { color: #0fa954; }
.kwd { color: #008; } .kwd { color: #e61d5f; }
.com { color: #800; } .com { color: #555; }
.typ { color: #606; } .typ { color: #606; }
.lit { color: #066; } .lit { color: #00aeff; }
.pun, .opn, .clo { color: #660; } .pun, .opn, .clo { color: #777; }
.pln { color: #000; } .pln { color: #ccc; }
.tag { color: #008; } .tag { color: #008; }
.atn { color: #606; } .atn { color: #606; }
.atv { color: #080; } .atv { color: #080; }
.dec { color: #606; } .dec { color: #606; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

View File

@ -2,7 +2,7 @@
<head> <head>
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" /> <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" /> <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
<!--<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>--> <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="gui.js"></script> <script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="controller.js"></script> <script type="text/javascript" src="controller.js"></script>
@ -26,7 +26,7 @@ var controllableObject =
window.onload = function() { window.onload = function() {
//prettyPrint(); prettyPrint();
GUI.start(); GUI.start();

12
gui.css
View File

@ -1,5 +1,4 @@
#guidat { #guidat {
font: 9px Monaco, monospace;
color: #fff; color: #fff;
position: fixed; position: fixed;
width: 320px; width: 320px;
@ -17,6 +16,11 @@
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
} }
#guidat,
#guidat input {
font: 9.5px Lucida Grande, sans-serif;
}
#guidat-controllers { #guidat-controllers {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
@ -32,6 +36,7 @@
text-align: center; text-align: center;
display: block; display: block;
padding: 5px; padding: 5px;
} }
#guidat-toggle:hover { #guidat-toggle:hover {
@ -56,6 +61,7 @@
outline: none; outline: none;
border: 0; border: 0;
padding: 4px; padding: 4px;
margin-top: 2px;
background-color: #222; background-color: #222;
} }
@ -70,6 +76,7 @@
.guidat-controller.string input { .guidat-controller.string input {
border: 0; border: 0;
color: #1ed36f; color: #1ed36f;
margin-right: 1px;
} }
.guidat-controller.boolean { .guidat-controller.boolean {
@ -92,8 +99,9 @@
} }
.guidat-controller.boolean input { #guidat .guidat-controller.boolean input {
margin-top: 6px; margin-top: 6px;
font-size: 20px;
} }
.guidat-controller:last-child { .guidat-controller:last-child {