Improved score display

This commit is contained in:
Keplyx 2018-08-27 09:36:01 +02:00
parent ce0164f3ab
commit 2f58d192b7
2 changed files with 56 additions and 39 deletions

View file

@ -32,47 +32,58 @@
display: none; display: none;
} }
.score-display { .score-container {
background: none; background: none;
border-radius: 10px; border-radius: 10px;
display: inline-flex; display: inline-flex;
vertical-align: center; vertical-align: center;
font-family: 'Russo One', sans-serif; font-family: 'Russo One', sans-serif;
height: 40px;
margin: 0; margin: 0;
} }
.score-display a { .score-container a {
display: inline-flex; display: inline-flex;
vertical-align: middle; vertical-align: middle;
align-items: center; align-items: center;
height: 40px;
}
.score-usa, .score-urss {
font-size: 20px;
line-height: 40px;
} }
.winning { .winning {
font-size: 23px; font-size: 23px;
} }
.score-usa, .score-urss {
font-size: 20px;
line-height: 40px;
text-align: center;
vertical-align: middle;
display: flex;
padding: 5px;
margin: 5px;
border-radius: 10px;
}
.score-usa{ .score-usa{
color: #1a5dad; color: #292952;
background: url("../images/usa.png") no-repeat right ;
background-size: auto 100%;
text-shadow: 0 0 10px #fff;
} }
.score-urss{ .score-urss{
color: #d72229; color: #fbce15;
background: url("../images/urss.png") no-repeat left ;
background-size: auto 100%;
text-shadow: 0 0 5px #000;
} }
.score-separator{ .score-separator{
font-size: 20px; font-size: 30px;
} line-height: 40px;
text-align: center;
.score-logo { color: #fff;
height: 30px; text-shadow: 0 0 10px #000;
margin: 0;
} }
#main-score .score-logo { #main-score .score-logo {
@ -80,11 +91,15 @@
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
} }
#main-score .score-usa, #main-score .score-urss { #main-score .score-usa, #main-score .score-urss, #main-score .score-separator {
font-size: 40px; font-size: 40px;
line-height: 80px; line-height: 80px;
} }
#main-score .score-separator {
font-size: 55px;
}
#main-score .winning { #main-score .winning {
font-size: 50px; font-size: 50px;
} }
@ -96,4 +111,10 @@
#mobile-score { #mobile-score {
display: block; display: block;
} }
#main-score .score-container a {
display: block;
}
#main-score .score-separator {
display: none;
}
} }

View file

@ -1,26 +1,22 @@
<div class="score-counter" id="<?= $platformID ?>"> <div class="score-counter" id="<?= $platformID ?>">
<img class="title-image" src="assets/images/titre-site-accueil.svg"> <img class="title-image" src="assets/images/titre-site-accueil.svg">
<div class="score-container"> <div class="score-container">
<div class="score-display"> <a href="stats.php">
<a href="usa.php"> <?php
<img class="score-logo" src="assets/images/usa_logo.png"> $usaClass = '';
</a> $urssClass = '';
<a href="stats.php"> if ($scoreUSA > $scoreURSS)
<?php $usaClass = 'winning';
$usaClass = ''; else if ($scoreUSA < $scoreURSS)
$urssClass = ''; $urssClass = 'winning';
if ($scoreUSA > $scoreURSS) ?>
$usaClass = 'winning'; <div class="score-usa <?= $usaClass ?>">
else if ($scoreUSA < $scoreURSS) <?= $scoreUSA ?>
$urssClass = 'winning'; </div>
?> <div class="score-separator">|</div>
<div class="score-usa <?= $usaClass ?>"><?= $scoreUSA ?></div> <div class="score-urss <?= $urssClass ?>">
<div class="score-separator">/</div> <?= $scoreURSS ?>
<div class="score-urss <?= $urssClass ?>"><?= $scoreURSS ?></div> </div>
</a> </a>
<a href="urss.php">
<img class="score-logo" src="assets/images/urss_logo.png">
</a>
</div>
</div> </div>
</div> </div>