kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Analog clock addition

Browse Source 
(cherry picked from commit e7e7c6494d2cbf739069f8d77278b9241ae6aeec)
This commit is contained in:
Ashley M. Kirchner 2016-07-08 18:45:48 -06:00
parent 5e94c8be7b
commit 8f02cb83ed
1 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
modules/default/clock/clock_styles.css Normal file
View File

@ -0,0 +1,74 @@
#analog {
}
#digital {
}
.clockCircle {
margin: 0 auto;
position: relative;
border-radius: 50%;
background-size: 100%;
}
.clockFace {
width: 100%;
height: 100%;
}
.clockFace:after {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
background: white;
border-radius: 3px;
content: "";
display: block;
}
.clockHour {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -2px 0 -2px -25%; /* numbers much match negative length & thickness */
padding: 2px 0 2px 25%; /* indicator length & thickness */
background: white;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
border-radius: 3px 0 0 3px;
}
.clockMinute {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -35% -2px 0; /* numbers must match negative length & thickness */
padding: 35% 2px 0; /* indicator length & thickness */
background: white;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
border-radius: 3px 0 0 3px;
}
.clockSecond {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
padding: 38% 1px 0; /* indicator length & thickness */
background: red;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}