Skip to content

Instantly share code, notes, and snippets.

@ticky

ticky/dabblet.css

Created June 19, 2013 05:29
Show Gist options
  • Save ticky/5811874 to your computer and use it in GitHub Desktop.
Save ticky/5811874 to your computer and use it in GitHub Desktop.
Download ZIP
Status Icons
Raw
dabblet.css
/**
* Status Icons
*/
div {
font-size: 15px;
}
circle.active {
fill: rgba(124,198,0,0.7);
}
circle.inactive {
fill: rgba(204,204,204,0.7);
}
circle.failed {
fill: rgba(238,0,0,0.7);
}
circle.encoding {
fill: rgba(235,162,32,0.7);
}
circle.missing {
stroke: rgba(43,173,243, 0.7);
stroke-width: 10%;
fill: transparent;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> --><div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em">
<circle class="active" cx="50%" cy="50%" r="45%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em">
<circle class="inactive" cx="50%" cy="50%" r="45%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em">
<circle class="failed" cx="50%" cy="50%" r="45%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em">
<circle class="encoding" cx="50%" cy="50%" r="45%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em">
<circle class="missing" cx="50%" cy="50%" r="40%"/>
</svg>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment