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   -webkit-animation-fill-mode: both;
 184 }
 185 .lowerthird-subheading-content {
 186   position: absolute;
 187   padding-left: 20px;
 188 }
 189 .lowerthird-subheading-content-hidden {
 190   width: 0px;
 191   border: 0px;
 192 }
 193 .lowerthird-subheading-content-animate-in {
 194   -webkit-animation: wipe-out 2.2s ease;
 195 }
 196 .lowerthird-subheading-content-animate-out {
 197   -webkit-animation: wipe-in 2.2s ease;
 198   clip: rect(0px,0px,200px,0px);
 199 }
 200
 201 /* these are hidden when actually run in casparcg */
 202 #area {
 203   position: fixed;
 204   left: 0px;
 205   top: 0px;
 206   width: 1280px;
 207   height: 720px;
 208   background: cyan;
 209 }
 210 #carousel {
 211   z-index: 3;
 212   position: fixed;
 213   top: 250px;
 214   font-size: 50px;
 215   /* background: rgba(0, 0, 170, 0.8); */
 216   background: transparent;
 217   top: 20px;
 218   left: 50px;
 219   right: 50px;
 220   width: 1180px;
 221   border-spacing: 0px 7px;
 222   text-align: left;
 223   border-collapse: separate;
 224   text-transform: uppercase;
 225   display: none;
 226 }
 227 #carousel thead tr {
 228   text-transform: none;
 229   text-align: center;
 230 }
 231 #carousel thead th {
 232   text-transform: none;
 233   text-align: center;
 234   font-size: 50px;
 235   -webkit-animation: fade-in 1.0s ease;
 236   -webkit-animation-delay: 0.0s;
 237   -webkit-animation-fill-mode: both;
 238 }
 239 #carousel tr.subfooter {
 240   -webkit-animation: fade-in 1.0s ease;
 241   -webkit-animation-delay: 0.25s;
 242   -webkit-animation-fill-mode: both;
 243 }
 244 #carousel tr {
 245   /* background: rgba(0, 0, 170, 0.8); */
 246   background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
 247   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 248   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 249 }
 250 #carousel tr.footer {
 251   -webkit-animation: fade-in 2.0s ease;
 252   -webkit-animation-delay: 0.5s;
 253   -webkit-animation-fill-mode: both;
 254 }
 255 #carousel td, #carousel th {
 256   padding: 8px;
 257   font-size: 40px;
 258 }
 259 #carousel tr.footer td {
 260   font-size: 20px;
 261   text-transform: none;
 262   text-align: center;
 263 }
 264 #carousel th.rank {
 265   padding-left: 20px;
 266 }
 267 #carousel td.team {
 268   width: auto;
 269 }
 270
 271 /* schedule */
 272 #carousel td.matchup {
 273   padding-left: 0.7em;
 274   width: auto;
 275 }
 276 #carousel td.group {
 277   text-transform: none;
 278 }
 279 #carousel .streamtime {
 280   text-align: center;
 281 }
 282
 283 .nplayed, .gd, .pts {
 284   text-align: center;
 285 }
 286
 287 #manualcontrols {
 288   z-index: 4;
 289   position: fixed;
 290   top: 250px;
 291 }
 292
 293 /* Animations */
 294 @-webkit-keyframes from-left {
 295   0% {
 296     -webkit-transform:translateX(-200%);
 297   }
 298   100% {
 299     -webkit-transform:translateX(0);
 300   }
 301 }
 302 @-webkit-keyframes to-left {
 303   0% {
 304     -webkit-transform:translateX(0);
 305   }
 306   100% {
 307     -webkit-transform:translateX(-200%);
 308   }
 309 }
 310 @-webkit-keyframes from-top {
 311   0% {
 312     -webkit-transform:translateY(-40px);
 313   }
 314   100% {
 315     -webkit-transform:translateY(0);
 316   }
 317 }
 318 @-webkit-keyframes to-top {
 319   0% {
 320     -webkit-transform:translateY(0);
 321   }
 322   100% {
 323     -webkit-transform:translateY(-40px);
 324   }
 325 }
 326
 327 @-webkit-keyframes scale-out {
 328   0% {
 329     width: 0px;
 330   }
 331   100% {
 332     width: 1050px;
 333   }
 334 }
 335 @-webkit-keyframes scale-in {
 336   0% {
 337     width: 1050px;
 338     border: 2px solid #ccc;
 339   }
 340   100% {
 341     width: 0px;
 342     border: 2px solid #ccc;
 343   }
 344 }
 345 @-webkit-keyframes scale-out-small {
 346   0% {
 347     width: 0px;
 348     border: 0px;
 349   }
 350   19.99% {
 351     border: 0px;
 352   }
 353   20% {
 354     width: 0px;
 355     border: 1px solid black;
 356   }
 357   100% {
 358     width: 500px;
 359   }
 360 }
 361 @-webkit-keyframes scale-in-small {
 362   0% {
 363     width: 500px;
 364     border: 1px solid black;
 365   }
 366   80% {
 367     width: 0px;
 368     border: 1px solid black;
 369   }
 370   80.01% {
 371     border: 0px;
 372   }
 373   100% {
 374     width: 0px;
 375     border: 0px;
 376   }
 377 }
 378 @-webkit-keyframes wipe-out {
 379   0% {
 380     clip: rect(0px,0px,200px,0px);
 381   }
 382   20% {
 383     clip: rect(0px,0px,200px,0px);
 384   }
 385   100% {
 386     clip: rect(0px,1050px,200px,0px);
 387   }
 388 }
 389 @-webkit-keyframes wipe-in {
 390   0% {
 391     clip: rect(0px,1050px,200px,0px);
 392   }
 393   20% {  /* Not symmetrical! */
 394     clip: rect(0px,0px,200px,0px);
 395   }
 396   100% {
 397     clip: rect(0px,0px,200px,0px);
 398   }
 399 }
 400 @-webkit-keyframes fade-in {
 401   0% {
 402     opacity: 0;
 403   }
 404   100% {
 405     opacity: 1;
 406   }
 407 }
 408 @-webkit-keyframes fade-out {
 409   0% {
 410     opacity: 1;
 411   }
 412   100% {
 413     opacity: 0;
 414   }
 415 }