emile
Version:
no-thrills stand-alone CSS animation JavaScript framework
79 lines • 1.24 kB
CSS
body {
width: 650px;
margin: 20px auto;
font: 300 16px 'helvetica neue', helvetica, arial;
text-shadow: 0 2px 2px #ccc;
}
h1 {
font-size: 30px;
font-weight: 300;
}
ol,li {
list-style: none;
}
ol {
-moz-box-shadow: 0 0 5px #ccc;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 5px #ccc;
-webkit-border-radius: 5px;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
padding: 10px;
}
li {
margin: 3px 5px;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
overflow: hidden;
}
ol > li {
opacity: 0;
cursor: pointer;
}
li span {
color: #aaa;
text-align: right;
display: inline-block;
float: right;
}
li.fail span {
color: red;
}
li.pass span {
color: green;
}
li.fail {
background-color: #eed5d2;
}
li.pass {
background-color: #bdfcc9;
}
li.pass, li.fail {
-webkit-transition: opacity .5s linear;
opacity: 1;
}
li ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
li.pass ul.show {
-webkit-box-shadow: 0 0 5px green;
}
li.fail ul.show {
-webkit-box-shadow: 0 0 5px red;
}
li ul.show {
height: auto;
padding: 5px;
-webkit-border-radius: 5px;
margin: 5px;
}
li ul li {
padding: 0;
margin: 2px 0;
list-style: none;
}