More accurate timing; styling fixes

[jschessclock.git] / style.css

body {
    transform-origin: 0 0;
    overflow: hidden;
    text-align: center;
}

.clock-container {
    position: relative;
}

.flags {
  width: 570px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 40%;
  z-index: 9999;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  width: 20ch;
  text-align: center;
  position: absolute;
  top: 70%;
  z-index: 9999;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.flags > div {
  visibility: hidden;
  animation: blinker 1s linear infinite;
  font-size: 25pt;
  font-family: "DejaVu Sans",FreeSerif,Code2000,"BabelStone Han","Lucida Sans";
}

@keyframes blinker {
  50% { opacity: 0; }
}

.timers {
  width: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-bottom: 96pt;*/
  position: absolute;
  top: 50%;
  z-index: 9999;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.timer {
  margin-left: 48pt;
  margin-right: 48pt;
  font-size: 48pt;
}

.indicators {
  width: 20pt;
  font-size: 20pt;
}

.commands {
  margin: 0 auto;
  width: 650px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right:auto;
  bottom: 5%;
  z-index: 9999;
}

.cmd {
  cursor: pointer;
  background-color: #FFF;
  padding: 5px;
  border: 3px solid #800000;
  border-radius: 5px;
}