Move CSS into a separate file.

diff --git a/score.css b/score.css
new file mode 100644 (file)
index 0000000..5e353ee
--- /dev/null
+++ b/score.css
@@ -0,0 +1,393 @@
+* {
+  -webkit-box-sizing: border-box;
+  Box-Sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  -webkit-transition: translate3d(0,0,0);
+}
+html, body {
+  width: 1280px;
+  height: 720px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased !important;
+}
+body {
+  font-family: 'Lato', sans-serif;
+  color: white;
+}
+
+/* Score */
+.scorebug {
+  position: fixed;
+  font-size: 25px;
+  left: 10px;
+  top: 10px;
+  border-collapse: collapse;
+  white-space: nowrap;
+  border: 3px solid black;
+  z-index: 1;
+}
+.scorebug td {
+  border: 3px solid #008;
+}
+.team1color, .team2color {
+  width: 15px;
+  margin: 5px;
+}
+.team1color {
+  background: red;
+}
+.team2color {
+  background: green;
+}
+.team1, .team2 {
+  font-weight: bold;
+  width: 100px;
+  text-align: center;
+  height: 35px;
+  background: #00a;
+}
+.score {
+  text-align: center;
+  background: #00c;
+  width: 110px;
+  height: 35px;
+}
+
+/* Clock, to the right of score */
+.clockbug {
+  position: fixed;
+  font-size: 25px;
+  left: 360px;
+  top: 10px;
+  border-collapse: collapse;
+  white-space: nowrap;
+  border: 3px solid black;
+}
+.clock {
+  border: 3px solid #008;
+  background: #00a;
+  text-align: center;
+  height: 35px;
+  width: 90px;
+}
+.clockbug-hidden {
+  -webkit-transform:translateX(-200%);
+}
+.clockbug-animate-in {
+  -webkit-animation: from-left 1s ease;
+}
+.clockbug-animate-out {
+  -webkit-animation: to-left 1s ease;
+  -webkit-transform:translateX(-200%);
+}
+
+/* Comment, below score */
+.commentbug {
+  position: fixed;
+  font-size: 20px;
+  left: 10px;
+  top: 52px;
+  border-collapse: collapse;
+  white-space: nowrap;
+  border: 3px solid black;
+}
+.comment {
+  border: 3px solid #008;
+  background: #00a;
+  text-align: center;
+  height: 30px;
+  width: 340px;
+}
+
+.commentbug-hidden {
+  -webkit-transform:translateY(-40px);
+}
+.commentbug-animate-in {
+  -webkit-animation: from-top 0.5s ease;
+}
+.commentbug-animate-out {
+  -webkit-animation: to-top 0.5s ease;
+  -webkit-transform:translateY(-40px);
+}
+
+/* Lower third */
+.lowerthird-headline {
+  position: fixed;
+  font-size: 40px;
+  left: 10px;
+  top: 520px;
+  border-collapse: collapse;
+  white-space: nowrap;
+  border: 2px solid #ccc;
+  height: 118px;
+  font-weight: bold;
+  width: 1050px;
+  /*background: linear-gradient(to right, #ccc, #fff 15px); */
+  background-image: url(lowerthird-bg.png);
+  color: black;
+  /* padding-top: 20px; */
+}
+.lowerthird-headline-hidden {
+  width: 0px;
+  border-left: 0px;
+  border-right: 0px;
+}
+.lowerthird-headline-animate-in {
+  -webkit-animation: scale-out 1.0s;
+}
+.lowerthird-headline-animate-out {
+  -webkit-animation: scale-in 1.0s;
+}
+.lowerthird-headline-content {
+  padding-left: 20px;
+  position: absolute;
+}
+.lowerthird-headline-content-hidden {
+  clip: rect(0px,0px,200px,0px);
+}
+.lowerthird-headline-content-animate-in {
+  -webkit-animation: wipe-out 2.0s ease;
+}
+.lowerthird-headline-content-animate-out {
+  -webkit-animation: wipe-in 2.0s ease;
+  clip: rect(0px,0px,200px,0px);
+}
+.lowerthird-subheading {
+  position: fixed;
+  font-size: 24px;
+  left: 40px;
+  top: 637px;
+  height: 40px;
+  width: 500px;
+  border-collapse: collapse;
+  white-space: nowrap;
+  border: 1px solid black;
+  /*display: flex;
+  align-items: center; */
+  /*background: linear-gradient(to right, #44c, #33a 15px); */
+  background-image: url(lowerthird-bg2.png);
+}
+.lowerthird-subheading-hidden {
+  clip: rect(0px,0px,200px,0px);
+}
+.lowerthird-subheading-animate-in {
+  -webkit-animation: scale-out-small 1.6s ease;
+}
+.lowerthird-subheading-animate-out {
+  -webkit-animation: scale-in-small 1.6s ease;
+  width: 0px;
+  border-left: 0px;
+}
+.lowerthird-subheading-content {
+  position: absolute;
+  padding-left: 20px;
+}
+.lowerthird-subheading-content-hidden {
+  width: 0px;
+  border: 0px;
+}
+.lowerthird-subheading-content-animate-in {
+  -webkit-animation: wipe-out 2.2s ease;
+}
+.lowerthird-subheading-content-animate-out {
+  -webkit-animation: wipe-in 2.2s ease;
+  clip: rect(0px,0px,200px,0px);
+}
+
+/* these are hidden when actually run in casparcg */
+#area {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 1280px;
+  height: 720px;
+  background: cyan;
+}
+#carousel {
+  z-index: 3;
+  position: fixed;
+  top: 250px;
+  font-size: 50px;
+  /* background: rgba(0, 0, 170, 0.8); */
+  background: transparent;
+  top: 20px;
+  left: 50px;
+  right: 50px;
+  width: 1180px;
+  border-spacing: 0px 7px;
+  text-align: left;
+  border-collapse: separate;
+  text-transform: uppercase;
+  display: none;
+}
+#carousel thead tr {
+  text-transform: none;
+  text-align: center;
+}
+#carousel thead th {
+  text-transform: none;
+  text-align: center;
+  font-size: 50px;
+  -webkit-animation: fade-in 1.0s ease;
+  -webkit-animation-delay: 0.0s;
+  -webkit-animation-fill-mode: both;
+}
+#carousel tr.subfooter {
+  -webkit-animation: fade-in 1.0s ease;
+  -webkit-animation-delay: 0.25s;
+  -webkit-animation-fill-mode: both;
+}
+#carousel tr {
+  /* background: rgba(0, 0, 170, 0.8); */
+  background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
+  /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
+  -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
+}
+#carousel tr.footer {
+  -webkit-animation: fade-in 2.0s ease;
+  -webkit-animation-delay: 0.5s;
+  -webkit-animation-fill-mode: both;
+}
+#carousel td, #carousel th {
+  padding: 8px;
+  font-size: 40px;
+}
+#carousel tr.footer td {
+  font-size: 20px;
+  text-transform: none;
+  text-align: center;
+}
+#carousel th.rank {
+  padding-left: 20px;
+}
+#carousel td.team {
+  width: auto;
+}
+.nplayed, .gd, .pts {
+  text-align: center;
+}
+
+#manualcontrols {
+  z-index: 4;
+  position: fixed;
+  top: 250px;
+}
+
+/* Animations */
+@-webkit-keyframes from-left {
+  0% {
+    -webkit-transform:translateX(-200%);
+  }
+  100% {
+    -webkit-transform:translateX(0);
+  }
+}
+@-webkit-keyframes to-left {
+  0% {
+    -webkit-transform:translateX(0);
+  }
+  100% {
+    -webkit-transform:translateX(-200%);
+  }
+}
+@-webkit-keyframes from-top {
+  0% {
+    -webkit-transform:translateY(-40px);
+  }
+  100% {
+    -webkit-transform:translateY(0);
+  }
+}
+@-webkit-keyframes to-top {
+  0% {
+    -webkit-transform:translateY(0);
+  }
+  100% {
+    -webkit-transform:translateY(-40px);
+  }
+}
+
+@-webkit-keyframes scale-out {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 1050px;
+  }
+}
+@-webkit-keyframes scale-in {
+  0% {
+    width: 1050px;
+    border: 2px solid #ccc;
+  }
+  100% {
+    width: 0px;
+    border: 2px solid #ccc;
+  }
+}
+@-webkit-keyframes scale-out-small {
+  0% {
+    width: 0px;
+    border: 0px;
+  }
+  19.99% {
+    border: 0px;
+  }
+  20% {
+    width: 0px;
+    border: 1px solid black;
+  }
+  100% {
+    width: 500px;
+  }
+}
+@-webkit-keyframes scale-in-small {
+  0% {
+    width: 500px;
+    border: 1px solid black;
+  }
+  80% {
+    width: 0px;
+    border: 1px solid black;
+  }
+  80.01% {
+    border: 0px;
+  }
+  100% {
+    width: 0px;
+    border: 0px;
+  }
+}
+@-webkit-keyframes wipe-out {
+  0% {
+    clip: rect(0px,0px,200px,0px);
+  }
+  20% {
+    clip: rect(0px,0px,200px,0px);
+  }
+  100% {
+    clip: rect(0px,1050px,200px,0px);
+  }
+}
+@-webkit-keyframes wipe-in {
+  0% {
+    clip: rect(0px,1050px,200px,0px);
+  }
+  20% {  /* Not symmetrical! */
+    clip: rect(0px,0px,200px,0px);
+  }
+  100% {
+    clip: rect(0px,0px,200px,0px);
+  }
+}
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0.0001;
+  }
+  100% {
+    opacity: 1;
+  }
+}

diff --git a/score.html b/score.html
index 9e6a01a9a69dfb1836dfd20e3aa4dc00548322de..b51e4d02ede5d6e80d559655b22fba2658cc3e1e 100644 (file)
--- a/score.html
+++ b/score.html
@@ -5,401 +5,7 @@
    <meta charset="utf-8" />
 <!--   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
    <link href="fonts/lato.css" rel="stylesheet">
-   <style>
-* {
-  -webkit-box-sizing: border-box;
-  Box-Sizing: border-box;
-  -webkit-backface-visibility: hidden;
-  -webkit-transition: translate3d(0,0,0);
-}
-html, body {
-  width: 1280px;
-  height: 720px;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased !important;
-}
-body {
-  font-family: 'Lato', sans-serif;
-  color: white;
-}
-
-/* Score */
-.scorebug {
-  position: fixed;
-  font-size: 25px;
-  left: 10px;
-  top: 10px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-  z-index: 1;
-}
-.scorebug td {
-  border: 3px solid #008;
-}
-.team1color, .team2color {
-  width: 15px;
-  margin: 5px;
-}
-.team1color {
-  background: red;
-}
-.team2color {
-  background: green;
-}
-.team1, .team2 {
-  font-weight: bold;
-  width: 100px;
-  text-align: center;
-  height: 35px;
-  background: #00a;
-}
-.score {
-  text-align: center;
-  background: #00c;
-  width: 110px;
-  height: 35px;
-}
-
-/* Clock, to the right of score */
-.clockbug {
-  position: fixed;
-  font-size: 25px;
-  left: 360px;
-  top: 10px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-}
-.clock {
-  border: 3px solid #008;
-  background: #00a;
-  text-align: center;
-  height: 35px;
-  width: 90px;
-}
-.clockbug-hidden {
-  -webkit-transform:translateX(-200%);
-}
-.clockbug-animate-in {
-  -webkit-animation: from-left 1s ease;
-}
-.clockbug-animate-out {
-  -webkit-animation: to-left 1s ease;
-  -webkit-transform:translateX(-200%);
-}
-
-/* Comment, below score */
-.commentbug {
-  position: fixed;
-  font-size: 20px;
-  left: 10px;
-  top: 52px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-}
-.comment {
-  border: 3px solid #008;
-  background: #00a;
-  text-align: center;
-  height: 30px;
-  width: 340px;
-}
-
-.commentbug-hidden {
-  -webkit-transform:translateY(-40px);
-}
-.commentbug-animate-in {
-  -webkit-animation: from-top 0.5s ease;
-}
-.commentbug-animate-out {
-  -webkit-animation: to-top 0.5s ease;
-  -webkit-transform:translateY(-40px);
-}
-
-/* Lower third */
-.lowerthird-headline {
-  position: fixed;
-  font-size: 40px;
-  left: 10px;
-  top: 520px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 2px solid #ccc;
-  height: 118px;
-  font-weight: bold;
-  width: 1050px;
-  /*background: linear-gradient(to right, #ccc, #fff 15px); */
-  background-image: url(lowerthird-bg.png);
-  color: black;
-  /* padding-top: 20px; */
-}
-.lowerthird-headline-hidden {
-  width: 0px;
-  border-left: 0px;
-  border-right: 0px;
-}
-.lowerthird-headline-animate-in {
-  -webkit-animation: scale-out 1.0s;
-}
-.lowerthird-headline-animate-out {
-  -webkit-animation: scale-in 1.0s;
-}
-.lowerthird-headline-content {
-  padding-left: 20px;
-  position: absolute;
-}
-.lowerthird-headline-content-hidden {
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-headline-content-animate-in {
-  -webkit-animation: wipe-out 2.0s ease;
-}
-.lowerthird-headline-content-animate-out {
-  -webkit-animation: wipe-in 2.0s ease;
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading {
-  position: fixed;
-  font-size: 24px;
-  left: 40px;
-  top: 637px;
-  height: 40px;
-  width: 500px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 1px solid black;
-  /*display: flex;
-  align-items: center; */
-  /*background: linear-gradient(to right, #44c, #33a 15px); */
-  background-image: url(lowerthird-bg2.png);
-}
-.lowerthird-subheading-hidden {
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading-animate-in {
-  -webkit-animation: scale-out-small 1.6s ease;
-}
-.lowerthird-subheading-animate-out {
-  -webkit-animation: scale-in-small 1.6s ease;
-  width: 0px;
-  border-left: 0px;
-}
-.lowerthird-subheading-content {
-  position: absolute;
-  padding-left: 20px;
-}
-.lowerthird-subheading-content-hidden {
-  width: 0px;
-  border: 0px;
-}
-.lowerthird-subheading-content-animate-in {
-  -webkit-animation: wipe-out 2.2s ease;
-}
-.lowerthird-subheading-content-animate-out {
-  -webkit-animation: wipe-in 2.2s ease;
-  clip: rect(0px,0px,200px,0px);
-}
-
-/* these are hidden when actually run in casparcg */
-#area {
-  position: fixed;
-  left: 0px;
-  top: 0px;
-  width: 1280px;
-  height: 720px;
-  background: cyan;
-}
-#carousel {
-  z-index: 3;
-  position: fixed;
-  top: 250px;
-  font-size: 50px;
-  /* background: rgba(0, 0, 170, 0.8); */
-  background: transparent;
-  top: 20px;
-  left: 50px;
-  right: 50px;
-  width: 1180px;
-  border-spacing: 0px 7px;
-  text-align: left;
-  border-collapse: separate;
-  text-transform: uppercase;
-  display: none;
-}
-#carousel thead tr {
-  text-transform: none;
-  text-align: center;
-}
-#carousel thead th {
-  text-transform: none;
-  text-align: center;
-  font-size: 50px;
-  -webkit-animation: fade-in 1.0s ease;
-  -webkit-animation-delay: 0.0s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel tr.subfooter {
-  -webkit-animation: fade-in 1.0s ease;
-  -webkit-animation-delay: 0.25s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel tr {
-  /* background: rgba(0, 0, 170, 0.8); */
-  background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
-  /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
-  -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
-}
-#carousel tr.footer {
-  -webkit-animation: fade-in 2.0s ease;
-  -webkit-animation-delay: 0.5s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel td, #carousel th {
-  padding: 8px;
-  font-size: 40px;
-}
-#carousel tr.footer td {
-  font-size: 20px;
-  text-transform: none;
-  text-align: center;
-}
-#carousel th.rank {
-  padding-left: 20px;
-}
-#carousel td.team {
-  width: auto;
-}
-.nplayed, .gd, .pts {
-  text-align: center;
-}
-
-#manualcontrols {
-  z-index: 4;
-  position: fixed;
-  top: 250px;
-}
-
-/* Animations */
-@-webkit-keyframes from-left {
-  0% {
-    -webkit-transform:translateX(-200%);
-  }
-  100% {
-    -webkit-transform:translateX(0);
-  }
-}
-@-webkit-keyframes to-left {
-  0% {
-    -webkit-transform:translateX(0);
-  }
-  100% {
-    -webkit-transform:translateX(-200%);
-  }
-}
-@-webkit-keyframes from-top {
-  0% {
-    -webkit-transform:translateY(-40px);
-  }
-  100% {
-    -webkit-transform:translateY(0);
-  }
-}
-@-webkit-keyframes to-top {
-  0% {
-    -webkit-transform:translateY(0);
-  }
-  100% {
-    -webkit-transform:translateY(-40px);
-  }
-}
-
-@-webkit-keyframes scale-out {
-  0% {
-    width: 0px;
-  }
-  100% {
-    width: 1050px;
-  }
-}
-@-webkit-keyframes scale-in {
-  0% {
-    width: 1050px;
-    border: 2px solid #ccc;
-  }
-  100% {
-    width: 0px;
-    border: 2px solid #ccc;
-  }
-}
-@-webkit-keyframes scale-out-small {
-  0% {
-    width: 0px;
-    border: 0px;
-  }
-  19.99% {
-    border: 0px;
-  }
-  20% {
-    width: 0px;
-    border: 1px solid black;
-  }
-  100% {
-    width: 500px;
-  }
-}
-@-webkit-keyframes scale-in-small {
-  0% {
-    width: 500px;
-    border: 1px solid black;
-  }
-  80% {
-    width: 0px;
-    border: 1px solid black;
-  }
-  80.01% {
-    border: 0px;
-  }
-  100% {
-    width: 0px;
-    border: 0px;
-  }
-}
-@-webkit-keyframes wipe-out {
-  0% {
-    clip: rect(0px,0px,200px,0px);
-  }
-  20% {
-    clip: rect(0px,0px,200px,0px);
-  }
-  100% {
-    clip: rect(0px,1050px,200px,0px);
-  }
-}
-@-webkit-keyframes wipe-in {
-  0% {
-    clip: rect(0px,1050px,200px,0px);
-  }
-  20% {  /* Not symmetrical! */
-    clip: rect(0px,0px,200px,0px);
-  }
-  100% {
-    clip: rect(0px,0px,200px,0px);
-  }
-}
-@-webkit-keyframes fade-in {
-  0% {
-    opacity: 0.0001;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-   </style>
+   <link href="score.css" rel="stylesheet">
   </head>
   <body>
     <div id="area"></div>