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

   1 * {
   2   -webkit-box-sizing: border-box;
   3   Box-Sizing: border-box;
   4   -webkit-backface-visibility: hidden;
   5   -webkit-transition: translate3d(0,0,0);
   6 }
   7 html, body {
   8   width: 1280px;
   9   height: 720px;
  10   margin: 0;
  11   padding: 0;
  12   background: transparent;
  13   overflow: hidden;
  14   -webkit-font-smoothing: antialiased !important;
  15 }
  16 body {
  17   font-family: 'Lato', sans-serif;
  18   color: white;
  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: 3px solid black;
  30   z-index: 1;
  31 }
  32 .scorebug td {
  33   border: 3px solid #008;
  34 }
  35 .team1color, .team2color {
  36   width: 15px;
  37   margin: 5px;
  38 }
  39 .team1color {
  40   background: red;
  41 }
  42 .team2color {
  43   background: green;
  44 }
  45 .team1, .team2 {
  46   font-weight: bold;
  47   width: 100px;
  48   text-align: center;
  49   height: 35px;
  50   background: #00a;
  51 }
  52 .score {
  53   text-align: center;
  54   background: #00c;
  55   width: 110px;
  56   height: 35px;
  57 }
  58
  59 /* Clock, to the right of score */
  60 .clockbug {
  61   position: fixed;
  62   font-size: 25px;
  63   left: 360px;
  64   top: 10px;
  65   border-collapse: collapse;
  66   white-space: nowrap;
  67   border: 3px solid black;
  68 }
  69 .clock {
  70   border: 3px solid #008;
  71   background: #00a;
  72   text-align: center;
  73   height: 35px;
  74   width: 90px;
  75 }
  76 .clockbug-hidden {
  77   -webkit-transform:translateX(-200%);
  78 }
  79 .clockbug-animate-in {
  80   -webkit-animation: from-left 1s ease;
  81 }
  82 .clockbug-animate-out {
  83   -webkit-animation: to-left 1s ease;
  84   -webkit-transform:translateX(-200%);
  85 }
  86
  87 /* Comment, below score */
  88 .commentbug {
  89   position: fixed;
  90   font-size: 20px;
  91   left: 10px;
  92   top: 52px;
  93   border-collapse: collapse;
  94   white-space: nowrap;
  95   border: 3px solid black;
  96 }
  97 .comment {
  98   border: 3px solid #008;
  99   background: #00a;
 100   text-align: center;
 101   height: 30px;
 102   width: 340px;
 103 }
 104
 105 .commentbug-hidden {
 106   -webkit-transform:translateY(-40px);
 107 }
 108 .commentbug-animate-in {
 109   -webkit-animation: from-top 0.5s ease;
 110 }
 111 .commentbug-animate-out {
 112   -webkit-animation: to-top 0.5s ease;
 113   -webkit-transform:translateY(-40px);
 114 }
 115
 116 /* Lower third */
 117 .lowerthird-headline {
 118   position: fixed;
 119   font-size: 40px;
 120   left: 10px;
 121   top: 520px;
 122   border-collapse: collapse;
 123   white-space: nowrap;
 124   border: 2px solid #ccc;
 125   height: 118px;
 126   font-weight: bold;
 127   width: 1050px;
 128   /*background: linear-gradient(to right, #ccc, #fff 15px); */
 129   background-image: url(lowerthird-bg.png);
 130   color: black;
 131   /* padding-top: 20px; */
 132 }
 133 .lowerthird-headline-hidden {
 134   width: 0px;
 135   border-left: 0px;
 136   border-right: 0px;
 137 }
 138 .lowerthird-headline-animate-in {
 139   -webkit-animation: scale-out 1.0s;
 140 }
 141 .lowerthird-headline-animate-out {
 142   -webkit-animation: scale-in 1.0s;
 143 }
 144 .lowerthird-headline-content {
 145   padding-left: 20px;
 146   position: absolute;
 147 }
 148 .lowerthird-headline-content-hidden {
 149   clip: rect(0px,0px,200px,0px);
 150 }
 151 .lowerthird-headline-content-animate-in {
 152   -webkit-animation: wipe-out 2.0s ease;
 153 }
 154 .lowerthird-headline-content-animate-out {
 155   -webkit-animation: wipe-in 2.0s ease;
 156   clip: rect(0px,0px,200px,0px);
 157 }
 158 .lowerthird-subheading {
 159   position: fixed;
 160   font-size: 24px;
 161   left: 40px;
 162   top: 637px;
 163   height: 40px;
 164   width: 500px;
 165   border-collapse: collapse;
 166   white-space: nowrap;
 167   border: 1px solid black;
 168   /*display: flex;
 169   align-items: center; */
 170   /*background: linear-gradient(to right, #44c, #33a 15px); */
 171   background-image: url(lowerthird-bg2.png);
 172 }
 173 .lowerthird-subheading-hidden {
 174   clip: rect(0px,0px,200px,0px);
 175 }
 176 .lowerthird-subheading-animate-in {
 177   -webkit-animation: scale-out-small 1.6s ease;
 178 }
 179 .lowerthird-subheading-animate-out {
 180   -webkit-animation: scale-in-small 1.6s ease;
 181   width: 0px;
 182   border-left: 0px;
 183 }
 184 .lowerthird-subheading-content {
 185   position: absolute;
 186   padding-left: 20px;
 187 }
 188 .lowerthird-subheading-content-hidden {
 189   width: 0px;
 190   border: 0px;
 191 }
 192 .lowerthird-subheading-content-animate-in {
 193   -webkit-animation: wipe-out 2.2s ease;
 194 }
 195 .lowerthird-subheading-content-animate-out {
 196   -webkit-animation: wipe-in 2.2s ease;
 197   clip: rect(0px,0px,200px,0px);
 198 }
 199
 200 /* these are hidden when actually run in casparcg */
 201 #area {
 202   position: fixed;
 203   left: 0px;
 204   top: 0px;
 205   width: 1280px;
 206   height: 720px;
 207   background: cyan;
 208 }
 209 #carousel {
 210   z-index: 3;
 211   position: fixed;
 212   top: 250px;
 213   font-size: 50px;
 214   /* background: rgba(0, 0, 170, 0.8); */
 215   background: transparent;
 216   top: 20px;
 217   left: 50px;
 218   right: 50px;
 219   width: 1180px;
 220   border-spacing: 0px 7px;
 221   text-align: left;
 222   border-collapse: separate;
 223   text-transform: uppercase;
 224   display: none;
 225 }
 226 #carousel thead tr {
 227   text-transform: none;
 228   text-align: center;
 229 }
 230 #carousel thead th {
 231   text-transform: none;
 232   text-align: center;
 233   font-size: 50px;
 234   -webkit-animation: fade-in 1.0s ease;
 235   -webkit-animation-delay: 0.0s;
 236   -webkit-animation-fill-mode: both;
 237 }
 238 #carousel tr.subfooter {
 239   -webkit-animation: fade-in 1.0s ease;
 240   -webkit-animation-delay: 0.25s;
 241   -webkit-animation-fill-mode: both;
 242 }
 243 #carousel tr {
 244   /* background: rgba(0, 0, 170, 0.8); */
 245   background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
 246   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 247   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 248 }
 249 #carousel tr.footer {
 250   -webkit-animation: fade-in 2.0s ease;
 251   -webkit-animation-delay: 0.5s;
 252   -webkit-animation-fill-mode: both;
 253 }
 254 #carousel td, #carousel th {
 255   padding: 8px;
 256   font-size: 40px;
 257 }
 258 #carousel tr.footer td {
 259   font-size: 20px;
 260   text-transform: none;
 261   text-align: center;
 262 }
 263 #carousel th.rank {
 264   padding-left: 20px;
 265 }
 266 #carousel td.team {
 267   width: auto;
 268 }
 269
 270 /* schedule */
 271 #carousel td.matchup {
 272   padding-left: 0.7em;
 273   width: auto;
 274 }
 275 #carousel td.group {
 276   text-transform: none;
 277 }
 278 #carousel .streamtime {
 279   text-align: center;
 280 }
 281
 282 .nplayed, .gd, .pts {
 283   text-align: center;
 284 }
 285
 286 #manualcontrols {
 287   z-index: 4;
 288   position: fixed;
 289   top: 250px;
 290 }
 291
 292 /* Animations */
 293 @-webkit-keyframes from-left {
 294   0% {
 295     -webkit-transform:translateX(-200%);
 296   }
 297   100% {
 298     -webkit-transform:translateX(0);
 299   }
 300 }
 301 @-webkit-keyframes to-left {
 302   0% {
 303     -webkit-transform:translateX(0);
 304   }
 305   100% {
 306     -webkit-transform:translateX(-200%);
 307   }
 308 }
 309 @-webkit-keyframes from-top {
 310   0% {
 311     -webkit-transform:translateY(-40px);
 312   }
 313   100% {
 314     -webkit-transform:translateY(0);
 315   }
 316 }
 317 @-webkit-keyframes to-top {
 318   0% {
 319     -webkit-transform:translateY(0);
 320   }
 321   100% {
 322     -webkit-transform:translateY(-40px);
 323   }
 324 }
 325
 326 @-webkit-keyframes scale-out {
 327   0% {
 328     width: 0px;
 329   }
 330   100% {
 331     width: 1050px;
 332   }
 333 }
 334 @-webkit-keyframes scale-in {
 335   0% {
 336     width: 1050px;
 337     border: 2px solid #ccc;
 338   }
 339   100% {
 340     width: 0px;
 341     border: 2px solid #ccc;
 342   }
 343 }
 344 @-webkit-keyframes scale-out-small {
 345   0% {
 346     width: 0px;
 347     border: 0px;
 348   }
 349   19.99% {
 350     border: 0px;
 351   }
 352   20% {
 353     width: 0px;
 354     border: 1px solid black;
 355   }
 356   100% {
 357     width: 500px;
 358   }
 359 }
 360 @-webkit-keyframes scale-in-small {
 361   0% {
 362     width: 500px;
 363     border: 1px solid black;
 364   }
 365   80% {
 366     width: 0px;
 367     border: 1px solid black;
 368   }
 369   80.01% {
 370     border: 0px;
 371   }
 372   100% {
 373     width: 0px;
 374     border: 0px;
 375   }
 376 }
 377 @-webkit-keyframes wipe-out {
 378   0% {
 379     clip: rect(0px,0px,200px,0px);
 380   }
 381   20% {
 382     clip: rect(0px,0px,200px,0px);
 383   }
 384   100% {
 385     clip: rect(0px,1050px,200px,0px);
 386   }
 387 }
 388 @-webkit-keyframes wipe-in {
 389   0% {
 390     clip: rect(0px,1050px,200px,0px);
 391   }
 392   20% {  /* Not symmetrical! */
 393     clip: rect(0px,0px,200px,0px);
 394   }
 395   100% {
 396     clip: rect(0px,0px,200px,0px);
 397   }
 398 }
 399 @-webkit-keyframes fade-in {
 400   0% {
 401     opacity: 0.0001;
 402   }
 403   100% {
 404     opacity: 1;
 405   }
 406 }