uhr/webcomponent/template.js

export const template = document.createElement('template');
template.innerHTML = `
<style>
/* BASE */
@font-face {
    font-family: 'Clockfont';
    src: url('../legacy/resources/uhr.woff') format('woff');
}

* {
    font-family: 'Clockfont', sans-serif;
}

#clock {
    position: relative;
    height: 100%;
    margin: 0;
    transition: background-color 0.5s;
    width: 100%;
}

#reflection {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
    display: block;
    margin: 0.15em;
}

#letterarea {
    display: block;
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 12%;
    right: 12%;
    overflow: hidden;
    font-size: 200%;
}

.item {
    transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
}

.dot {
    position: absolute;
    display: block;
    height: 0;
    width: 0;
    border: 0.2em solid;
    border-radius: 1em;
}

.dot.active {
    border-color: #eee;
    box-shadow: 0 0 0.2em #eee;
}

.dot1 {
    top: 3.75%;
    left: 3.75%;
}

.dot2 {
    top: 3.75%;
    right: 3.75%;
}

.dot3 {
    bottom: 3.75%;
    right: 3.75%;
}

.dot4 {
    bottom: 3.75%;
    left: 3.75%;
}

.letter {
    height: 10%;
    width: 9.0909%;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: center;
    line-height: 160%;
}

.letter.active {
    color: #eee;
    text-shadow: 0 0 0.2em #eee;
}
/* BLACK */
#clock.black {
    background-color: #111;
}

.black .onoffswitch-inner:before {
    background-color: #111;
}

#clock.black .dot:not(.active) {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
}

#clock.black .letter:not(.active) {
    color: rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
}

</style>
<div id="clock" class="black">
    <span class="item dot dot1"></span>
    <span class="item dot dot2"></span>
    <span class="item dot dot3"></span>
    <span class="item dot dot4"></span>
    <div id="letterarea"></div>
    <div id="reflection"></div>
</div>
<pre id="log"></pre>
`;