alfa-clock

Polymer web component to display a clock.

use example:

   <link rel="import" href="alfa-clock.html">

    <style>
        alfa-clock {float: left;}
        alfa-clock.red{
            --seconds-color: red; 
            --ring-css: 6px solid red; 
            --hands-color: darkred; 
            --shadow-color: none; 
            --face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); 
        }
        alfa-clock.bigger{ --size: 400px; --brand-font: 2em Arial}
    </style>
    <alfa-clock></alfa-clock>
    <alfa-clock class="red" clock-brand="red clock"></alfa-clock>
    <alfa-clock class="bigger" clock-brand="bigger clock"></alfa-clock>

CSS API

variable	default	descr
--size:	250px;	clock diameter
--seconds-color:	lime;	seconds hand color
--hands-color:	white;	other hands color
--shadow-color:	black;	other hands shadow
-ring-css:	2px solid silver;	css for a ring around the clock face
--brand-font:	1em Arial, Helvetica, sans-serif;	css font for a branding text on clock face
--brand-color:	grey;	NOTE: SVG filter will change this color
--face-filter:	none;	to color an SVG face

face-filter

The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS filter is applied.
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
Try to manipulate saturation and hue-rotate to achieve desired color. It is hard, but blame the CSS committee.

Examples of colors:

--face-filter: invert(1); /* black */
--face-filter: invert(.5) sepia(1) saturate(5) hue-rotate(60deg);  /* green */
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); /* red */

single page applications

This clock is based on CSS animations. When a page is loosing "focus" the CSS animation stops. When the page with clock is reopened, the clock resunmes animations and is late! To avoid this, run
this.$$('alfa-clock').start();
each time the containing page is reopened.