Update icons

Adding alpha channel:
convert aperture_noborder_gradient.png -fuzz 14% -transparent white aperture_noborder_gradient.png
convert coop_noborder.jpg coop_noborder.png
convert coop_noborder.png -fuzz 14% -transparent white coop_noborder.png
convert coop_noborder_gradient.jpg coop_noborder_gradient.png
convert coop_noborder_gradient.png -fuzz 14% -transparent white coop_noborder_gradient.png
convert cube_noborder_gradient.jpg cube_noborder_gradient.png
convert cube_noborder_gradient.png -fuzz 14% -transparent white cube_noborder_gradient.png
convert cup_noborder.jpg cup_noborder.png
convert cup_noborder.png -fuzz 14% -transparent white cup_noborder.png
convert sp_noborder.jpg sp_noborder.png
convert sp_noborder.png -fuzz 14% -transparent white sp_noborder.png
convert sp_noborder_gradient.jpg sp_noborder_gradient.png
convert sp_noborder_gradient.png -fuzz 14% -transparent white sp_noborder_gradient.png
convert time_noborder_gradient.jpg time_noborder_gradient.png
convert time_noborder_gradient.png -fuzz 14% -transparent white time_noborder_gradient.png

classes/View.php

@@ -147,7 +147,7 @@ public function __construct() {
         ]);
 
         $this->addJs(["/js/popover.js"]);
-        $this->addCss(["/style/style.css?v=0.4"]);
+        $this->addCss(["/style/style.css?v=0.5"]);
     }
     public function addJs($path) {
         $this->js[] = $path + [1 => null];

public/style/style.css

@@ -238,13 +238,13 @@ a:hover, a:focus {
     margin: 0px;
 }
 #sp_icon {
-    background: url("/images/sp_noborder_gradient.jpg");
+    background: url("/images/sp_noborder_gradient.png");
 }
 #coop_icon {
-    background: url("/images/coop_noborder_gradient.jpg");
+    background: url("/images/coop_noborder_gradient.png");
 }
 #cube_icon {
-    background: url("/images/cube_noborder_gradient.jpg");
+    background: url("/images/cube_noborder_gradient.png");
     background-size: 29px 29px;
 }
 #lp_icon {
@@ -255,7 +255,7 @@ a:hover, a:focus {
     background-size: 29px 29px;
 }
 #time_icon {
-    background: url("/images/time_noborder_gradient.jpg");
+    background: url("/images/time_noborder_gradient.png");
 }
 #loginsteam {
     display: block;

views/parts/navigation.phtml

@@ -17,13 +17,13 @@
     <ul style="width:140px">
       <li>
           <a href="/aggregated/overall" style="height: 29px">
-            <div class="nav_icon" style="background: url('/images/cup_noborder.jpg'); background-size: 29px 29px;"></div>
+            <div class="nav_icon" style="background: url('/images/cup_noborder.png'); background-size: 29px 29px;"></div>
             <div class="btnLabel">Overall</div>
           </a>
       </li>
       <li class="nav_dropdown">
           <div style="height: 29px">
-              <div class="nav_icon" style="background: url('/images/sp_noborder.jpg'); background-size: 29px 29px;"></div>
+              <div class="nav_icon" style="background: url('/images/sp_noborder.png'); background-size: 29px 29px;"></div>
               <div class="btnLabel">Single Player</div>
           </div>
           <ul style="width:165px">
@@ -45,7 +45,7 @@
       </li>
       <li class="nav_dropdown">
           <div style="height: 29px">
-              <div class="nav_icon" style="background: url('/images/coop_noborder.jpg'); background-size: 29px 29px;"></div>
+              <div class="nav_icon" style="background: url('/images/coop_noborder.png'); background-size: 29px 29px;"></div>
               <div class="btnLabel">Cooperative</div>
           </div>
           <ul style="width:185px">
@@ -134,13 +134,13 @@
 <!--    <ul style="width:150px">-->
 <!--        <li>-->
 <!--            <a href="/lp/sp" style="height: 29px">-->
-<!--                <div class="nav_icon" style="background: url('/images/sp_noborder.jpg'); background-size: 29px 29px;"></div>-->
+<!--                <div class="nav_icon" style="background: url('/images/sp_noborder.png'); background-size: 29px 29px;"></div>-->
 <!--                <div class="label">Single Player</div>-->
 <!--            </a>-->
 <!--        </li>-->
 <!--        <li>-->
 <!--            <a href="/lp/coop" style="height: 29px">-->
-<!--                <div class="nav_icon" style="background: url('/images/coop_noborder.jpg'); background-size: 29px 29px;"></div>-->
+<!--                <div class="nav_icon" style="background: url('/images/coop_noborder.png'); background-size: 29px 29px;"></div>-->
 <!--                <div class="label">Cooperative</div>-->
 <!--            </a>-->
 <!--        </li>-->