app/assets/stylesheets/scoreboard/_ongoing-match.scss
.scoreboard-ongoing-match {
background-color: shade($green, 10%);
@include radial-gradient(
circle at 50% 50%,
transparent 40%,
shade(transparent, 15%) 75%,
shade(transparent, 35%)
);
}
.ongoing-match-frame {
position: relative;
width: 100%;
height: 95%;
}
.ongoing-match-next-match {
position: absolute;
width: 100%;
height: 5%;
bottom: 0;
background-color: shade($dark-grey, 10%);
color: $off-white;
font-size: 32px;
line-height: 54px;
text-align: center;
font-weight: bold;
}
.ongoing-match-versus {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
color: $off-white;
font-weight: bold;
font-size: 128px;
text-shadow: 0 0 15px rgba($dark-grey, 0.35);
}
.ongoing-match-players {
width: 100%;
height: 100%;
@include display(flex);
@include flex-direction(row);
}
.ongoing-match-player {
@include flex-grow(1);
position: relative;
&.receiving,
&.serving,
&.no-service {
@include radial-gradient(
circle at 50% 50%,
transparent 50%,
shade(transparent, 5%) 75%,
shade(transparent, 25%)
);
}
&.receiving {
background-color: #CCC;
}
&.serving {
background-color: $blue;
}
&.no-service {
background-image: none;
}
.name {
position: absolute;
top: 0;
padding: 20px 40px;
font-size: 48px;
font-weight: bold;
color: $off-white;
text-shadow: 0 0 15px rgba($dark-grey, 0.5);
}
&.away .name { right: 0; }
&.home .name { left: 0; }
.score {
$color: $off-white;
position: absolute;
bottom: 0;
font-size: 512px;
color: $color;
text-shadow: 0 0 15px rgba($dark-grey, 0.5);
line-height: 1;
font-weight: bold;
padding: 0 50px;
@include transition(transform 150ms);
&.tiny {
@include transform(scale(0));
}
}
&.away .score { right: 0; }
&.home .score { left: 0; }
.portrait {
width: 100%;
height: 100%;
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
@include filter(drop-shadow(0 0 15px rgba($dark-grey, 0.5)));
}
}