git.sesse.net Git - ultimatescore/blob - score.scss

   1 $trondisk: false;
   2
   3 * {
   4   box-sizing: border-box;
   5 }
   6 body {
   7   width: 1280px;
   8   height: 720px;
   9   margin: 0;
  10   padding: 0;
  11   background: transparent;
  12   overflow: hidden;
  13
  14   /* 720p -> 1080p */
  15   /* transform: scale(1.5);
  16   transform-origin: top left; */
  17 }
  18 body {
  19   @if $trondisk {
  20     font-family: 'Lato', sans-serif;
  21     color: white;
  22
  23     /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
  24     --main-padding-top-adjust: 0px;
  25     --main-padding-top-large-adjust: 0px;
  26   } @else {
  27     font-family: 'Exo', sans-serif;
  28     color: #222;
  29
  30     /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
  31     --main-padding-top-adjust: 2px;
  32     --main-padding-top-large-adjust: 4px;
  33   }
  34 }
  35
  36 #entire-bug {
  37   transform: scale(0.8);
  38   transform-origin: top left;
  39 }
  40
  41 /* Score */
  42 .scorebug {
  43   position: fixed;
  44   font-size: 25px;
  45   left: 10px;
  46   top: 10px;
  47   border-collapse: collapse;
  48   white-space: nowrap;
  49   @if $trondisk {
  50     border: 1px solid black;
  51   } @else {
  52     border: 1px solid #ccc;
  53   }
  54   z-index: 1;
  55 }
  56 .scorebug td {
  57   @if $trondisk {
  58     border: 1px solid #000;
  59   } @else {
  60     border: 1px solid #ccc;
  61   }
  62 }
  63 .scorebug2 td, .scorebug3 td {
  64   border: 1px solid #ccc8;
  65 }
  66 .scorebug2 {
  67   left: 1275px;
  68   top: 13px;
  69   font-size: 20px;
  70 }
  71 #clockbug2 {
  72   left: 1360px;
  73   top: 13px;
  74   font-size: 20px;
  75 }
  76 .scorebug3 {
  77   left: 1275px;
  78   top: 47px;
  79   font-size: 20px;
  80 }
  81 #clockbug3 {
  82   left: 1360px;
  83   top: 47px;
  84   font-size: 20px;
  85 }
  86 .team1color, .team2color {
  87   width: 12px;
  88   margin: 5px;
  89 }
  90 .team1color {
  91   background-color: red;
  92   @if $trondisk {
  93     background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
  94   } @else {
  95     background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
  96   }
  97 }
  98 .team2color {
  99   background-color: green;
 100   @if $trondisk {
 101     background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
 102   } @else {
 103     background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
 104   }
 105 }
 106 .team1, .team2 {
 107   font-weight: bold;
 108   width: 100px;
 109   text-align: center;
 110   height: 35px;
 111   @if $trondisk {
 112     background: linear-gradient(to bottom, #00a, #008);
 113   } @else {
 114     background: linear-gradient(to bottom, #fff, #eee);
 115   }
 116   padding-top: var(--main-padding-top-adjust);
 117 }
 118 #score2_team1, #score2_team2, #score3_team1, #score3_team2 {
 119   @if $trondisk {
 120     background: linear-gradient(to bottom, #00a8, #0088);
 121   } @else {
 122     background: linear-gradient(to bottom, #fff8, #eee8);
 123   }
 124 }
 125 #score2_team1, #score2_team2, #score2_score, #score3_team1, #score3_team2, #score3_score {
 126   height: 30px;
 127 }
 128 .score {
 129   text-align: center;
 130   @if $trondisk {
 131     background: linear-gradient(to bottom, #00c, #00a);
 132   } @else {
 133     background: linear-gradient(to bottom, #fff, #eee);
 134   }
 135   width: 110px;
 136   height: 35px;
 137   padding-top: var(--main-padding-top-adjust);
 138 }
 139 #score2_score, #score3_score {
 140   @if $trondisk {
 141     background: linear-gradient(to bottom, #00c8, #00a8);
 142   } @else {
 143     background: linear-gradient(to bottom, #fff8, #eee8);
 144   }
 145 }
 146
 147 /* Clock, to the right of score */
 148 .clockbug, .clockbug2, .clockbug3 {
 149   position: fixed;
 150   font-size: 25px;
 151   left: 352px;
 152   top: 10px;
 153   border-collapse: collapse;
 154   white-space: nowrap;
 155   @if $trondisk {
 156     border: 1px solid black;
 157   } @else {
 158     border: 1px solid #ccc8;
 159   }
 160 }
 161 .clock {
 162   @if $trondisk {
 163     border: 1px solid #000;
 164     background: linear-gradient(to bottom, #00a, #008);
 165   } @else {
 166     border: 1px solid #ccc;
 167     background: linear-gradient(to bottom, #fff, #eee);
 168   }
 169   text-align: center;
 170   height: 35px;
 171   padding-top: var(--main-padding-top-adjust);
 172   width: 90px;
 173 }
 174 #clock2, #clock3 {
 175   border: 1px solid #ccc8;
 176   @if $trondisk {
 177     background: linear-gradient(to bottom, #00a8, #0088);
 178   } @else {
 179     background: linear-gradient(to bottom, #fff8, #eee8);
 180   }
 181   height: 30px;
 182 }
 183 .clockbug-hidden {
 184   -webkit-transform:translateX(-200%);
 185 }
 186 .clockbug-animate-in {
 187   -webkit-animation: from-left 1s ease;
 188 }
 189 .clockbug-animate-out {
 190   -webkit-animation: to-left 1s ease;
 191   -webkit-transform:translateX(-200%);
 192 }
 193
 194 /* Comment, below score */
 195 .commentbug {
 196   position: fixed;
 197   font-size: 20px;
 198   left: 10px;
 199   top: 52px;
 200   border-collapse: collapse;
 201   white-space: nowrap;
 202   @if $trondisk {
 203     border: 1px solid black;
 204   } @else {
 205     border: 1px solid #ccc;
 206   }
 207 }
 208 .comment {
 209   @if $trondisk {
 210     border: 1px solid #000;
 211     background: linear-gradient(to bottom, #00a, #008);
 212   } @else {
 213     border: 1px solid #ccc;
 214     background: linear-gradient(to bottom, #fff, #eee);
 215   }
 216   text-align: center;
 217   height: 30px;
 218   width: 334px;
 219 }
 220
 221 .commentbug-hidden {
 222   -webkit-transform:translateY(-40px);
 223 }
 224 .commentbug-animate-in {
 225   -webkit-animation: from-top 0.5s ease;
 226 }
 227 .commentbug-animate-out {
 228   -webkit-animation: to-top 0.5s ease;
 229   -webkit-transform:translateY(-40px);
 230 }
 231
 232 /* Lower third */
 233 .lowerthird-headline {
 234   position: fixed;
 235   font-size: 40px;
 236   left: 10px;
 237   top: 520px;
 238   border-collapse: collapse;
 239   white-space: nowrap;
 240   @if $trondisk {
 241     border: 2px solid #ccc;
 242     background-image: url(trondisk/lowerthird-bg.png);
 243   } @else {
 244     border: 1px solid #ccc;
 245     background-image: url(generic/lowerthird-bg.png);
 246   }
 247   height: 118px;
 248   font-weight: bold;
 249   width: 1050px;
 250   /*background: linear-gradient(to right, #ccc, #fff 15px); */
 251   color: black;
 252   /* padding-top: 20px; */
 253   display: flex;
 254   align-items: center;
 255   vertical-align: middle;
 256 }
 257 .lowerthird-headline-hidden {
 258   width: 0px;
 259   border-left: 0px;
 260   border-right: 0px;
 261 }
 262 .lowerthird-headline-animate-in {
 263   -webkit-animation: scale-out 1.0s;
 264 }
 265 .lowerthird-headline-animate-out {
 266   -webkit-animation: scale-in 1.0s;
 267 }
 268 .lowerthird-headline-content {
 269   padding-left: 20px;
 270   position: absolute;
 271   padding-top: var(--main-padding-top-large-adjust);
 272 }
 273 .lowerthird-headline-content-hidden {
 274   clip: rect(0px,0px,200px,0px);
 275 }
 276 .lowerthird-headline-content-animate-in {
 277   -webkit-animation: wipe-out 2.0s ease;
 278 }
 279 .lowerthird-headline-content-animate-out {
 280   -webkit-animation: wipe-in 2.0s ease;
 281   clip: rect(0px,0px,200px,0px);
 282   -webkit-animation-fill-mode: both;
 283 }
 284 .lowerthird-subheading {
 285   position: fixed;
 286   font-size: 24px;
 287   left: 40px;
 288   top: 638px;
 289   height: 40px;
 290   width: 600px;
 291   border-collapse: collapse;
 292   white-space: nowrap;
 293   @if $trondisk {
 294     border: 1px solid black;
 295     background-image: url(trondisk/lowerthird-bg2.png);
 296   } @else {
 297     border: 1px solid #6ad;
 298     background-image: url(generic/lowerthird-bg2.png);
 299   }
 300   /*display: flex;
 301   align-items: center; */
 302   /*background: linear-gradient(to right, #44c, #33a 15px); */
 303   display: flex;
 304   align-items: center;
 305 }
 306 .lowerthird-subheading-hidden {
 307   clip: rect(0px,0px,200px,0px);
 308 }
 309 .lowerthird-subheading-animate-in {
 310   -webkit-animation: scale-out-small 1.6s ease;
 311 }
 312 .lowerthird-subheading-animate-out {
 313   -webkit-animation: scale-in-small 1.6s ease;
 314   width: 0px;
 315   border-left: 0px;
 316   -webkit-animation-fill-mode: both;
 317 }
 318 .lowerthird-subheading-content {
 319   position: absolute;
 320   padding-left: 20px;
 321   padding-top: var(--main-padding-top-adjust);
 322 }
 323 .lowerthird-subheading-content-hidden {
 324   width: 0px;
 325   border: 0px;
 326 }
 327 .lowerthird-subheading-content-animate-in {
 328   -webkit-animation: wipe-out 2.2s ease;
 329 }
 330 .lowerthird-subheading-content-animate-out {
 331   -webkit-animation: wipe-in 2.2s ease;
 332   clip: rect(0px,0px,200px,0px);
 333 }
 334 .lowerthird-picture {
 335   position: fixed;
 336   left: 1085px;
 337   top: 490px;
 338   white-space: nowrap;
 339   border: 0px;
 340   height: 170px;
 341   width: 170px;
 342   color: black;
 343 }
 344 .lowerthird-picture img {
 345   height: 170px;
 346   width: 170px;
 347 }
 348 .lowerthird-picture-hidden {
 349   width: 0px;
 350   border-left: 0px;
 351   border-right: 0px;
 352 }
 353 .lowerthird-picture-animate-in {
 354   -webkit-animation: scale-out 1.0s;
 355 }
 356 .lowerthird-picture-animate-out {
 357   -webkit-animation: scale-in-no-border 1.0s;
 358 }
 359 .lowerthird-picture-content {
 360   padding-left: 0px;
 361   position: absolute;
 362 }
 363 .lowerthird-picture-content-hidden {
 364   clip: rect(0px,0px,200px,0px);
 365 }
 366 .lowerthird-picture-content-animate-in {
 367   -webkit-animation: wipe-out 2.0s ease;
 368   -webkit-animation-delay: 0.3s;
 369   -webkit-animation-fill-mode: both;
 370 }
 371 .lowerthird-picture-content-animate-out {
 372   -webkit-animation: wipe-in 2.0s ease;
 373   clip: rect(0px,0px,200px,0px);
 374 }
 375
 376 /* these are hidden when actually run in Nageru */
 377 #area {
 378   position: fixed;
 379   left: 0px;
 380   top: 0px;
 381   width: 1280px;
 382   height: 720px;
 383   background: cyan;
 384 }
 385 #carousel {
 386   z-index: 3;
 387   position: fixed;
 388   font-size: 45px;
 389   /* background: rgba(0, 0, 170, 0.8); */
 390   background: transparent;
 391   top: 10px;
 392   bottom: auto;
 393   left: 50px;
 394   right: 50px;
 395   width: 1180px;
 396   border-spacing: 0px 7px;
 397   text-align: left;
 398   border-collapse: separate;
 399   text-transform: uppercase;
 400   display: none;
 401 }
 402 #carousel thead tr {
 403   text-transform: none;
 404   text-align: center;
 405 }
 406 #carousel thead th {
 407   text-transform: none;
 408   text-align: center;
 409   font-size: 45px;
 410   -webkit-animation: fade-in 1.0s ease;
 411   -webkit-animation-delay: 0.0s;
 412   -webkit-animation-fill-mode: both;
 413 }
 414 #carousel tr.subfooter {
 415   -webkit-animation: fade-in 1.0s ease;
 416   -webkit-animation-delay: 0.25s;
 417   -webkit-animation-fill-mode: both;
 418 }
 419 #carousel tr.subfooter th {
 420   font-size: 25px;
 421 }
 422 #carousel tr {
 423   /* background: rgba(0, 0, 170, 0.8); */
 424   @if $trondisk {
 425     background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
 426   } @else {
 427     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
 428   }
 429   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 430   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 431 }
 432 #carousel tr.footer {
 433   -webkit-animation: fade-in 2.0s ease;
 434   -webkit-animation-delay: 0.5s;
 435   -webkit-animation-fill-mode: both;
 436 }
 437 #carousel td, #carousel th {
 438   padding: 8px;
 439   font-size: 40px;
 440 }
 441 #carousel tr.footer td {
 442   font-size: 20px;
 443   text-transform: none;
 444   text-align: center;
 445 }
 446 #carousel th.rank {
 447   padding-left: 20px;
 448 }
 449 #carousel td.team {
 450   width: auto;
 451 }
 452
 453 /* schedule */
 454 #carousel td.matchup {
 455   padding-left: 0.7em;
 456   width: auto;
 457 }
 458 #carousel td.group {
 459   text-transform: none;
 460 }
 461 #carousel .streamtime {
 462   text-align: center;
 463   text-transform: none;
 464 }
 465
 466 /* roster */
 467 #carousel .playerpadding {
 468   font-size: 25px;
 469   background: rgba(0,0,0,0);
 470 }
 471 #carousel th.playernum, #carousel .playername {
 472   font-size: 35px;
 473 }
 474 #carousel th.playernum {
 475   text-align: center;
 476   padding-right: 8px;
 477   padding-left: 0px; margin-left: 0px;
 478   width: 80px;
 479 }
 480 #carousel .playername {
 481   text-transform: none;
 482   width: auto;
 483 }
 484
 485 .nplayed, .gd, .pts {
 486   text-align: center;
 487 }
 488
 489 #manualcontrols {
 490   z-index: 4;
 491   position: fixed;
 492   top: 250px;
 493 }
 494
 495 /* Animations */
 496 @-webkit-keyframes from-left {
 497   0% {
 498     -webkit-transform:translateX(-200%);
 499   }
 500   100% {
 501     -webkit-transform:translateX(0);
 502   }
 503 }
 504 @-webkit-keyframes to-left {
 505   0% {
 506     -webkit-transform:translateX(0);
 507   }
 508   100% {
 509     -webkit-transform:translateX(-200%);
 510   }
 511 }
 512 @-webkit-keyframes from-top {
 513   0% {
 514     -webkit-transform:translateY(-40px);
 515   }
 516   100% {
 517     -webkit-transform:translateY(0);
 518   }
 519 }
 520 @-webkit-keyframes to-top {
 521   0% {
 522     -webkit-transform:translateY(0);
 523   }
 524   100% {
 525     -webkit-transform:translateY(-40px);
 526   }
 527 }
 528
 529 @-webkit-keyframes scale-out {
 530   0% {
 531     width: 0px;
 532   }
 533   100% {
 534     width: 1050px;
 535   }
 536 }
 537 @-webkit-keyframes scale-in {
 538   0% {
 539     width: 1050px;
 540     @if $trondisk {
 541       border: 2px solid #ccc;
 542     } @else {
 543       border: 1px solid #ccc;
 544     }
 545   }
 546   100% {
 547     width: 0px;
 548     @if $trondisk {
 549       border: 2px solid #ccc;
 550     } @else {
 551       border: 1px solid #ccc;
 552     }
 553   }
 554 }
 555 @-webkit-keyframes scale-in-no-border {
 556   0% {
 557     width: 1050px;
 558   }
 559   100% {
 560     width: 0px;
 561   }
 562 }
 563 @-webkit-keyframes scale-out-small {
 564   0% {
 565     width: 0px;
 566     border: 0px;
 567   }
 568   19.99% {
 569     border: 0px;
 570   }
 571   20% {
 572     width: 0px;
 573     @if $trondisk {
 574       border: 1px solid black;
 575     } @else {
 576       border: 1px solid #6ad;
 577     }
 578   }
 579   100% {
 580     width: 600px;
 581   }
 582 }
 583 @-webkit-keyframes scale-in-small {
 584   0% {
 585     width: 600px;
 586     @if $trondisk {
 587       border: 1px solid black;
 588     } @else {
 589       border: 1px solid #6ad;
 590     }
 591   }
 592   80% {
 593     width: 0px;
 594     border: 1px solid #6ad;
 595   }
 596   80.01% {
 597     border: 0px;
 598   }
 599   100% {
 600     width: 0px;
 601     border: 0px;
 602   }
 603 }
 604 @-webkit-keyframes wipe-out {
 605   0% {
 606     clip: rect(0px,0px,200px,0px);
 607   }
 608   20% {
 609     clip: rect(0px,0px,200px,0px);
 610   }
 611   100% {
 612     clip: rect(0px,1050px,200px,0px);
 613   }
 614 }
 615 @-webkit-keyframes wipe-in {
 616   0% {
 617     clip: rect(0px,1050px,200px,0px);
 618   }
 619   20% {  /* Not symmetrical! */
 620     clip: rect(0px,0px,200px,0px);
 621   }
 622   100% {
 623     clip: rect(0px,0px,200px,0px);
 624   }
 625 }
 626 @-webkit-keyframes fade-in {
 627   0% {
 628     opacity: 0;
 629   }
 630   100% {
 631     opacity: 1;
 632   }
 633 }
 634 @-webkit-keyframes fade-out {
 635   0% {
 636     opacity: 1;
 637   }
 638   100% {
 639     opacity: 0;
 640   }
 641 }