Skip to content

Instantly share code, notes, and snippets.

@briancavalier
Created August 27, 2010 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save briancavalier/554201 to your computer and use it in GitHub Desktop.
Save briancavalier/554201 to your computer and use it in GitHub Desktop.
/* All elements, when not "turned on", leave slight ghosting */
.element {
opacity: .1;
}
/* LED bars (specialization of element) that make up the digits */
/* Default theme is green, box-shadow glow, slightly rounded corners */
.bar {
background-color: #0f0;
border-radius: 4px;
-moz-border-radius: 4px;
position: absolute;
-webkit-box-shadow: 0 0 20px #0f0;
-moz-box-shadow: 0 0 20px #0f0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
}
/* Digits */
/* Light up the bars necessary to make a zero. Everything but the center bar.
top, bottom, top-left, bottom-left, top-right, bottom-right */
.d0 .center.top, .d0 .center.bottom, .d0 .left.top, .d0 .left.bottom, .d0 .right.top, .d0 .right.bottom {
opacity: .9;
}
/* The first zero in 12 hour mode should always be turned off,
i.e. don't show leading zeros in 12 hour mode, but _do_ show them in 24 hour mode.
Instead of doing a JS computation for this, it can be done here */
.hr12 .d0:first-child .bar {
opacity: .1 !important;
}
/* Light up the bars necessary to make a one. Just the top-right and bottom-right */
.d1 .right.top, .d1 .right.bottom {
opacity: .9;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment