Add dice

public/assets/css/style.css

@@ -314,6 +314,105 @@ div#content {
   margin-bottom: 0;
 }
 
+div#dice {
+  position: absolute;
+  right: 0;
+  bottom: 30px;
+  margin: 3px;
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  border: 1px solid darkgray;
+}
+
+.die {
+  width: 31px;
+  height: 31px;
+  border: 1px solid black;
+  border-radius: 4px;
+  margin: 0 auto;
+  margin-top: 3px;
+  margin-bottom: 1px;
+  background-color: white;
+  display: flex;
+  justify-content: space-around;
+}
+
+.die > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  background-color: black;
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+}
+
+.die.one > div:nth-child(even) > .dot:nth-child(even) {
+  visibility: visible;
+}
+
+.die.two > div:first-child > .dot:first-child,
+.die.two > div:last-child > .dot:last-child {
+  visibility: visible;
+}
+
+.die.three > div:first-child > .dot:first-child,
+.die.three > div:nth-child(even) > .dot:nth-child(even),
+.die.three > div:last-child > .dot:last-child {
+  visibility: visible;
+}
+
+.die.four > div:nth-child(odd) > .dot:nth-child(odd) {
+  visibility: visible;
+}
+
+.die.five > div:nth-child(odd) > .dot:nth-child(odd),
+.die.five > div:nth-child(even) > .dot:nth-child(even) {
+  visibility: visible;
+}
+
+.die.six > div:nth-child(odd) > .dot {
+  visibility: visible;
+}
+
+.die.test > div:first-child > .dot {
+  visibility: visible;
+}
+
+.roll-in {
+  animation: roll-in 0.125s linear 1;
+}
+
+.roll-out {
+  animation: roll-out 0.125s linear 1;
+}
+
+@keyframes roll-out {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes roll-in {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;