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