MagicMirror/modules/default/clock/clock_styles.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%;
}

.module.clock .sun,
.module.clock .moon {
  display: flex;
}

.module.clock .sun > *,
.module.clock .moon > * {
  flex: 1;
}