1
0
Fork 0
easejs/style.css

244 lines
3.9 KiB
CSS

/**
* ease.js color scheme
*
* Inspired by Tango Icon Theme
*/
html, body {
background-color: white;
margin: 0px 0px 1.5em 0px;
padding: 0;
font-family: arial, serif;
font-size: 16px;
}
#header {
position: relative;
background-color: #2e3436;
border-bottom: 2px solid #295301;
height: 150px;
color: #babdb6;
}
#header h1 {
display: inline-block;
margin: 0.5em 0px 0px 0.5em;
font-size: 4em;
}
#content {
position: relative;
background-color: white;
margin: 0px auto;
padding: 0.5em 1em 1em 1em;
width: 800px;
}
#menu {
border-bottom: 2px solid #b1dd87;
background-color: #4e9a06;
}
#menu ul {
padding: 0px;
height: 2.5em;
margin: 0px auto;
width: 800px;
}
#menu ul li {
list-style: none;
padding: 0px;
float: left;
line-height: 2em;
}
#menu a, #menu a:link {
display: inline-block;
padding: 0.25em 1em;
color: #041c40;
text-decoration: none;
font-weight: bold;
}
#menu a:hover {
background-color: #b1dd87;
}
p.copyright {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 1em;
background-color: #2e3436;
border-top: 2px solid #babdb6;
color: #babdb6;
font-size: 0.8em;
text-align: center;
}
p.copyright a, p.copyright a:link {
color: #babdb6;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0px #ffffff;
}
100% {
-webkit-box-shadow: 0 0 5px #ffffff;
}
}
.btn {
display: inline-block;
background-color: #f57900;
color: white;
font-weight: bold;
cursor: pointer;
text-align: center;
padding: 0.25em 0.5em;
border: 1px solid #ce5c00;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(245,123,0)),
color-stop(1, rgb(206,93,0))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(245,123,0) 0%,
rgb(206,93,0) 100%
);
}
.btn.green {
border: 1px solid #4e9a06;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(116,210,22)),
color-stop(1, rgb(139,226,52))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(116,210,22) 0%,
rgb(139,226,52) 100%
);
}
.btn.med {
width: 75px;
font-size: 1.5em;
text-shadow: black 2px 2px 4px;
}
.btn.large {
width: 100px;
font-size: 2em;
text-shadow: black 2px 2px 5px;
}
.glow {
-webkit-box-shadow: 0 0 5px #ffffff;
-moz-box-shadow: 0 0 5px #ffffff;
box-shadow: 0 0 5px #ffffff;
-webkit-transition: -webkit-box-shadow 0.25s linear;
-moz-transition-property: -moz-box-shadow;
-moz-transition-duration: 0.25s;
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
.glow:hover {
-webkit-box-shadow: 0 0 10px #ffffff;
-moz-box-shadow: 0 0 10px #ffffff;
box-shadow: 0 0 10px #ffffff;
}
#try {
display: block;
position: relative;
margin: 0px auto;
top: -2em;
}
#trybox {
position: relative;
border: 1px solid #eeeeec;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(186,189,182)),
color-stop(1, rgb(238,238,236))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(186,189,182) 0%,
rgb(238,238,236) 100%
);
padding: 1em;
}
#trybox h2 {
margin: 0px;
}
#trybox textarea {
width: 100%;
height: 20em;
}
#trybox #trybtns {
text-align: right;
}
#try-console {
width: 99%;
height: 10em;
font-size: 0.8em;
font-family: monospace;
}