Refactor audience scoring overlay to use CSS flexbox.

static/css/audience_display.css

@@ -9,154 +9,87 @@ html {
   -moz-user-select: none;
   overflow: hidden;
 }
-#centering {
+#overlayCentering {
   position: absolute;
-  left: 50%;
-  bottom: -340px;
+  bottom: -210px;
+  width: 100%;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 #matchOverlay {
-  position: relative;
-  left: -50%;
-  bottom: 70px;
-  margin: 0 auto;
-  height: 104px;
-  background-color: #fff;
+  display: flex;
+  flex-direction: column;
   border: 1px solid #222;
   color: #222;
   font-size: 22px;
 }
+#matchOverlayTop {
+  height: 100px;
+  display: flex;
+}
 .teams {
-  width: 40px;
+  width: 55px;
   height: 100%;
-  line-height: 29px;
-  text-align: center;
-  display: table;
-  font-family: "FuturaLT";
-  font-size: 21px;
-}
-.avatars {
   display: none;
-}
-.avatar {
-  height: 25px;
-  margin: 4px 10px 3px;
-}
-.valign-cell {
-  display: table-cell;
-  vertical-align: middle;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #fff;
+  font-family: "FuturaLT";
+  font-size: 20px;
+  line-height: 25px;
 }
 #leftTeams {
-  float: left;
   border-right: 1px solid #222;
 }
 #rightTeams {
-  float: right;
   border-left: 1px solid #222;
 }
-.score {
-  width: 0px;
-  height: 100%;
-  float: left;
-}
 .reversible-left[data-reversed=false], .reversible-right[data-reversed=true] {
   background-color: #ff4444;
 }
 .reversible-left[data-reversed=true], .reversible-right[data-reversed=false] {
   background-color: #2080ff;
 }
-#eventMatchInfo {
+.score {
+  width: 0;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.avatars {
+  width: 50px;
+  height: 100%;
   display: none;
-  position: absolute;
-  right: -1px;
-  left: -1px;
-  height: 30px;
-  bottom: 0px;
-  line-height: 30px;
-  background-color: #444;
-  border: 1px solid #222;
-  padding: 0px 5px;
-  font-family: "FuturaLT";
-  font-size: 15px;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.avatar {
+  height: 25px;
+}
+.score-number {
+  width: 130px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "FuturaLTBold";
+  font-size: 55px;
   color: #fff;
-  z-index: -1;
+  opacity: 0;
 }
 #matchCircle {
   position: absolute;
-  left: -75px;
-  bottom: 50px;
-  margin: 0 auto;
+  top: -25px;
   border-radius: 50%;
   width: 150px;
   height: 150px;
   background-color: #fff;
   border: 1px solid #222;
 }
-.score-number {
-  float: left;
-  width: 60%;
-  margin: 0px 5px;
-  text-align: center;
-  font-family: "FuturaLTBold";
-  font-size: 55px;
-  line-height: 104px;
-  color: #fff;
-  opacity: 0;
-}
-.score-fields {
-  float: left;
-  display: block;
-  font-size: 20px;
-  font-family: "FuturaLTBold";
-  color: #fff;
-  opacity: 0;
-}
-.score-fields span {
-  display: inline-block;
-  line-height: 34px;
-  padding: 0;
-}
-.power-up[data-state="0"] {
-  opacity: 1;
-}
-.power-up[data-state="1"] {
-  color: #ffff00;
-}
-.power-up[data-state="2"] {
-  color: #ffff00;
-  animation: power-up-blinker 0.5s linear infinite;
-}
-.power-up[data-state="3"] {
-  opacity: 0.4;
-}
-@keyframes power-up-blinker {
-  50% {
-    opacity: 0.5;
-  }
-}
-.score-fields-icons {
-  text-align: center;
-  width: 28px;
-}
-.score-fields-text {
-  width: 19px;
-}
-.powerup-progress {
-  float: left;
-  height: 100%;
-  margin: 0 4px 0 4px;
-  width: 6px;
-}
-.powerup-progress>div {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 6px;
-  height: 0;
-  margin: auto;
-  background-color: #fff;
-  opacity: 0.7;
-  border-radius: 3px;
-}
 #logo {
   position: relative;
   top: 15px;
@@ -171,30 +104,22 @@ html {
   font-size: 32px;
   opacity: 0;
 }
-.seesaw-indicator {
-  position: absolute;
-  bottom: 8px;
-  border-radius: 3px;
-  width: 11px;
-  height: 16px;
-  background-color: #ccc;
-  border: 1px solid #333;
-  opacity: 0;
+#eventMatchInfo {
+  height: 0;
+  display: none;
+  justify-content: space-between;
+  z-index: -1;
+  align-items: flex-end;
+  padding: 0 5px;
+  background-color: #444;
+  font-family: "FuturaLT";
+  font-size: 15px;
+  line-height: 30px;
+  color: #fff;
 }
-.seesaw-indicator[data-owned-by="1"] {
-  background-color: #ff4444;
-}
-.seesaw-indicator[data-owned-by="2"] {
-  background-color: #2080ff;
-}
-#leftSwitchIndicator {
-  left: 50px;
-}
-#scaleIndicator {
-  left: 68px;
-}
-#rightSwitchIndicator {
-  left: 86px;
+.valign-cell {
+  display: table-cell;
+  vertical-align: middle;
 }
 #blindsContainer {
   position: fixed;