--- /dev/null
+$trondisk: true;
+
+* {
+ 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 {
+ @if $trondisk {
+ 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: 4px;
+ --main-padding-top-large-adjust: 0px;
+ } @else {
+ font-family: 'Exo', sans-serif;
+ color: #222;
+
+ /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
+ --main-padding-top-adjust: 2px;
+ --main-padding-top-large-adjust: 4px;
+ }
+}
+
+#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;
+ @if $trondisk {
+ border: 1px solid black;
+ } @else {
+ border: 1px solid #ccc;
+ }
+ z-index: 1;
+}
+.scorebug td {
+ @if $trondisk {
+ border: 1px solid #000;
+ } @else {
+ border: 1px solid #ccc;
+ }
+}
+.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;
+ @if $trondisk {
+ background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
+ } @else {
+ background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
+ }
+}
+.team2color {
+ background-color: green;
+ @if $trondisk {
+ background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
+ } @else {
+ background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
+ }
+}
+.team1, .team2 {
+ font-weight: bold;
+ width: 100px;
+ text-align: center;
+ height: 35px;
+ @if $trondisk {
+ background: linear-gradient(to bottom, #00a, #008);
+ } @else {
+ background: linear-gradient(to bottom, #fff, #eee);
+ }
+ padding-top: var(--main-padding-top-adjust);
+}
+#score2_team1, #score2_team2 {
+ @if $trondisk {
+ background: linear-gradient(to bottom, #00a8, #0088);
+ } @else {
+ background: linear-gradient(to bottom, #fff8, #eee8);
+ }
+}
+#score2_team1, #score2_team2, #score2_score {
+ height: 30px;
+}
+.score {
+ text-align: center;
+ @if $trondisk {
+ background: linear-gradient(to bottom, #00c, #00a);
+ } @else {
+ background: linear-gradient(to bottom, #fff, #eee);
+ }
+ width: 110px;
+ height: 35px;
+ padding-top: var(--main-padding-top-adjust);
+}
+#score2_score {
+ @if $trondisk {
+ background: linear-gradient(to bottom, #00c8, #00a8);
+ } @else {
+ background: linear-gradient(to bottom, #fff8, #eee8);
+ }
+}
+
+/* Clock, to the right of score */
+.clockbug, .clockbug2 {
+ position: fixed;
+ font-size: 25px;
+ left: 352px;
+ top: 10px;
+ border-collapse: collapse;
+ white-space: nowrap;
+ @if $trondisk {
+ border: 1px solid black;
+ } @else {
+ border: 1px solid #ccc;
+ }
+}
+.clock {
+ @if $trondisk {
+ border: 1px solid #000;
+ background: linear-gradient(to bottom, #00a, #008);
+ } @else {
+ border: 1px solid #ccc;
+ background: linear-gradient(to bottom, #fff, #eee);
+ }
+ text-align: center;
+ height: 35px;
+ padding-top: var(--main-padding-top-adjust);
+ width: 90px;
+}
+#clock2 {
+ @if $trondisk {
+ background: linear-gradient(to bottom, #00a8, #0088);
+ } @else {
+ background: linear-gradient(to bottom, #fff8, #eee8);
+ }
+ 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;
+ @if $trondisk {
+ border: 1px solid black;
+ } @else {
+ border: 1px solid #ccc;
+ }
+}
+.comment {
+ @if $trondisk {
+ border: 1px solid #000;
+ background: linear-gradient(to bottom, #00a, #008);
+ } @else {
+ border: 1px solid #ccc;
+ background: linear-gradient(to bottom, #fff, #eee);
+ }
+ 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;
+ @if $trondisk {
+ border: 2px solid #ccc;
+ background-image: url(trondisk/lowerthird-bg.png);
+ } @else {
+ border: 1px solid #ccc;
+ background-image: url(generic/lowerthird-bg.png);
+ }
+ height: 118px;
+ font-weight: bold;
+ width: 1050px;
+ /*background: linear-gradient(to right, #ccc, #fff 15px); */
+ 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;
+ @if $trondisk {
+ border: 1px solid black;
+ background-image: url(trondisk/lowerthird-bg2.png);
+ } @else {
+ border: 1px solid #6ad;
+ background-image: url(generic/lowerthird-bg2.png);
+ }
+ /*display: flex;
+ align-items: center; */
+ /*background: linear-gradient(to right, #44c, #33a 15px); */
+ 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); */
+ @if $trondisk {
+ background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
+ } @else {
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 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;
+}
+
+/* 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;
+ @if $trondisk {
+ border: 2px solid #ccc;
+ } @else {
+ border: 1px solid #ccc;
+ }
+ }
+ 100% {
+ width: 0px;
+ @if $trondisk {
+ border: 2px solid #ccc;
+ } @else {
+ border: 1px 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;
+ @if $trondisk {
+ border: 1px solid black;
+ } @else {
+ border: 1px solid #6ad;
+ }
+ }
+ 100% {
+ width: 600px;
+ }
+}
+@-webkit-keyframes scale-in-small {
+ 0% {
+ width: 600px;
+ @if $trondisk {
+ border: 1px solid black;
+ } @else {
+ border: 1px solid #6ad;
+ }
+ }
+ 80% {
+ width: 0px;
+ border: 1px solid #6ad;
+ }
+ 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;
+ }
+}
projects / ultimatescore / blobdiff