mirror of
https://github.com/scratchfoundation/scratch-html5.git
synced 2024-11-28 10:05:55 -05:00
Unicode arrow glyphs
This commit is contained in:
parent
bcbfd4f718
commit
7866a108af
2 changed files with 49 additions and 15 deletions
20
index.html
20
index.html
|
@ -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">■</button>
|
||||
<button id="trigger_green_flag">⚑</button>
|
||||
<div class="clearer"></div>
|
||||
<div id="up">▲</div>
|
||||
<div id="ui-top">
|
||||
<div id="info">Loading...</div>
|
||||
<button id="trigger_stop">■</button>
|
||||
<button id="trigger_green_flag">⚑</button>
|
||||
<div class="clearer"></div>
|
||||
</div>
|
||||
<div id="left"> </div>
|
||||
<div id="left">◀</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"> </div>
|
||||
<div id="down"><input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button></div>
|
||||
<div id="right">▶</div>
|
||||
<div id="ui-bottom">
|
||||
http://scratch.mit.edu/projects/ <input type="text" name="project_id" id="project_id" />
|
||||
<button id='go_project'>→</button></div>
|
||||
<div id="down">▼</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>
|
||||
|
|
44
player.css
44
player.css
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue