stylish timers

l10n/po/fr/trivabble.po

@@ -244,20 +244,20 @@ msgstr "La vérification orthographique n'est pas disponible dans cette langue."
 msgid "Score new words"
 msgstr "Compter les points"
 
-msgid  "Turn timer:"
-msgstr "Temps du tour :"
+msgid  "Turn:"
+msgstr "Tour :"
 
-msgid  "Game timer:"
-msgstr "Temp global :"
+msgid  "Game:"
+msgstr "Partie :"
 
 msgid  "{0}d"
 msgstr "{0}j"
 
-msgid  "{0}h"
-msgstr "{0}h"
+msgid  "{0}h {0}' {1}''"
+msgstr "{0} h {0} min {1} s"
 
 msgid  "{0}' {1}''"
-msgstr "{0}' {1}''"
+msgstr "{0} min {1}"
 
 msgid  "Enable timer"
 msgstr "Activer le timer"

l10n/pot/trivabble.pot

@@ -249,16 +249,16 @@ msgstr ""
 msgid "Score new words"
 msgstr ""
 
-msgid  "Turn timer:"
+msgid  "Turn:"
 msgstr ""
 
-msgid  "Game timer:"
+msgid  "Game:"
 msgstr ""
 
 msgid  "{0}d"
 msgstr ""
 
-msgid  "{0}h"
+msgid  "{0}h {0}' {1}''"
 msgstr ""
 
 msgid  "{0}' {1}''"

public/index.html

@@ -118,10 +118,10 @@
                 <button id="btn-settings" data-l10n="text-content">Settings</button>
             </div>
             <p id="timer" style="display:none">
-                <span data-l10n="text-content">Turn timer:</span>
+                <span data-l10n="text-content" class="timer-turn">Turn:</span>
                 <span id="timer-turn">0</span>
                 <br />
-                <span data-l10n="text-content">Game timer:</span>
+                <span data-l10n="text-content" class="timer-game">Game:</span>
                 <span id="timer-game">0</span>
             </p>
             <div id="bag"></div>

public/trivabble.css

@@ -733,6 +733,14 @@ button#next-help-msg:hover {
     flex-direction:column;
 }
 
-#timer {
+#timer-turn, .timer-turn {
     text-align: center;
+    font-size: small;
+    color: #333;
+}
+
+#timer-game, .timer-game {
+    text-align: center;
+    font-size: x-small;
+    color: #AAA;
 }

public/trivabble.js

@@ -2237,8 +2237,7 @@
         const m = Math.floor((delta % (60 * 60)) / 60);
         const s = Math.floor(delta % 60);
         return ((d > 0) ? format(_("{0}d "), d) : "") +
-               ((h > 0) ? format(_("{0}h "), h) : "") +
-               format(_("{0}' {1}''"), m, s);
+            ((h > 0) ? format(_("{0}h {1}' {2}''"), h, m, s) : format(_("{0}' {1}''"), m, s));
     }
 
     function timerDate() {