Make it clear that the number is the history represents a version

customize.dist/src/less/toolbar.less

@@ -42,7 +42,7 @@
     }
 
     button {
-        &#shareButton {
+        &#shareButton, &.btn.btn-success {
             // Bootstrap 4 colors
             color: #fff;
             background: @toolbar-green;
@@ -58,7 +58,7 @@
                 margin-left: 5px;
             }
         }
-        &#newdoc {
+        &#newdoc, &.btn.btn-primary {
             // Bootstrap 4 colors
             color: #fff;
             background: #0275d8;
@@ -77,6 +77,18 @@
         &.hidden {
             display: none;
         }
+
+        // Bootstrap 4 colors (btn-secondary)
+        border: 1px solid transparent;
+        border-radius: .25rem;
+        color: #292b2c;
+        background-color: #fff;
+        border-color: #ccc;
+        &:hover {
+            color: #292b2c;
+            background-color: #e6e6e6;
+            border-color: #adadad;
+        }
     }
 
     .cryptpad-limit {
@@ -195,17 +207,6 @@
         margin-right: 2px;
     }
 
-    button {
-        color: #000;
-        background-color: inherit;
-        background-image: linear-gradient(to bottom,#fff,#e4e4e4);
-        border: 1px solid #A6A6A6;
-        border-bottom-color: #979797;
-        border-radius: 3px;
-        &:hover {
-            background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
-        }
-    }
     .cryptpad-state {
         line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
     }
@@ -429,13 +430,19 @@
     display: none;
     text-align: center;
     .next {
-        float: right;
+        display: inline-block;
+        vertical-align: middle;
+        margin: 20px;
     }
     .previous {
-        float: left;
+        display: inline-block;
+        vertical-align: middle;
+        margin: 20px;
     }
     .goto {
         display: inline-block;
+        vertical-align: middle;
+        text-align: center;
         input { width: 50px; }
     }
     .gotoInput {

customize.dist/toolbar.css

@@ -117,39 +117,59 @@
 .cryptpad-toolbar a {
   float: right;
 }
-.cryptpad-toolbar button#shareButton {
+.cryptpad-toolbar button {
+  border: 1px solid transparent;
+  border-radius: .25rem;
+  color: #292b2c;
+  background-color: #fff;
+  border-color: #ccc;
+}
+.cryptpad-toolbar button#shareButton,
+.cryptpad-toolbar button.btn.btn-success {
   color: #fff;
   background: #5cb85c;
   border-color: #5cb85c;
 }
-.cryptpad-toolbar button#shareButton:hover {
+.cryptpad-toolbar button#shareButton:hover,
+.cryptpad-toolbar button.btn.btn-success:hover {
   background: #449d44;
   border: 1px solid #419641;
 }
-.cryptpad-toolbar button#shareButton span {
+.cryptpad-toolbar button#shareButton span,
+.cryptpad-toolbar button.btn.btn-success span {
   color: #fff;
 }
-.cryptpad-toolbar button#shareButton .large {
+.cryptpad-toolbar button#shareButton .large,
+.cryptpad-toolbar button.btn.btn-success .large {
   margin-left: 5px;
 }
-.cryptpad-toolbar button#newdoc {
+.cryptpad-toolbar button#newdoc,
+.cryptpad-toolbar button.btn.btn-primary {
   color: #fff;
   background: #0275d8;
   border-color: #0275d8;
 }
-.cryptpad-toolbar button#newdoc:hover {
+.cryptpad-toolbar button#newdoc:hover,
+.cryptpad-toolbar button.btn.btn-primary:hover {
   background: #025aa5;
   border: 1px solid #01549b;
 }
-.cryptpad-toolbar button#newdoc span {
+.cryptpad-toolbar button#newdoc span,
+.cryptpad-toolbar button.btn.btn-primary span {
   color: #fff;
 }
-.cryptpad-toolbar button#newdoc .large {
+.cryptpad-toolbar button#newdoc .large,
+.cryptpad-toolbar button.btn.btn-primary .large {
   margin-left: 5px;
 }
 .cryptpad-toolbar button.hidden {
   display: none;
 }
+.cryptpad-toolbar button:hover {
+  color: #292b2c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
 .cryptpad-toolbar .cryptpad-limit {
   box-sizing: content-box;
   height: 16px;
@@ -265,17 +285,6 @@
   margin-top: -3px;
   margin-right: 2px;
 }
-.cryptpad-toolbar button {
-  color: #000;
-  background-color: inherit;
-  background-image: linear-gradient(to bottom, #fff, #e4e4e4);
-  border: 1px solid #A6A6A6;
-  border-bottom-color: #979797;
-  border-radius: 3px;
-}
-.cryptpad-toolbar button:hover {
-  background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
-}
 .cryptpad-toolbar .cryptpad-state {
   line-height: 32px;
   /* equivalent to 26px + 2*2px margin used for buttons */
@@ -492,13 +501,19 @@
   text-align: center;
 }
 .cryptpad-toolbar-history .next {
-  float: right;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 20px;
 }
 .cryptpad-toolbar-history .previous {
-  float: left;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 20px;
 }
 .cryptpad-toolbar-history .goto {
   display: inline-block;
+  vertical-align: middle;
+  text-align: center;
 }
 .cryptpad-toolbar-history .goto input {
   width: 50px;

customize.dist/translations/messages.fr.js

@@ -133,6 +133,7 @@ define(function () {
     out.history_restoreTitle = "Restaurer la version du document sélectionnée";
     out.history_restorePrompt = "Êtes-vous sûr de vouloir remplacer la version actuelle du document par la version affichée ?";
     out.history_restoreDone = "Document restauré";
+    out.history_version = "Version :";
 
     // Polls
 

customize.dist/translations/messages.js

@@ -135,6 +135,7 @@ define(function () {
     out.history_restoreTitle = "Restore the selected version of the document";
     out.history_restorePrompt = "Are you sure you want to replace the current version of the document by the displayed one?";
     out.history_restoreDone = "Document restored";
+    out.history_version = "Version:";
 
     // Polls