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