- <link href="https://fonts.googleapis.com/css?family=Lato" 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: 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;
-}
-#manualcontrols {
- z-index: 3;
- 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);
- }
-}
- </style>