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

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