X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=score.css;h=ba0981afba6e098e51b3e7299d951fbff638669b;hb=a863d093841773e0e17cc4965c073b443e195071;hp=5e77ae89d798e925bd1368e86fd421595baf1f47;hpb=fed10ae88ec2902742be3f2d35d40e4bca9c5942;p=ultimatescore diff --git a/score.css b/score.css index 5e77ae8..ba0981a 100644 --- a/score.css +++ b/score.css @@ -1,17 +1,17 @@ * { - -webkit-box-sizing: border-box; - Box-Sizing: border-box; - -webkit-backface-visibility: hidden; - -webkit-transition: translate3d(0,0,0); + box-sizing: border-box; } -html, body { +body { width: 1280px; height: 720px; margin: 0; padding: 0; background: transparent; overflow: hidden; - -webkit-font-smoothing: antialiased !important; + + /* 720p -> 1080p */ + /* transform: scale(1.5); + transform-origin: top left; */ } body { font-family: 'Lato', sans-serif; @@ -26,32 +26,34 @@ body { top: 10px; border-collapse: collapse; white-space: nowrap; - border: 3px solid black; + border: 1px solid black; z-index: 1; } .scorebug td { - border: 3px solid #008; + border: 1px solid #000; } .team1color, .team2color { - width: 15px; + width: 12px; margin: 5px; } .team1color { - background: red; + background-color: red; + background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0)); } .team2color { - background: green; + background-color: green; + background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0)); } .team1, .team2 { font-weight: bold; width: 100px; text-align: center; height: 35px; - background: #00a; + background: linear-gradient(to bottom, #00a, #008); } .score { text-align: center; - background: #00c; + background: linear-gradient(to bottom, #00c, #00a); width: 110px; height: 35px; } @@ -60,15 +62,15 @@ body { .clockbug { position: fixed; font-size: 25px; - left: 360px; + left: 352px; top: 10px; border-collapse: collapse; white-space: nowrap; - border: 3px solid black; + border: 1px solid black; } .clock { - border: 3px solid #008; - background: #00a; + border: 1px solid #000; + background: linear-gradient(to bottom, #00a, #008); text-align: center; height: 35px; width: 90px; @@ -92,14 +94,14 @@ body { top: 52px; border-collapse: collapse; white-space: nowrap; - border: 3px solid black; + border: 1px solid black; } .comment { - border: 3px solid #008; - background: #00a; + border: 1px solid #000; + background: linear-gradient(to bottom, #00a, #008); text-align: center; height: 30px; - width: 340px; + width: 334px; } .commentbug-hidden { @@ -197,6 +199,43 @@ body { -webkit-animation: wipe-in 2.2s ease; clip: rect(0px,0px,200px,0px); } +.lowerthird-picture { + position: fixed; + left: 1085px; + top: 490px; + white-space: nowrap; + border: 0px; + height: 170px; + width: 170px; + color: black; +} +.lowerthird-picture-hidden { + width: 0px; + border-left: 0px; + border-right: 0px; +} +.lowerthird-picture-animate-in { + -webkit-animation: scale-out 1.0s; +} +.lowerthird-picture-animate-out { + -webkit-animation: scale-in-no-border 1.0s; +} +.lowerthird-picture-content { + padding-left: 0px; + position: absolute; +} +.lowerthird-picture-content-hidden { + clip: rect(0px,0px,200px,0px); +} +.lowerthird-picture-content-animate-in { + -webkit-animation: wipe-out 2.0s ease; + -webkit-animation-delay: 0.3s; + -webkit-animation-fill-mode: both; +} +.lowerthird-picture-content-animate-out { + -webkit-animation: wipe-in 2.0s ease; + clip: rect(0px,0px,200px,0px); +} /* these are hidden when actually run in casparcg */ #area { @@ -246,7 +285,7 @@ body { } #carousel tr { /* background: rgba(0, 0, 170, 0.8); */ - background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8)); + background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9)); /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */ -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease; } @@ -281,6 +320,26 @@ body { } #carousel .streamtime { text-align: center; + text-transform: none; +} + +/* roster */ +#carousel .playerpadding { + font-size: 25px; + background: rgba(0,0,0,0); +} +#carousel th.playernum, #carousel .playername { + font-size: 35px; +} +#carousel th.playernum { + text-align: center; + padding-right: 8px; + padding-left: 0px; margin-left: 0px; + width: 80px; +} +#carousel .playername { + text-transform: none; + width: auto; } .nplayed, .gd, .pts { @@ -345,6 +404,14 @@ body { border: 2px solid #ccc; } } +@-webkit-keyframes scale-in-no-border { + 0% { + width: 1050px; + } + 100% { + width: 0px; + } +} @-webkit-keyframes scale-out-small { 0% { width: 0px;