Improve the homepage with new images and translations

customize.dist/index.html

@@ -98,58 +98,50 @@
 </div>
 <div class="page category first" id="knowmore">
     <center>
-        <h1>How it works</h1>
+        <h1 data-localization="main_howitworks"></h1>
     </center>
 </div>
 <div class="page">
     <div class="info-container">
         <div class="left image">
-            <img src="customize/images/zk.png" alt="Zero Knowledge" />
+            <img src="customize/images/zeroknowledge_small.png" alt="Zero Knowledge" />
         </div>
         <div class="right">
-            <h2>Zero Knowledge</h2>
-            <p>
-                You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your Privacy and Security.
-            </p>
+            <h2 data-localization="main_zeroKnowledge"></h2>
+            <p data-localization="main_zeroKnowledge_p"></p>
         </div>
     </div>
 </div>
 <div class="page even">
     <div class="info-container">
         <div class="left">
-            <h2>Jot it down</h2>
-            <p>
-                The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.
-            </p>
+            <h2 data-localization="main_jotItDown"></h2>
+            <p data-localization="main_jotItDown_p"></p>
         </div>
         <div class="right image">
-            <img src="customize/images/realtime.png" alt="User account" />
+            <img src="customize/images/realtime_small.png" alt="User account" />
         </div>
     </div>
 </div>
 <div class="page">
     <div class="info-container">
         <div class="left image">
-            <img src="customize/images/hash.png" alt="User account" />
+            <img src="customize/images/key_small.png" alt="User account" />
         </div>
         <div class="right">
-            <h2>Share the link, share the pad</h2>
-            <p>
-                Grow your ideas together: conduct efficient meetings, collaborate on TODO lists and make quick presentations with all your friends and all your devices.
-            </p>
+            <h2 data-localization="main_share"></h2>
+            <p data-localization="main_share_p"></p>
         </div>
     </div>
 </div>
 <div class="page even">
     <div class="info-container">
         <div class="left">
-            <h2>Get organized</h2>
-            <p>
-                With CryptPad Drive, you can keep your sights on what's important. Folders allow you to keep track of your projects and have a global vision of where things are going.
-            </p>
+            <h2 data-localization="main_organize"></h2>
+            <p data-localization="main_organize_p"></p>
         </div>
         <div class="right image">
-            <img src="customize/images/useraccount.png" alt="User account" />
+            <img src="customize/images/organize.png" alt="User account" />
         </div>
     </div>
 </div>
@@ -163,23 +155,19 @@
         <div class="app-row">
             <div class="app">
                 <center>
-                    <h2>Rich Text editor</h2>
+                    <h2 data-localization="main_richText"></h2>
                     <img src="customize/images/pad.png" alt="Rich Text application" />
                 </center>
-                <p>
-                    Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
-                </p>
+                <p data-localization="main_richText_p"></p>
                 <p class="buttons">
                     <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
                 </p>
             </div><div class="app">
                 <center>
-                    <h2>Code editor</h2>
+                    <h2 data-localization="main_code"></h2>
                     <img src="customize/images/code.png" alt="Code application" />
                 </center>
-                <p>
-                    Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
-                </p>
+                <p data-localization="main_code_p"></p>
                 <p class="buttons">
                     <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
                 </p>
@@ -188,23 +176,19 @@
         --><div class="app-row"><!--
             --><div class="app">
                 <center>
-                    <h2>Slide editor</h2>
+                    <h2 data-localization="main_slide"></h2>
                     <img src="customize/images/slide.png" alt="Slide applcation" />
                 </center>
-                <p>
-                    Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
-                </p>
+                <p data-localization="main_slide_p"></p>
                 <p class="buttons">
                     <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
                 </p>
             </div><div class="app">
                 <center>
-                    <h2>Polls</h2>
+                    <h2 data-localization="main_poll"></h2>
                     <img src="customize/images/poll.png" alt="Poll application" />
                 </center>
-                <p>
-                    Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
-                </p>
+                <p data-localization="main_poll_p"></p>
                 <p class="buttons">
                     <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
                 </p>

customize.dist/main.css

@@ -887,6 +887,8 @@ html.cp,
 @media screen and (max-width: 800px) {
   .cp #main #userForm,
   .cp #main_other #userForm,
+  .cp #main #loggedIn,
+  .cp #main_other #loggedIn,
   .cp #main #data,
   .cp #main_other #data {
     transform: initial;
@@ -900,7 +902,9 @@ html.cp,
 }
 @media screen and (max-width: 800px) {
   .cp #main #userForm,
-  .cp #main_other #userForm {
+  .cp #main_other #userForm,
+  .cp #main #loggedIn,
+  .cp #main_other #loggedIn {
     border: 1px solid #888;
   }
 }

customize.dist/src/fragments/index.html

@@ -31,58 +31,50 @@
 </div>
 <div class="page category first" id="knowmore">
     <center>
-        <h1>How it works</h1>
+        <h1 data-localization="main_howitworks"></h1>
     </center>
 </div>
 <div class="page">
     <div class="info-container">
         <div class="left image">
-            <img src="customize/images/zk.png" alt="Zero Knowledge" />
+            <img src="customize/images/zeroknowledge_small.png" alt="Zero Knowledge" />
         </div>
         <div class="right">
-            <h2>Zero Knowledge</h2>
-            <p>
-                You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your Privacy and Security.
-            </p>
+            <h2 data-localization="main_zeroKnowledge"></h2>
+            <p data-localization="main_zeroKnowledge_p"></p>
         </div>
     </div>
 </div>
 <div class="page even">
     <div class="info-container">
         <div class="left">
-            <h2>Jot it down</h2>
-            <p>
-                The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.
-            </p>
+            <h2 data-localization="main_jotItDown"></h2>
+            <p data-localization="main_jotItDown_p"></p>
         </div>
         <div class="right image">
-            <img src="customize/images/realtime.png" alt="User account" />
+            <img src="customize/images/realtime_small.png" alt="User account" />
         </div>
     </div>
 </div>
 <div class="page">
     <div class="info-container">
         <div class="left image">
-            <img src="customize/images/hash.png" alt="User account" />
+            <img src="customize/images/key_small.png" alt="User account" />
         </div>
         <div class="right">
-            <h2>Share the link, share the pad</h2>
-            <p>
-                Grow your ideas together: conduct efficient meetings, collaborate on TODO lists and make quick presentations with all your friends and all your devices.
-            </p>
+            <h2 data-localization="main_share"></h2>
+            <p data-localization="main_share_p"></p>
         </div>
     </div>
 </div>
 <div class="page even">
     <div class="info-container">
         <div class="left">
-            <h2>Get organized</h2>
-            <p>
-                With CryptPad Drive, you can keep your sights on what's important. Folders allow you to keep track of your projects and have a global vision of where things are going.
-            </p>
+            <h2 data-localization="main_organize"></h2>
+            <p data-localization="main_organize_p"></p>
         </div>
         <div class="right image">
-            <img src="customize/images/useraccount.png" alt="User account" />
+            <img src="customize/images/organize.png" alt="User account" />
         </div>
     </div>
 </div>
@@ -96,23 +88,19 @@
         <div class="app-row">
             <div class="app">
                 <center>
-                    <h2>Rich Text editor</h2>
+                    <h2 data-localization="main_richText"></h2>
                     <img src="customize/images/pad.png" alt="Rich Text application" />
                 </center>
-                <p>
-                    Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
-                </p>
+                <p data-localization="main_richText_p"></p>
                 <p class="buttons">
                     <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
                 </p>
             </div><div class="app">
                 <center>
-                    <h2>Code editor</h2>
+                    <h2 data-localization="main_code"></h2>
                     <img src="customize/images/code.png" alt="Code application" />
                 </center>
-                <p>
-                    Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
-                </p>
+                <p data-localization="main_code_p"></p>
                 <p class="buttons">
                     <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
                 </p>
@@ -121,23 +109,19 @@
         --><div class="app-row"><!--
             --><div class="app">
                 <center>
-                    <h2>Slide editor</h2>
+                    <h2 data-localization="main_slide"></h2>
                     <img src="customize/images/slide.png" alt="Slide applcation" />
                 </center>
-                <p>
-                    Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
-                </p>
+                <p data-localization="main_slide_p"></p>
                 <p class="buttons">
                     <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
                 </p>
             </div><div class="app">
                 <center>
-                    <h2>Polls</h2>
+                    <h2 data-localization="main_poll"></h2>
                     <img src="customize/images/poll.png" alt="Poll application" />
                 </center>
-                <p>
-                    Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
-                </p>
+                <p data-localization="main_poll_p"></p>
                 <p class="buttons">
                     <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
                 </p>

customize.dist/src/less/cryptpad.less

@@ -446,7 +446,7 @@ body.html {
             left: 0;
         }
     }
-    #userForm, #data {
+    #userForm, #loggedIn, #data {
         @media screen and (max-width: @media-not-big) {
             transform: initial;
             position: relative;
@@ -457,7 +457,7 @@ body.html {
             box-sizing: border-box;
         }
     }
-    #userForm {
+    #userForm, #loggedIn {
         @media screen and (max-width: @media-not-big) {
             border: 1px solid #888;
         }

customize.dist/src/less/toolbar.less

@@ -39,6 +39,21 @@
         float: right;
     }
 
+    button {
+        &#shareButton {
+            color: #fff;
+            background: #5cb85c;
+            border-color: #5cb85c;
+            &:hover {
+                background: #449d44;
+                border: 1px solid #419641;
+            }
+            span {
+                color: #fff;
+            }
+        }
+    }
+
     .cryptpad-lag {
         box-sizing: content-box;
         height: 16px;
@@ -273,6 +288,9 @@
     button {
         margin: 2px 4px 2px 0px;
     }
+    .dropdown-bar-content {
+        margin-top: -1px;
+    }
 }
 .cryptpad-toolbar-rightside {
     text-align: right;

customize.dist/toolbar.css

@@ -112,6 +112,18 @@
 .cryptpad-toolbar a {
   float: right;
 }
+.cryptpad-toolbar button#shareButton {
+  color: #fff;
+  background: #5cb85c;
+  border-color: #5cb85c;
+}
+.cryptpad-toolbar button#shareButton:hover {
+  background: #449d44;
+  border: 1px solid #419641;
+}
+.cryptpad-toolbar button#shareButton span {
+  color: #fff;
+}
 .cryptpad-toolbar .cryptpad-lag {
   box-sizing: content-box;
   height: 16px;
@@ -348,6 +360,9 @@
 .cryptpad-toolbar-leftside button {
   margin: 2px 4px 2px 0px;
 }
+.cryptpad-toolbar-leftside .dropdown-bar-content {
+  margin-top: -1px;
+}
 .cryptpad-toolbar-rightside {
   text-align: right;
 }

customize.dist/translations/messages.fr.js

@@ -117,10 +117,6 @@ define(function () {
 
     out.disconnectAlert = 'Perte de la connexion au réseau !';
 
-    out.tryIt = 'Essayez-le !';
-    out.recentPads = 'Vos documents récents (stockés uniquement dans votre navigateur)';
-    out.recentPadsIframe = 'Vos documents récents';
-
     out.okButton = 'OK (Entrée)';
 
     out.cancel = "Annuler";
@@ -288,13 +284,31 @@ define(function () {
     //out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
     out.main_p1 = "<h2>Collaborez en tout confiance</h2><br>Développez vos idées collaborativement grâce à des documents partagés en temps-réel, tout en gardant vos données personnelles invisibles, même pour nous, avec la technologie <strong>Zero Knowledge</strong>.";
     out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
-    out.main_howitworks = 'Comment ça fonctionne';
     out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
     out.main_about = 'À propos';
     out.main_about_p1 = 'Vous pouvez en apprendre davantage sur notre <a href="/privacy.html" title="">politique de confidentialité</a> et nos <a href="/terms.html">conditions d\'utilisation</a>.';
     out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez <a href="https://twitter.com/cryptpad">nous tweeter</a>, ouvrir une issue sur <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">Github</a>, venir dire bonjour sur IRC (<a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" title="freenode webchat">irc.freenode.net</a>), ou <a href="mailto:research@xwiki.com">nous envoyer un email</a>.';
     out.main_openFileManager = 'Ouvrir dans un nouvel onglet';
 
+    out.main_howitworks = 'Comment ça fonctionne';
+    out.main_zeroKnowledge = 'Zero Knowledge';
+    out.main_zeroKnowledge_p = "Vous n'avez pas besoin de croire que nous n'<em>allons</em> pas regarder vos documents. Avec la technologie Zero Knowledge de Cryptpad, nous ne <em>pouvons</em> pas le faire. Apprenez-en plus sur notre manière de protéger vos données.";
+    out.main_jotItDown = 'Prenez-en note';
+    out.main_jotItDown_p = "Les plus grands projets naissent des plus petites idées. Prenez note de vos moments d'inspiration et de vos idées inattendues car vous ne savez pas lesquels seront des découvertes capitales.";
+    out.main_share = 'Partager le lien, partager le document';
+    out.main_share_p = "Faites croître vos idées à plusieurs : réalisez des réunions efficaes, collaborez sur vos listes de tâches et réalisez des présentations rapide avec tous vos amis sur tous vos appareils.";
+    out.main_organize = 'Soyez organisés';
+    out.main_organize_p = "Avec le CryptPad Drive, vous pouvez garder vos vues sur ce qui est important. Les dossiers vous permettent de garder la trace de vos projets et d'avoir une vision globale du travail effectué.";
+    out.tryIt = 'Essayez-le !';
+    out.main_richText = 'Éditeur de texte';
+    out.main_richText_p = 'Éditez des documents texte collaborativement avec notre application <a href="http://ckeditor.com" target="_blank">CkEditor</a> temps-réel et Zero Knowledge.';
+    out.main_code = 'Éditeur de code';
+    out.main_code_p = 'Modifier le code de vos logiciel collaborativement grace à notre application <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> temps-réel et Zero Knowledge.';
+    out.main_slide = 'Présentations';
+    out.main_slide_p = 'Créez vos présentations en syntaxe Markdown collaborativement de manière sécurisée et affichez les dans votre navigateur.';
+    out.main_poll = 'Sondages';
+    out.main_poll_p = 'Plannifiez vos réunions ou évènements, ou votez pour la meilleure solution concernant votre problème.';
+
     out.table_type = 'Type';
     out.table_link = 'Lien';
     out.table_created = 'Créé le';

customize.dist/translations/messages.js

@@ -122,10 +122,6 @@ define(function () {
 
     out.disconnectAlert = 'Network connection lost!';
 
-    out.tryIt = 'Try it out!';
-    out.recentPads = 'Your recent pads (stored only in your browser)';
-    out.recentPadsIframe = 'Your recent pads';
-
     out.okButton = 'OK (enter)';
 
     out.cancel = "Cancel";
@@ -292,13 +288,31 @@ define(function () {
     out.main_p1 = "<h1>Collaborate in Confidence</h1><br> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; even from us.";
 
     out.main_p2 = 'This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor, <a href="https://codemirror.net/">CodeMirror</a>, and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine.';
-    out.main_howitworks = 'How It Works';
     out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';
     out.main_about = 'About';
     out.main_about_p1 = 'You can read more about <a href="/about.html">how CryptPad works</a>, our <a href="/privacy.html" title="">privacy policy</a> and <a href="/terms.html">terms of service</a>.';
     out.main_about_p2 = 'If you have any questions or comments, you can <a href="https://twitter.com/cryptpad">tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on github</a>, come say hi on irc (<a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" title="freenode webchat">irc.freenode.net</a>), or <a href="mailto:research@xwiki.com">send us an email</a>.';
     out.main_openFileManager = 'Open in a new tab';
 
+    out.main_howitworks = 'How It Works';
+    out.main_zeroKnowledge = 'Zero Knowledge';
+    out.main_zeroKnowledge_p = "You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your Privacy and Security.";
+    out.main_jotItDown = 'Jot it down';
+    out.main_jotItDown_p = "The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.";
+    out.main_share = 'Share the link, share the pad';
+    out.main_share_p = "Grow your ideas together: conduct efficient meetings, collaborate on TODO lists and make quick presentations with all your friends and all your devices.";
+    out.main_organize = 'Get organized';
+    out.main_organize_p = "With CryptPad Drive, you can keep your sights on what's important. Folders allow you to keep track of your projects and have a global vision of where things are going.";
+    out.tryIt = 'Try it out!';
+    out.main_richText = 'Rich Text editor';
+    out.main_richText_p = 'Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.';
+    out.main_code = 'Code editor';
+    out.main_code_p = 'Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.';
+    out.main_slide = 'Slide editor';
+    out.main_slide_p = 'Create your presentations using the Markdown syntax, and display them in your browser.';
+    out.main_poll = 'Polls';
+    out.main_poll_p = 'Plan your meeting or your event, or vote for the best solution regarding your problem.';
+
     out.table_type = 'Type';
     out.table_link = 'Link';
     out.table_created = 'Created';

package.json

@@ -16,7 +16,7 @@
   "scripts": {
       "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
       "test": "node TestSelenium.js",
-      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css",
+      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css",
       "template": "cd customize.dist/src && node build.js"
   }
 }

www/common/toolbar.js

@@ -124,6 +124,7 @@ define([
                 options: []
             };
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
+            $shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
             $userlistElement.append($shareBlock);
         }

www/drive/file.css

@@ -71,13 +71,13 @@ li {
 span.fa-folder,
 span.fa-folder-open {
   color: #FEDE8B;
-  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
 /* TREE */
 #tree {
   border-right: 1px solid #ccc;
   box-sizing: border-box;
-  background: #ffffff;
+  background: #fff;
   overflow: auto;
   resize: horizontal;
   width: 250px;
@@ -85,7 +85,7 @@ span.fa-folder-open {
   max-width: 500px;
   min-width: 200px;
   padding: 10px 0px;
-  color: #000000;
+  color: #000;
 }
 #tree li {
   cursor: auto;
@@ -144,9 +144,9 @@ span.fa-folder-open {
   top: -0.25em;
   content: '';
   display: block;
-  border-left: 1px solid #888888;
+  border-left: 1px solid #888;
   height: 1em;
-  border-bottom: 1px solid #888888;
+  border-bottom: 1px solid #888;
   width: 17.5px;
 }
 #tree ul li:after {
@@ -155,7 +155,7 @@ span.fa-folder-open {
   bottom: -7px;
   content: '';
   display: block;
-  border-left: 1px solid #888888;
+  border-left: 1px solid #888;
   height: 100%;
 }
 #tree ul li.root {
@@ -173,8 +173,8 @@ span.fa-folder-open {
 /* CONTENT */
 #content {
   box-sizing: border-box;
-  background: #ffffff;
-  color: #000000;
+  background: #fff;
+  color: #000;
   overflow: auto;
   flex: 1;
   display: flex;
@@ -193,7 +193,7 @@ span.fa-folder-open {
   padding-left: 10px;
   margin: 10px auto;
   background: #ddddff;
-  border: 1px solid #bbbbbb;
+  border: 1px solid #bbb;
   border-radius: 5px;
 }
 #content .info-box span {
@@ -249,7 +249,7 @@ span.fa-folder-open {
 }
 #content .list li.header {
   cursor: default;
-  color: #555555;
+  color: #555;
 }
 #content .list li.header span:not(.fa) {
   text-align: left;
@@ -308,12 +308,12 @@ span.fa-folder-open {
 }
 /* Toolbar */
 #driveToolbar {
-  background: #dddddd;
-  color: #555555;
+  background: #ddd;
+  color: #555;
   height: 40px;
   display: flex;
   flex-flow: row;
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid #ccc;
   border-bottom: ;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 100;
@@ -324,11 +324,13 @@ span.fa-folder-open {
   display: inline-block;
   height: 100%;
 }
+#driveToolbar button {
+  height: 30px;
+}
 #driveToolbar button.element {
   border-radius: 2px;
-  height: 30px;
-  background: #888888;
-  color: #eeeeee;
+  background: #888;
+  color: #eee;
   font-size: 16px;
   border: none;
   font-weight: bold;
@@ -359,7 +361,6 @@ span.fa-folder-open {
   margin-right: 0px;
 }
 #driveToolbar .dropdown-bar-content {
-  margin-top: -3px;
   margin-right: 2px;
 }
 #driveToolbar .leftside {
@@ -380,7 +381,7 @@ span.fa-folder-open {
 }
 #driveToolbar .path .element {
   padding: 5px;
-  border: 1px solid #dddddd;
+  border: 1px solid #ddd;
   border-radius: 2px;
   box-sizing: border-box;
 }
@@ -388,6 +389,6 @@ span.fa-folder-open {
   cursor: pointer;
 }
 #driveToolbar .path .element.clickable:hover {
-  background: #ffffff;
-  border: 1px solid #888888;
+  background: #fff;
+  border: 1px solid #888;
 }

www/drive/file.less

@@ -382,9 +382,9 @@ span {
     }
 
     button {
+        height: 30px;
         &.element {
             border-radius: 2px;
-            height: 30px;
             background: @toolbar-button-bg;
             color: @toolbar-button-fg;
             font-size: 16px;
@@ -419,7 +419,6 @@ span {
         }
     }
     .dropdown-bar-content {
-        margin-top: -3px;
         margin-right: 2px;
     }
 

www/drive/main.js

@@ -923,7 +923,7 @@ define([
             var $block = Cryptpad.createDropdown(dropdownConfig);
 
             // Custom style:
-            $block.find('button').addClass('new').addClass('element');
+            $block.find('button').addClass('btn').addClass('btn-primary').addClass('new');
 
             // Handlers
             if (isInRoot) {

www/pad/inner.html

@@ -4,6 +4,8 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
     <script src="/bower_components/ckeditor/ckeditor.js"></script>
     <style>
     html, body {