Small interface tweaks

auth.php

@@ -64,6 +64,7 @@ if (!$user->isValid && ($config::$require_authentication || defined('headless'))
         <link rel="manifest" href="manifest.json">
         <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
         <link rel="shortcut icon" href="icons/favicon.ico">
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&amp;subset=cyrillic" rel="stylesheet">
         <meta name="msapplication-config" content="browserconfig.xml">
         <meta name="theme-color" content="#ffffff">
         <link rel="stylesheet" type="text/css" href="css/main.css">

css/main.css

@@ -34,7 +34,6 @@ a {
 }
 select {
   width: 150px;
-  /*font-size: 0.6em;*/
   font-weight: normal;
   padding-top: 0.2em;
 }
@@ -65,8 +64,10 @@ select {
   height: 100%;
 }
 #menu {
-  font-family: Verdana, sans-serif;
+  font-family: 'Open Sans', Verdana, sans-serif;
-  font-size: 0.6em;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.7em;
   font-weight: bold;
   color: white;
   float: right;
@@ -116,7 +117,7 @@ select {
   margin-bottom: -2px;
 }
 #login {
-  font-family: Verdana, sans-serif;
+  font-family: 'Open Sans', Verdana, sans-serif;
   position: relative;
   top: 10%;
   background-color: #444;
@@ -140,8 +141,8 @@ select {
   padding-top: 1.2em;
   color: yellow;
 }
-#popup * {
+#popup {
-  font-family: Roboto, Verdana, sans-serif;
+  font-family: 'Open Sans', Verdana, sans-serif;
 }
 #pheader {
   float: left;
@@ -191,7 +192,6 @@ select {
   bottom: 175px;
   right: 175px;
   z-index: 10001;
-  font-family: Verdana, sans-serif;
   font-size: 0.8em;
 }
 
@@ -206,6 +206,7 @@ select {
 }
 
 #modal {
+  font-family: 'Open Sans', Verdana, sans-serif;
   display: block;
   position: fixed;
   z-index: 10010;
@@ -235,7 +236,8 @@ select {
 
 #modal-body {
   font-size: 0.9em;
-  font-family: Verdana, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   color: white;
   background-color: rgba(102, 102, 102, 0.9);
   margin: 0 auto 15% auto;
@@ -265,7 +267,15 @@ select {
 }
 
 button {
+  color: white;
+  background-color: #434343;
   cursor: pointer;
+  border: 1px solid white;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  font-weight: bold;
+  margin-right: 5px;
 }
 
 .red-button {

index.php

@@ -65,6 +65,7 @@
     <link rel="shortcut icon" href="icons/favicon.ico">
     <meta name="msapplication-config" content="browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&amp;subset=cyrillic" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <script>
       var interval = '<?= $config::$interval ?>';
@@ -124,7 +125,7 @@
 
         <div id="user">
           <?php if (!empty($usersArr)): ?>
-            <br><u><?= $lang["user"] ?></u><br>
+            <br><?= $lang["user"] ?><br>
             <form>
               <select name="user" onchange="selectUser(this);">
                 <option value="0"><?= $lang["suser"] ?></option>
@@ -137,7 +138,7 @@
         </div>
 
         <div id="track">
-          <u><?= $lang["track"] ?></u><br>
+          <?= $lang["track"] ?><br>
           <form>
             <select name="track" onchange="selectTrack(this)">
               <?php foreach ($tracksArr as $aTrack): ?>
@@ -157,7 +158,7 @@
         </div>
 
         <div id="api">
-          <u><?= $lang["api"] ?></u><br>
+          <?= $lang["api"] ?><br>
           <form>
             <select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
               <option value="gmaps"<?= ($config::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
@@ -167,7 +168,7 @@
         </div>
 
         <div id="lang">
-          <u><?= $lang["language"] ?></u><br>
+          <?= $lang["language"] ?><br>
           <form>
             <select name="units" onchange="setLang(this.options[this.selectedIndex].value);">
               <?php asort($langsArr); ?>
@@ -179,7 +180,7 @@
         </div>
 
         <div id="units">
-          <u><?= $lang["units"] ?></u><br>
+          <?= $lang["units"] ?><br>
           <form>
             <select name="units" onchange="setUnits(this.options[this.selectedIndex].value);">
               <option value="metric"<?= ($config::$units == "metric") ? " selected" : "" ?>><?= $lang["metric"] ?></option>

js/main.js

@@ -191,7 +191,6 @@ function getPopupHtml(p, i, count) {
       '<img class="icon" alt="' + lang['tdistance'] + '" title="' + lang['tdistance'] + '" src="images/distance_blue.svg"> ' +
       (p.totalMeters.toKm() * factor_km).toFixed(2) + ' ' + unit_km + '<br>' + '</div>';
   }
-  olHack = (mapapi == 'openlayers') ? ' style="padding-bottom: 2rem"' : '';
   popup =
     '<div id="popup">' +
     '<div id="pheader">' +
@@ -211,7 +210,7 @@ function getPopupHtml(p, i, count) {
     (p.accuracy * factor_m).toFixed() + ' ' + unit_m + provider + '<br>' : '') +
     '</div>' +
     stats +
-    '</div><div id="pfooter"' + olHack + '>' + sprintf(lang['pointof'], i + 1, count) + '</div>' +
+    '</div><div id="pfooter">' + sprintf(lang['pointof'], i + 1, count) + '</div>' +
     '</div>';
   return popup;
 }