Unicode arrow glyphs

This commit is contained in:
Hardmath123 2013-11-02 16:32:58 -07:00
parent bcbfd4f718
commit 7866a108af
2 changed files with 49 additions and 15 deletions

View file

@ -46,19 +46,23 @@
<body>
<div id="wrapper">
<h1>Scratch HTML5 player</h1>
<div id="up">
<div id="info">Loading...</div>
<button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div>
<div id="up">&#x25B2;</div>
<div id="ui-top">
<div id="info">Loading...</div>
<button id="trigger_stop">&#9632;</button>
<button id="trigger_green_flag">&#9873;</button>
<div class="clearer"></div>
</div>
<div id="left">&nbsp;</div>
<div id="left">&#x25c0;</div>
<div id="overContainer">
<div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
<div id="container"></div>
</div>
<div id="right">&nbsp;</div>
<div id="down"><input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button></div>
<div id="right">&#x25b6;</div>
<div id="ui-bottom">
http://scratch.mit.edu/projects/ <input type="text" name="project_id" id="project_id" />
<button id='go_project'>&rarr;</button></div>
<div id="down">&#x25BC;</div>
<p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href="https://github.com/LLK/scratch-html5">on Github</a>.
</div>
</body>

View file

@ -41,14 +41,14 @@ body {
#greenSlide {
position: absolute;
float: left;
z-index: 500;
z-index: 500; /* Hmm, will this break after the 501st sprite? */
margin-left: 30px;
}
/* The green flag icon. */
#greenSlideFg {
background-color: #000;
opacity: 0.4;
opacity: 0.2;
width: 278px;
height: 218px;
padding-top: 142px;
@ -57,35 +57,60 @@ body {
/* iPad arrow key frame */
/* This is the frame around the stage with various buttons. */
/* up and down are 30 + 480 + 30 pixels wide */
/* left and right are 360 pixels high */
#ui-top {
width: 540px;
height: 30px;
clear: both;
background-color: #eee;
}
#up {
padding-top:10px;
width: 540px;
height: 30px;
clear: both;
background-color: #eee;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
color:#ccc;
}
#left {
float: left;
width: 30px;
height: 360px;
background-color: #eee;
line-height: 360px;
color:#ccc;
text-align: center;
}
#right {
float: left;
width: 30px;
height: 360px;
background-color: #eee;
line-height: 360px;
color:#ccc;
text-align: center;
}
#down {
padding-top:10px;
width: 540px;
height: 30px;
clear: both;
background-color: #eee;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color:#ccc;
}
#ui-bottom {
width:480px;
height: 30px;
background-color: #eee;
padding-left: 30px;
padding-right: 30px;
clear: both;
}
/* Reporter styles */
@ -190,18 +215,21 @@ body {
button {
background-color: #ddd;
border-radius: 3px;
border-style: none;
cursor: pointer;
border:none;
font-family: sans-serif;
width:30px;
width:24px;
padding: 3px;
margin:3px;
height: 24px;
background: -webkit-linear-gradient(#ddd, #ccc);
}
button:hover {
background-color: #ccc;
background: -webkit-linear-gradient(#ccc, #bbb);
}
#trigger_green_flag, #trigger_stop {
padding-top:0px;
font-size: 20px;
width:24px;
margin:3px;
@ -213,6 +241,7 @@ button:hover {
#trigger_stop {
color:#F33;
margin-right: 30px;
margin-left:0px;
}
#clearer {
clear:both;
@ -227,6 +256,7 @@ input[type=text] {
height:18px;
margin:3px;
margin-left: 30px;
width:100px;
}
input[type=text]:focus {
outline:none;