mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 19:53:36 +00:00
51d11bf26c
see https://forum.magicmirror.builders/topic/19440/digital-clock-minutes-darker changelog added question.. we have a config parm for seconds color, but not hour/minute I have used css here.. is that too inconsistent? --------- Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com> Co-authored-by: Veeck <github@veeck.de>
111 lines
2.0 KiB
CSS
111 lines
2.0 KiB
CSS
.clock-grid {
|
|
display: inline-flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.clock-grid-left {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.clock-grid-right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.clock-grid-top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.clock-grid-bottom {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.clock-circle {
|
|
place-self: center;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.clock-face {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.clock-face::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: -3px 0 0 -3px;
|
|
background: var(--color-text-bright);
|
|
border-radius: 3px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
.clock-hour {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -2px 0 -2px -25%; /* numbers must match negative length & thickness */
|
|
padding: 2px 0 2px 25%; /* indicator length & thickness */
|
|
background: var(--color-text-bright);
|
|
transform-origin: 100% 50%;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.clock-minute {
|
|
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: var(--color-text-bright);
|
|
transform-origin: 50% 100%;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.clock-second {
|
|
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: #888888 !important; */
|
|
|
|
/* use this instead of secondsColor */
|
|
|
|
/* have to use !important, because the code explicitly sets the color currently */
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.module.clock .sun,
|
|
.module.clock .moon {
|
|
display: flex;
|
|
}
|
|
|
|
.module.clock .sun > *,
|
|
.module.clock .moon > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.module.clock .clock-hour-digital {
|
|
color: var(--color-text-bright);
|
|
}
|
|
|
|
.module.clock .clock-minute-digital {
|
|
color: var(--color-text-bright);
|
|
}
|
|
|
|
.module.clock .clock-second-digital {
|
|
color: var(--color-text-dimmed);
|
|
}
|