+++ /dev/null
-* {
- box-sizing: border-box;
-}
-body {
- width: 1280px;
- height: 720px;
- margin: 0;
- padding: 0;
- background: transparent;
- overflow: hidden;
-
- /* 720p -> 1080p */
- /* transform: scale(1.5);
- transform-origin: top left; */
-}
-body {
- font-family: 'Lato', sans-serif;
- color: white;
-
- /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
- --main-padding-top-adjust: 0px;
- --main-padding-top-large-adjust: 0px;
-}
-
-#entire-bug {
- transform: scale(0.8);
- transform-origin: top left;
-}
-
-/* Score */
-.scorebug {
- position: fixed;
- font-size: 25px;
- left: 10px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 1px solid black;
- z-index: 1;
-}
-.scorebug td {
- border: 1px solid #000;
-}
-.scorebug2 {
- /*top: 52px; */
- /* left: 22px; */
- left: 1275px;
- top: 13px;
- font-size: 20px;
-}
-#clockbug2 {
- left: 1360px;
- top: 13px;
- font-size: 20px;
-}
-.team1color, .team2color {
- width: 12px;
- margin: 5px;
-}
-.team1color {
- background-color: red;
- background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
-}
-.team2color {
- background-color: green;
- background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
-}
-.team1, .team2 {
- font-weight: bold;
- width: 100px;
- text-align: center;
- height: 35px;
- background: linear-gradient(to bottom, #00a, #008);
- padding-top: var(--main-padding-top-adjust);
-}
-#score2_team1, #score2_team2 {
- background: linear-gradient(to bottom, #00a8, #0088);
-}
-#score2_team1, #score2_team2, #score2_score {
- height: 30px;
-}
-.score {
- text-align: center;
- background: linear-gradient(to bottom, #00c, #00a);
- width: 110px;
- height: 35px;
- padding-top: var(--main-padding-top-adjust);
-}
-#score2_score {
- background: linear-gradient(to bottom, #00c8, #00a8);
-}
-
-/* Clock, to the right of score */
-.clockbug, .clockbug2 {
- position: fixed;
- font-size: 25px;
- left: 352px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 1px solid black;
-}
-.clock {
- border: 1px solid #000;
- background: linear-gradient(to bottom, #00a, #008);
- text-align: center;
- height: 35px;
- padding-top: var(--main-padding-top-adjust);
- width: 90px;
-}
-#clock2 {
- background: linear-gradient(to bottom, #00a8, #0088);
- height: 30px;
-}
-.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: 1px solid black;
-}
-.comment {
- border: 1px solid #000;
- background: linear-gradient(to bottom, #00a, #008);
- text-align: center;
- height: 30px;
- width: 334px;
-}
-
-.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; */
- display: flex;
- align-items: center;
- vertical-align: middle;
-}
-.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;
- padding-top: var(--main-padding-top-large-adjust);
-}
-.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);
- -webkit-animation-fill-mode: both;
-}
-.lowerthird-subheading {
- position: fixed;
- font-size: 24px;
- left: 40px;
- top: 638px;
- height: 40px;
- width: 600px;
- 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);
- display: flex;
- align-items: center;
-}
-.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;
- -webkit-animation-fill-mode: both;
-}
-.lowerthird-subheading-content {
- position: absolute;
- padding-left: 20px;
- padding-top: var(--main-padding-top-adjust);
-}
-.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);
-}
-.lowerthird-picture {
- position: fixed;
- left: 1085px;
- top: 490px;
- white-space: nowrap;
- border: 0px;
- height: 170px;
- width: 170px;
- color: black;
-}
-.lowerthird-picture img {
- height: 170px;
- width: 170px;
-}
-.lowerthird-picture-hidden {
- width: 0px;
- border-left: 0px;
- border-right: 0px;
-}
-.lowerthird-picture-animate-in {
- -webkit-animation: scale-out 1.0s;
-}
-.lowerthird-picture-animate-out {
- -webkit-animation: scale-in-no-border 1.0s;
-}
-.lowerthird-picture-content {
- padding-left: 0px;
- position: absolute;
-}
-.lowerthird-picture-content-hidden {
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-picture-content-animate-in {
- -webkit-animation: wipe-out 2.0s ease;
- -webkit-animation-delay: 0.3s;
- -webkit-animation-fill-mode: both;
-}
-.lowerthird-picture-content-animate-out {
- -webkit-animation: wipe-in 2.0s ease;
- clip: rect(0px,0px,200px,0px);
-}
-
-/* these are hidden when actually run in Nageru */
-#area {
- position: fixed;
- left: 0px;
- top: 0px;
- width: 1280px;
- height: 720px;
- background: cyan;
-}
-#carousel {
- z-index: 3;
- position: fixed;
- font-size: 45px;
- /* background: rgba(0, 0, 170, 0.8); */
- background: transparent;
- top: 10px;
- bottom: auto;
- 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: 45px;
- -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.subfooter th {
- font-size: 25px;
-}
-#carousel tr {
- /* background: rgba(0, 0, 170, 0.8); */
- background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
- /* -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;
-}
-
-/* schedule */
-#carousel td.matchup {
- padding-left: 0.7em;
- width: auto;
-}
-#carousel td.group {
- text-transform: none;
-}
-#carousel .streamtime {
- text-align: center;
- text-transform: none;
-}
-
-/* roster */
-#carousel .playerpadding {
- font-size: 25px;
- background: rgba(0,0,0,0);
-}
-#carousel th.playernum, #carousel .playername {
- font-size: 35px;
-}
-#carousel th.playernum {
- text-align: center;
- padding-right: 8px;
- padding-left: 0px; margin-left: 0px;
- width: 80px;
-}
-#carousel .playername {
- text-transform: none;
- 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-in-no-border {
- 0% {
- width: 1050px;
- }
- 100% {
- width: 0px;
- }
-}
-@-webkit-keyframes scale-out-small {
- 0% {
- width: 0px;
- border: 0px;
- }
- 19.99% {
- border: 0px;
- }
- 20% {
- width: 0px;
- border: 1px solid black;
- }
- 100% {
- width: 600px;
- }
-}
-@-webkit-keyframes scale-in-small {
- 0% {
- width: 600px;
- 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;
- }
- 100% {
- opacity: 1;
- }
-}
-@-webkit-keyframes fade-out {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}