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;
}
.score-display {
.score-container {
background: none;
border-radius: 10px;
display: inline-flex;
vertical-align: center;
font-family: 'Russo One', sans-serif;
height: 40px;
margin: 0;
}
.score-display a {
.score-container a {
display: inline-flex;
vertical-align: middle;
align-items: center;
height: 40px;
}
.score-usa, .score-urss {
font-size: 20px;
line-height: 40px;
}
.winning {
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{
color: #1a5dad;
color: #292952;
background: url("../images/usa.png") no-repeat right ;
background-size: auto 100%;
text-shadow: 0 0 10px #fff;
}
.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{
font-size: 20px;
}
.score-logo {
height: 30px;
margin: 0;
font-size: 30px;
line-height: 40px;
text-align: center;
color: #fff;
text-shadow: 0 0 10px #000;
}
#main-score .score-logo {
@ -80,11 +91,15 @@
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;
line-height: 80px;
}
#main-score .score-separator {
font-size: 55px;
}
#main-score .winning {
font-size: 50px;
}
@ -96,4 +111,10 @@
#mobile-score {
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 ?>">
<img class="title-image" src="assets/images/titre-site-accueil.svg">
<div class="score-container">
<div class="score-display">
<a href="usa.php">
<img class="score-logo" src="assets/images/usa_logo.png">
</a>
<a href="stats.php">
<?php
$usaClass = '';
$urssClass = '';
if ($scoreUSA > $scoreURSS)
$usaClass = 'winning';
else if ($scoreUSA < $scoreURSS)
$urssClass = 'winning';
?>
<div class="score-usa <?= $usaClass ?>"><?= $scoreUSA ?></div>
<div class="score-separator">/</div>
<div class="score-urss <?= $urssClass ?>"><?= $scoreURSS ?></div>
</a>
<a href="urss.php">
<img class="score-logo" src="assets/images/urss_logo.png">
</a>
</div>
<a href="stats.php">
<?php
$usaClass = '';
$urssClass = '';
if ($scoreUSA > $scoreURSS)
$usaClass = 'winning';
else if ($scoreUSA < $scoreURSS)
$urssClass = 'winning';
?>
<div class="score-usa <?= $usaClass ?>">
<?= $scoreUSA ?>
</div>
<div class="score-separator">|</div>
<div class="score-urss <?= $urssClass ?>">
<?= $scoreURSS ?>
</div>
</a>
</div>
</div>