Improved score display

assets/css/score.css

@@ -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;
+    }
 }

includes/score_counter.php

@@ -1,10 +1,6 @@
 <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 = '';
@@ -14,13 +10,13 @@
             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">
+            <div class="score-usa <?= $usaClass ?>">
+                <?= $scoreUSA ?>
+            </div>
+            <div class="score-separator">|</div>
+            <div class="score-urss <?= $urssClass ?>">
+                <?= $scoreURSS ?>
+            </div>
         </a>
     </div>
 </div>
-</div>