Autoprefixed css.
This commit is contained in:
Hardmath123
parent
4d16d6b268
commit
5dee692345
2 changed files with 218 additions and 207 deletions
|
|
@ -41,6 +41,8 @@
|
|||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#project_id").keyup(function(){
|
||||
// Eventually, this will xhr to /projects/{{this.value}}/ and
|
||||
// change color based on whether the response is 404 or 200.
|
||||
if (isNaN(this.value)) {
|
||||
this.style.backgroundColor = "#FDD";
|
||||
} else {
|
||||
|
|
|
|||
423
player.css
423
player.css
|
|
@ -1,294 +1,303 @@
|
|||
body {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
font-family: sans-serif;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* Wrapper wraps the entire player, and the text below and above. Ideally,
|
||||
all CSS selectors would be descendants of #wrapper so that the player
|
||||
is embeddable.
|
||||
*/
|
||||
|
||||
#wrapper {
|
||||
width: 540px;
|
||||
height: 420px;
|
||||
margin:auto;
|
||||
width: 540px;
|
||||
height: 420px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Container is the Stage */
|
||||
|
||||
#container {
|
||||
border: none;
|
||||
cursor: default;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
/* Before, we accomplished this with e.preventDefault
|
||||
border: none;
|
||||
cursor: default;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
/* Before, we accomplished this with e.preventDefault
|
||||
* on the context div. But, we'd like to use those click events
|
||||
* for some things like reporter sliders.
|
||||
*/
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* The pane over a project with the green flag on startup. */
|
||||
|
||||
#greenSlide {
|
||||
position: absolute;
|
||||
float: left;
|
||||
z-index: 500; /* Hmm, will this break after the 501st sprite? */
|
||||
margin-left: 30px;
|
||||
position: absolute;
|
||||
float: left;
|
||||
z-index: 500;
|
||||
/* Hmm, will this break after the 501st sprite? */
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
/* The green flag icon. */
|
||||
|
||||
#greenSlideFg {
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
width: 278px;
|
||||
height: 218px;
|
||||
padding-top: 142px;
|
||||
padding-left: 202px;;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
width: 278px;
|
||||
height: 218px;
|
||||
padding-top: 142px;
|
||||
padding-left: 202px;
|
||||
}
|
||||
|
||||
/* iPad arrow key frame */
|
||||
|
||||
/* This is the frame around the stage with various buttons. */
|
||||
|
||||
#ui-top {
|
||||
width: 540px;
|
||||
height: 30px;
|
||||
clear: both;
|
||||
background-color: #eee;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
background-color: #eee;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
||||
color:#ccc;
|
||||
padding-top: 10px;
|
||||
width: 540px;
|
||||
height: 30px;
|
||||
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;
|
||||
text-align: right;
|
||||
width: 480px;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/* Reporter styles */
|
||||
|
||||
.reporter-normal {
|
||||
display: inline-block;
|
||||
padding: 2px 5px 2px 5px;
|
||||
|
||||
background-color: rgb(193, 196, 199);
|
||||
border: 1px solid rgb(130, 126, 126);
|
||||
border-radius: 4px;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 2px 5px 2px 5px;
|
||||
background-color: rgb(193, 196, 199);
|
||||
border: 1px solid rgb(130, 126, 126);
|
||||
border-radius: 4px;
|
||||
font-family: sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.reporter-inset {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 1px;
|
||||
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: inset 0 0 3px #fff;
|
||||
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 1px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 0 3px #fff;
|
||||
box-shadow: inset 0 0 3px #fff;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reporter-large {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
padding: 2px 5px 1px 5px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset,
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
padding: 2px 5px 1px 5px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset,
|
||||
0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
position: absolute;
|
||||
box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset,
|
||||
0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
|
||||
font-family: sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Say/think bubble styles */
|
||||
|
||||
.bubble-container {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
max-width: 120px;
|
||||
min-width: 40px;
|
||||
padding: 6px 11px 6px 11px;
|
||||
|
||||
border: 3px solid rgb(160, 160, 160);
|
||||
border-radius: 10px;
|
||||
|
||||
background: #fff;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
min-width: 40px;
|
||||
padding: 6px 11px 6px 11px;
|
||||
border: 3px solid rgb(160, 160, 160);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bubble-say {
|
||||
position: absolute;
|
||||
|
||||
margin-top: -3px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
height: 18px;
|
||||
|
||||
background: url(img/say-bottom.png) transparent no-repeat;
|
||||
position: absolute;
|
||||
margin-top: -3px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
height: 18px;
|
||||
background: url(img/say-bottom.png) transparent no-repeat;
|
||||
}
|
||||
|
||||
.bubble-think {
|
||||
position: absolute;
|
||||
|
||||
margin-top: 0px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
height: 19px;
|
||||
|
||||
background: url(img/think-bottom.png) transparent no-repeat;
|
||||
position: absolute;
|
||||
margin-top: 0px;
|
||||
margin-left: 8px;
|
||||
width: 44px;
|
||||
height: 19px;
|
||||
background: url(img/think-bottom.png) transparent no-repeat;
|
||||
}
|
||||
|
||||
#info {
|
||||
float:left;
|
||||
margin-left: 30px;
|
||||
height:24px;
|
||||
padding:3px;
|
||||
color:#aaa;
|
||||
font-size:12px;
|
||||
float: left;
|
||||
margin-left: 30px;
|
||||
height: 24px;
|
||||
padding: 3px;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
|
||||
button {
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
font-family: sans-serif;
|
||||
width:24px;
|
||||
padding: 3px;
|
||||
margin:3px;
|
||||
margin-top:0px;
|
||||
height: 24px;
|
||||
background: -webkit-linear-gradient(#ddd, #ccc);
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
font-family: sans-serif;
|
||||
width: 24px;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
margin-top: 0px;
|
||||
height: 24px;
|
||||
background: -webkit-gradient(linear, top left, bottom left, from(#ddd), to(#ccc));
|
||||
background: -webkit-linear-gradient(#ddd, #ccc);
|
||||
background: 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;
|
||||
float:right;
|
||||
}
|
||||
#trigger_green_flag {
|
||||
color:#050;
|
||||
background-color: #ccc;
|
||||
background: -webkit-gradient(linear, top left, bottom left, from(#ccc), to(#bbb));
|
||||
background: -webkit-linear-gradient(#ccc, #bbb);
|
||||
background: linear-gradient(#ccc, #bbb);
|
||||
}
|
||||
|
||||
#trigger_green_flag,
|
||||
#trigger_stop {
|
||||
color:#F33;
|
||||
margin-right: 30px;
|
||||
margin-left:0px;
|
||||
padding-top: 0px;
|
||||
font-size: 20px;
|
||||
width: 24px;
|
||||
margin: 3px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#trigger_green_flag {
|
||||
color: #050;
|
||||
}
|
||||
|
||||
#trigger_stop {
|
||||
color: #F33;
|
||||
margin-right: 30px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#clearer {
|
||||
clear:both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
display: inline-block;
|
||||
border-style: none;
|
||||
border-radius: 4px;
|
||||
font-family: sans-serif;
|
||||
background-color: #ddd;
|
||||
font-size: 14px;
|
||||
padding:3px;
|
||||
height:18px;
|
||||
margin:3px;
|
||||
width:100px;
|
||||
box-shadow: 0px 0px 5px inset black;
|
||||
-webkit-box-shadow: 0px 0px 5px inset black;
|
||||
display: inline-block;
|
||||
border-style: none;
|
||||
border-radius: 4px;
|
||||
font-family: sans-serif;
|
||||
background-color: #ddd;
|
||||
font-size: 14px;
|
||||
padding: 3px;
|
||||
height: 18px;
|
||||
margin: 3px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
outline:none;
|
||||
background-color: #ccc;
|
||||
outline: none;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
#project_id {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#address-hint {
|
||||
font-size:12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#go_project {
|
||||
display: table-cell;
|
||||
height:24px;
|
||||
padding:0px;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 0px;
|
||||
display: table-cell;
|
||||
height: 24px;
|
||||
padding: 0px;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
Reference in a new issue