mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 19:53:36 +00:00
551619e772
This is a fix for issue 933 which restores the original alligment of the analog clock; the analog clock still does not properly align to the left of the left sidebar when content of other left sidebar modules is too wide.
69 lines
1.5 KiB
CSS
69 lines
1.5 KiB
CSS
.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 0; /* indicator length & thickness */
|
|
background: #888;
|
|
-webkit-transform-origin: 50% 100%;
|
|
-ms-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|