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

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