From 8d956c3de6c6e6686366e0b9ccf3821c4efc6a2f Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 21 Jun 2017 18:04:35 +0200
Subject: [PATCH] New toolbar

---
 customize.dist/ckeditor-config.js          |   3 +-
 customize.dist/main.css                    |   6 +-
 customize.dist/src/less/dropdown.less      |   6 +-
 customize.dist/src/less/toolbar.less       | 523 ++++++++----
 customize.dist/src/less/variables.less     |  11 +
 customize.dist/toolbar.css                 | 883 +++++++++++++++++----
 customize.dist/translations/messages.fr.js |   2 +-
 www/common/common-hash.js                  |   2 +
 www/common/cryptpad-common.js              |  30 +-
 www/common/toolbar2.js                     |  90 ++-
 www/pad/main.js                            |   7 +-
 11 files changed, 1178 insertions(+), 385 deletions(-)

diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js
index 45d5bbd38..019014299 100644
--- a/customize.dist/ckeditor-config.js
+++ b/customize.dist/ckeditor-config.js
@@ -8,7 +8,8 @@ CKEDITOR.editorConfig = function( config ) {
     config.removeButtons= 'Source,Maximize';
     // magicline plugin inserts html crap into the document which is not part of the
     // document itself and causes problems when it's sent across the wire and reflected back
-    config.removePlugins= 'resize';
+    config.removePlugins= 'resize,elementspath';
+    config.resize_enabled= false; //bottom-bar
     config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
     config.toolbarGroups= [
         // {"name":"clipboard","groups":["clipboard","undo"]},
diff --git a/customize.dist/main.css b/customize.dist/main.css
index 9e459880a..b02ff7b9c 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -435,7 +435,7 @@
   display: block;
 }
 .dropdown-bar .dropdown-bar-content a {
-  color: black !important;
+  color: black;
   padding: 5px 16px;
   text-decoration: none;
   display: block;
@@ -449,11 +449,11 @@
 }
 .dropdown-bar .dropdown-bar-content a:hover {
   background-color: #f1f1f1;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content a.active {
   background-color: #e8e8e8;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content hr {
   margin: 5px 0px;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 2d93bba8b..9ea8a3226 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -42,7 +42,7 @@
         }
 
         a {
-            color: black !important;
+            color: black;
             padding: 5px 16px;
             text-decoration: none;
             display: block;
@@ -56,12 +56,12 @@
 
             &:hover {
                 background-color: #f1f1f1;
-                color: black !important;
+                color: black;
             }
 
             &.active {
                 background-color: #e8e8e8;
-                color: black !important;
+                color: black;
             }
         }
 
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 2dfe43ecf..706cacbd7 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -32,72 +32,157 @@
 
     //background-color: #BBBBFF;
     background-color: @toolbar-default-bg;
-    color: @toolbar-default-color;
+    color: @toolbar-default-color;/*
     &.pad {
-        @color: @toolbar-pad-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
+        @bgcolor: @toolbar-pad-bg;
+        @color: @toolbar-pad-color;
+        background-color: @bgcolor;
+        color: @color;
     }
     &.code {
-        @color: @toolbar-code-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
+        @bgcolor: @toolbar-code-bg;
+        @color: @toolbar-code-color;
+        background-color: @bgcolor;
+        color: @color;
+        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
+            lighten($bgcolor, 15%);
+        }
     }
     &.slide {
-        @color: @toolbar-slide-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        @bgcolor: @toolbar-slide-bg;
+        @color: @toolbar-slide-color;
+        background-color: @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.poll {
-        @color: @toolbar-poll-bg;
+        @bgcolor: @toolbar-poll-bg;
+        @color: @toolbar-poll-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.whiteboard {
-        @color: @toolbar-whiteboard-bg;
+        @bgcolor: @toolbar-whiteboard-bg;
+        @color: @toolbar-whiteboard-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.drive {
-        @color: @toolbar-drive-bg;
+        @bgcolor: @toolbar-drive-bg;
+        @color: @toolbar-drive-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.file {
-        @color: @toolbar-file-bg;
+        @bgcolor: @toolbar-file-bg;
+        @color: @toolbar-file-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
+    }*/
+
+    .addToolbarColors (@color, @bg-color) {
+        background-color: @bgcolor;
+        color: @color;
+        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
+            background-color: lighten(@bgcolor, 8%);
+            button:hover {
+                background-color: @bgcolor;
+            }
+        }
+        .hoverable:hover {
+            .editable {
+                cursor: text;
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+            }
+            .pencilIcon {
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+                &:hover {
+                    background: darken(@bgcolor, 5%);
+                }
+            }
+        }
+        .saveIcon {
+            border: 1px solid lighten(@bgcolor, 15%);
+            background: darken(@bgcolor, 10%);
+            color: @color;
+            &:hover {
+                background: darken(@bgcolor, 5%);
+            }
+        }
+        input {
+            border: 1px solid lighten(@bgcolor, 15%);
+            background: darken(@bgcolor, 10%);
+            color: @color;
+        }
+        .dropdown-bar-content {
+            line-height: 14px;
+            background: darken(@bgcolor, 5%);
+            border: 1px solid @color;
+            color: @color;
+            a {
+                color: @color;
+                &.active {
+                    background-color: darken(@bgcolor, 10%);
+                    color: @color;
+                }
+                &:hover {
+                    background-color: @bgcolor;
+                    color: @color;
+                }
+            }
+            hr {
+                background-color: darken(@bgcolor, 15%);
+            }
+            p {
+                h2 {
+                    background-color: darken(@bgcolor, 10%);
+                }
+                .accountData {
+                    background-color: @bgcolor;
+                }
+            }
+        }
     }
-/*
+
     &.pad {
-        background-color: @toolbar-pad-bg;
-        color: @toolbar-pad-color;
+        @bgcolor: @toolbar-pad-bg;
+        @color: @toolbar-pad-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.code {
-        background-color: @toolbar-code-bg;
-        color: @toolbar-code-color;
+        @bgcolor: @toolbar-code-bg;
+        @color: @toolbar-code-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.slide {
-        background-color: @toolbar-slide-bg;
-        color: @toolbar-slide-color;
+        @bgcolor: @toolbar-slide-bg;
+        @color: @toolbar-slide-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.poll {
-        background-color: @toolbar-poll-bg;
-        color: @toolbar-poll-color;
+        @bgcolor: @toolbar-poll-bg;
+        @color: @toolbar-poll-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.whiteboard {
-        background-color: @toolbar-whiteboard-bg;
-        color: @toolbar-whiteboard-color;
+        @bgcolor: @toolbar-whiteboard-bg;
+        @color: @toolbar-whiteboard-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.drive {
-        background-color: @toolbar-drive-bg;
-        color: @toolbar-drive-color;
+        @bgcolor: @toolbar-drive-bg;
+        @color: @toolbar-drive-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.file {
-        background-color: @toolbar-file-bg;
-        color: @toolbar-file-color;
+        @bgcolor: @toolbar-file-bg;
+        @color: @toolbar-file-color;
+        .addToolbarColors(@color, @bgcolor);
     }
-*/
+
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -121,10 +206,25 @@
             height: 100%;
             border-radius: 0;
             margin: 0;
+            background: transparent;
         }
     }
 
+    .separator {
+        content: '';
+        display: inline-block;
+        background: #888;
+        margin: 7px 4px;
+        height: 18px;
+        width: 1px;
+        vertical-align: top;
+    }
+    .separator:last-child {
+        display: none;
+    }
+
     button {
+        .unselectable();
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
             color: #fff;
@@ -162,21 +262,24 @@
         &.hidden {
             display: none;
         }
-
         // Bootstrap 4 colors (btn-secondary)
         border: 1px solid transparent;
         border-radius: .25rem;
-        color: #000;
-        background-color: #fff;
-        border-color: #ccc;
+        color: inherit;
         font: @toolbar-button-font;
         * {
-            color: #000;
+            color: inherit;
             font: @toolbar-button-font;
         }
+    }
+    .cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
+        //background-color: #fff;
+        //border-color: #ccc;
+        background: transparent;
         &:hover {
-            color: #292b2c;
-            background-color: #e6e6e6;
+            //color: #292b2c;
+            background-color: rgba(50,50,50,0.3);
+            //background-color: #e6e6e6;
             border-color: #adadad;
         }
     }
@@ -204,68 +307,95 @@
     }
 
     .clag () {
-        background: transparent;
+        background: transparent
     }
 
+    .cryptpad-state {
+        line-height: @toolbar-top-height;
+    }
     .cryptpad-lag {
-        height: 20px;
-        width: 23px;
-        background: transparent;
         display: inline-block;
-        padding: 3px;
-        margin: 3px;
         vertical-align: top;
         box-sizing: content-box;
         text-align: center;
-        span {
+        line-height: @toolbar-top-height;
+        .disconnected {
+            display: none;
+            color: inherit;
+            width: 28px;
+            margin: 8px;
+            font-size: 28px;
+            text-align: center;
+            vertical-align: middle;
+        }
+        .bars {
+            margin: 8px;
+            height: 26px;
+            line-height: 26px;
             display: inline-block;
-            width: 4px;
-            margin: 0;
-            margin-right: 1px;
-            background: black;
-            vertical-align: bottom;
-            box-sizing: border-box;
-            border: 1px solid black;
-            transition: background 1s, border 1s;
-            &:last-child {
-                margin-right: 0;
+            span {
+                display: inline-block;
+                width: 6px;
+                margin: 0;
+                margin-right: 1px;
+                background: white;
+                vertical-align: bottom;
+                box-sizing: border-box;
+                border: 1px solid black;
+                visibility: hidden;
+                transition: background 1s, border 1s;
+                &:last-child {
+                    margin-right: 0;
+                }
+                &.bar1 { height: 6px; }
+                &.bar2 { height: 12px; }
+                &.bar3 { height: 18px; }
+                &.bar4 { height: 24px; }
+            }
+        }
+        &.dc {
+            .disconnected {
+                display: inline;
+            }
+            .bars {
+                display: none
             }
-            &.bar1 { height: 5px; }
-            &.bar2 { height: 10px; }
-            &.bar3 { height: 15px; }
-            &.bar4 { height: 20px; }
         }
         &.lag0 {
-            span {
+            span span {
                 .clag();
-                border-color: red;
+                //border-color: red;
             }
         }
         &.lag1 {
             .bar2, .bar3, .bar4 { .clag(); }
-            span {
-                background-color: orange;
-                border-color: orange;
+            span span {
+                visibility: visible;
+                //background-color: orange;
+                //border-color: orange;
             }
         }
         &.lag2 {
             .bar3, .bar4 { .clag(); }
-            span {
-                background-color: orange;
-                border-color: orange;
+            span span {
+                visibility: visible;
+                //background-color: orange;
+                //border-color: orange;
             }
         }
         &.lag3 {
             .bar4 { .clag(); }
-            span {
-                background-color: @toolbar-green;
-                border-color: @toolbar-green;
+            span span {
+                visibility: visible;
+                //background-color: @toolbar-green;
+                //border-color: @toolbar-green;
             }
         }
         &.lag4 {
-            span {
-                background-color: @toolbar-green;
-                border-color: @toolbar-green;
+            span span {
+                visibility: visible;
+                //background-color: @toolbar-green;
+                //border-color: @toolbar-green;
             }
         }
     }
@@ -287,15 +417,6 @@
         box-sizing: border-box;
     }
 
-    .dropdown-bar-content {
-        margin-top: -3px;
-        margin-right: 2px;
-    }
-
-    .cryptpad-state {
-        line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
-    }
-
     .rightside-button {
         float: right;
         cursor: pointer;
@@ -381,7 +502,8 @@
 }
 
 .cryptpad-toolbar:not(.notitle) {
-    .cryptpad-toolbar-top {
+    // TODO
+    /*.cryptpad-toolbar-top {
         @media screen and (max-width: @media-medium-screen) {
             height: 67px;
         }
@@ -393,116 +515,174 @@
                 top: 0px;
             }
         }
-    }
+    }*/
 }
 
 .cryptpad-toolbar-top {
-    display: block;
-    text-align: center;
-    height: 32px;
+    display: flex;
+    flex-flow: row;
+    height: @toolbar-top-height;
     position: relative;
     .cryptpad-title {
+        order: 3;
+        height: 100%;
+        display: inline-block;
+        line-height: @toolbar-top-height;
+        flex: 1;
+        margin-left: 20px;
         .title, .pencilIcon, .saveIcon {
-            font-size: 1.5em;
+            font-size: 25px;
             vertical-align: middle;
-            line-height: 32px;
+            line-height: 25px;
         }
         .pencilIcon {
-            margin-left: 11px;
-            &:hover {
-                color: #999;
-                margin-left: 0px;
-            }
+            cursor: pointer;
+            border: 1px solid transparent;
+            border-radius: 0px 2px 2px 0px;
+            padding: 5px;
+            border-collapse: collapse;
             span {
+                font-size: 25px;
                 cursor: pointer;
             }
         }
         .saveIcon {
             cursor: pointer;
-            border: 1px solid black;
             border-radius: 0px 2px 2px 0px;
-            background: white;
             padding: 5px;
-            display: inline;
-            margin-left: -1px;
             border-collapse: collapse;
-            &:hover {
-                color: #999;
-            }
             span {
+                font-size: 25px;
                 cursor: pointer;
             }
         }
-        &:not(input):hover {
-            .editable {
-                border: 1px solid #888;
-                border-radius: 2px 0px 0px 2px;
-                background: white;
-                padding: 5px;
-                border-collapse: collapse;
-            }
-            .pencilIcon {
-                cursor: pointer;
-                border: 1px solid #888;
-                border-radius: 0px 2px 2px 0px;
-                background: white;
-                padding: 5px;
-                display: inline;
-                margin-left: -1px;
-                border-collapse: collapse;
-            }
+        .editable {
+            border: 1px solid transparent;
+            border-radius: 2px 0px 0px 2px;
+            padding: 5px;
+            border-collapse: collapse;
         }
         input {
             font-size: 1.5em;
             vertical-align: middle;
             box-sizing: border-box;
-            border: 1px solid black;
-            background: #fff;
             cursor: auto;
             width: 300px;
+            font-size: 25px;
             padding: 5px 5px;
+            height: 40px;
         }
     }
-    .cryptpad-link {
-        position: absolute;
-        left: 0px;
-        height: 32px;
-        background: @toolbar-drive-bg;
+    .cryptpad-link, .cryptpad-new {
+        font-size: 48px;
+        line-height: 64px;
+        width: @toolbar-top-height;
+        height: @toolbar-top-height;
+        padding: 0;
+        box-sizing: border-box;
+        display: inline-block;
 
-        a.cryptpad-logo {
-            cursor: pointer;
-            height: 32px;
-            padding: 0px 5px;
-            text-decoration: none;
+        color: white;
+        transition: all 0.15s;
+    }
+    .cryptpad-new {
+        background-color: rgba(0,0,0,0.2);
+        &:hover {
+            background-color: rgba(0,0,0,0.3);
+        }
+        order: 2;
+        text-align: center;
+        &> button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 64px;
+            height: 64px !important; // Allows us to have a nice square outline when focused
+            font-size: 1em;
             color: inherit;
-            &:hover {
-                span {
-                    text-decoration: underline;
-                }
+            height: auto;
+            padding: 0px;
+            margin: 0;
+            &::before {
+                padding-top: 4px;
             }
-            img {
-                vertical-align: middle;
-                height: 32px;
-                cursor: pointer;
+            &:hover {
+                background-color: initial;
+                border-color: transparent;
             }
             span {
-                font-size: 1.5em;
-                margin-left: 5px;
-                vertical-align: middle;
-                cursor: pointer;
+                vertical-align: top;
+                font-size: 1em;
+                text-decoration: none;
+                color: inherit;
             }
         }
+        .dropdown-bar-content {
+            font-size: 12px;
+            line-height: 14px;
+        }
+    }
+    .cryptpad-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background-color: rgba(0,0,0,0.4);
+        &:hover {
+            background-color: rgba(0,0,0,0.5);
+        }
+        order: 1;
+        a.cryptpad-logo {
+            cursor: pointer;
+            font-size: 1em;
+            height: auto;
+            padding: 0px 5px;
+            text-decoration: none;
+            color: inherit;
+        }
     }
     .cryptpad-user {
         height: 100%;
-        position: absolute;
-        right: 0;
-        :not(.cryptpad-lag) span {
+        display: inline-block;
+        order: 4;
+        line-height: @toolbar-top-height;
+        &> * {
+            display: inline-block;
+            height: 100%;
             vertical-align: top;
         }
-        button {
-            span.fa {
-                vertical-align: baseline;
+        .cryptpad-upgrade {
+            height: 32px;
+            vertical-align: middle;
+            cursor: pointer;
+        }
+        .cryptpad-user-dropdown {
+            margin-left: 20px;
+            height: 64px;
+            width: 64px;
+            padding: 0px;
+            box-sizing: border-box;
+            text-align: center;
+            background-color: rgba(0,0,0,0.3);
+            &:hover {
+                background-color: rgba(0,0,0,0.4);
+            }
+            .dropdown-bar-content {
+                margin: 0;
+            }
+            button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 64px;
+                width: 64px;
+                padding: 0;
+                span {
+                    font-size: 32px;
+                    .fa {
+                        margin-left: 3px;
+                    }
+                }
             }
         }
     }
@@ -533,7 +713,28 @@
         margin: 0;
         border-radius: 0;
         padding: 0 10px;
-
+    }
+    .drawer-content {
+        position: absolute;
+        right:0px;
+        top:96px;
+        width: 50px;
+        background: white;
+        border: 1px solid black;
+        display: none;
+        button {
+            text-align: center;
+            width: 100%;
+            margin: 0;
+            border-radius: 0;
+            border: 1px solid transparent;
+            &:hover {
+                border: 1px solid transparent;
+            }
+            &:not(:last-child) {
+                border-bottom: 1px solid rgba(0,0,0,0.2);
+            }
+        }
     }
 }
 .cryptpad-toolbar-history {
@@ -567,13 +768,16 @@
         border-radius: 5px;
     }
 }
-.cryptpad-spinner > span {
-    height: 16px;
-    width: 16px;
-    margin: 8px;
-    line-height: 16px;
-    font-size: 16px;
-    text-align: center;
+.cryptpad-spinner {
+    line-height: @toolbar-top-height;
+    &> span {
+        height: 16px;
+        width: 16px;
+        margin: 8px;
+        line-height: 16px;
+        font-size: 16px;
+        text-align: center;
+    }
 }
 .cryptpad-readonly {
     margin-right: 5px;
@@ -582,7 +786,6 @@
 }
 .cryptpad-user {
     p.accountData {
-        background: #f0f0f0;
         &> span {
             font-weight: bold;
             span {
@@ -590,14 +793,6 @@
             }
         }
     }
-    .buttonTitle {
-        .fa:not(.fa-caret-down) {
-            margin-right: 5px;
-        }
-        .account-name {
-            margin-left: 5px;
-        }
-    }
 }
 .cryptpad-dropdown-share {
     a {
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index 4526138cd..6c750e550 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -99,6 +99,8 @@
 @topbar-button-color: #fff;
 @topbar-height: 50px;
 
+@toolbar-top-height: 64px;
+
 @main-border-width: 15vw;
 @cp-darkblue: #3333ff;
 @cp-accent2: darken(@cp-darkblue, 20%);
@@ -108,3 +110,12 @@
 @main-bg: url('/customize/bg3.jpg') no-repeat center center;
 
 @category-bg: #f4f4f4;
+
+.unselectable () {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 4e08b3e81..7a63bc9df 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -27,7 +27,7 @@
   display: block;
 }
 .dropdown-bar .dropdown-bar-content a {
-  color: black !important;
+  color: black;
   padding: 5px 16px;
   text-decoration: none;
   display: block;
@@ -41,11 +41,11 @@
 }
 .dropdown-bar .dropdown-bar-content a:hover {
   background-color: #f1f1f1;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content a.active {
   background-color: #e8e8e8;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content hr {
   margin: 5px 0px;
@@ -108,34 +108,50 @@
   color: #000;
   /*
     &.pad {
-        background-color: @toolbar-pad-bg;
-        color: @toolbar-pad-color;
+        @bgcolor: @toolbar-pad-bg;
+        @color: @toolbar-pad-color;
+        background-color: @bgcolor;
+        color: @color;
     }
     &.code {
-        background-color: @toolbar-code-bg;
-        color: @toolbar-code-color;
+        @bgcolor: @toolbar-code-bg;
+        @color: @toolbar-code-color;
+        background-color: @bgcolor;
+        color: @color;
+        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
+            lighten($bgcolor, 15%);
+        }
     }
     &.slide {
-        background-color: @toolbar-slide-bg;
-        color: @toolbar-slide-color;
+        @bgcolor: @toolbar-slide-bg;
+        @color: @toolbar-slide-color;
+        background-color: @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
     }
     &.poll {
-        background-color: @toolbar-poll-bg;
-        color: @toolbar-poll-color;
+        @bgcolor: @toolbar-poll-bg;
+        @color: @toolbar-poll-color;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
     }
     &.whiteboard {
-        background-color: @toolbar-whiteboard-bg;
-        color: @toolbar-whiteboard-color;
+        @bgcolor: @toolbar-whiteboard-bg;
+        @color: @toolbar-whiteboard-color;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
     }
     &.drive {
-        background-color: @toolbar-drive-bg;
-        color: @toolbar-drive-color;
+        @bgcolor: @toolbar-drive-bg;
+        @color: @toolbar-drive-color;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
     }
     &.file {
-        background-color: @toolbar-file-bg;
-        color: @toolbar-file-color;
-    }
-*/
+        @bgcolor: @toolbar-file-bg;
+        @color: @toolbar-file-color;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }*/
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -147,32 +163,473 @@
   z-index: 9001;
 }
 .cryptpad-toolbar.pad {
-  background: linear-gradient(20deg, #1c4fa0 150px, #ddd 150px);
-  border-bottom: 2px solid #1c4fa0;
+  background-color: #1c4fa0;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.pad .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.pad .drawer-content {
+  background-color: #2260c3;
+}
+.cryptpad-toolbar.pad .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.pad .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.pad .drawer-content button:hover {
+  background-color: #1c4fa0;
+}
+.cryptpad-toolbar.pad .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .hoverable:hover .pencilIcon {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .hoverable:hover .pencilIcon:hover {
+  background: #18448a;
+}
+.cryptpad-toolbar.pad .saveIcon {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .saveIcon:hover {
+  background: #18448a;
+}
+.cryptpad-toolbar.pad input {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content {
+  line-height: 14px;
+  background: #18448a;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content a.active {
+  background-color: #143a75;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content a:hover {
+  background-color: #1c4fa0;
+  color: #fff;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content hr {
+  background-color: #112f5f;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content p h2 {
+  background-color: #143a75;
+}
+.cryptpad-toolbar.pad .dropdown-bar-content p .accountData {
+  background-color: #1c4fa0;
 }
 .cryptpad-toolbar.code {
-  background: linear-gradient(20deg, #ffae00 150px, #ddd 150px);
-  border-bottom: 2px solid #ffae00;
+  background-color: #ffae00;
+  color: #000;
+}
+.cryptpad-toolbar.code .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.code .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.code .drawer-content {
+  background-color: #ffbb29;
+}
+.cryptpad-toolbar.code .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.code .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.code .drawer-content button:hover {
+  background-color: #ffae00;
+}
+.cryptpad-toolbar.code .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+.cryptpad-toolbar.code .hoverable:hover .pencilIcon {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+.cryptpad-toolbar.code .hoverable:hover .pencilIcon:hover {
+  background: #e69d00;
+}
+.cryptpad-toolbar.code .saveIcon {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+.cryptpad-toolbar.code .saveIcon:hover {
+  background: #e69d00;
+}
+.cryptpad-toolbar.code input {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+.cryptpad-toolbar.code .dropdown-bar-content {
+  line-height: 14px;
+  background: #e69d00;
+  border: 1px solid #000;
+  color: #000;
+}
+.cryptpad-toolbar.code .dropdown-bar-content a {
+  color: #000;
+}
+.cryptpad-toolbar.code .dropdown-bar-content a.active {
+  background-color: #cc8b00;
+  color: #000;
+}
+.cryptpad-toolbar.code .dropdown-bar-content a:hover {
+  background-color: #ffae00;
+  color: #000;
+}
+.cryptpad-toolbar.code .dropdown-bar-content hr {
+  background-color: #b37a00;
+}
+.cryptpad-toolbar.code .dropdown-bar-content p h2 {
+  background-color: #cc8b00;
+}
+.cryptpad-toolbar.code .dropdown-bar-content p .accountData {
+  background-color: #ffae00;
 }
 .cryptpad-toolbar.slide {
-  background: linear-gradient(20deg, #e57614 150px, #ddd 150px);
-  border-bottom: 2px solid #e57614;
+  background-color: #e57614;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.slide .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.slide .drawer-content {
+  background-color: #ed8b34;
+}
+.cryptpad-toolbar.slide .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.slide .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.slide .drawer-content button:hover {
+  background-color: #e57614;
+}
+.cryptpad-toolbar.slide .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .hoverable:hover .pencilIcon {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .hoverable:hover .pencilIcon:hover {
+  background: #ce6a12;
+}
+.cryptpad-toolbar.slide .saveIcon {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .saveIcon:hover {
+  background: #ce6a12;
+}
+.cryptpad-toolbar.slide input {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content {
+  line-height: 14px;
+  background: #ce6a12;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content a.active {
+  background-color: #b65e10;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content a:hover {
+  background-color: #e57614;
+  color: #fff;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content hr {
+  background-color: #9f520e;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content p h2 {
+  background-color: #b65e10;
+}
+.cryptpad-toolbar.slide .dropdown-bar-content p .accountData {
+  background-color: #e57614;
 }
 .cryptpad-toolbar.poll {
-  background: linear-gradient(20deg, #006304 150px, #ddd 150px);
-  border-bottom: 2px solid #006304;
+  background-color: #006304;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.poll .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.poll .drawer-content {
+  background-color: #008c06;
+}
+.cryptpad-toolbar.poll .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.poll .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.poll .drawer-content button:hover {
+  background-color: #006304;
+}
+.cryptpad-toolbar.poll .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .hoverable:hover .pencilIcon {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .hoverable:hover .pencilIcon:hover {
+  background: #004a03;
+}
+.cryptpad-toolbar.poll .saveIcon {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .saveIcon:hover {
+  background: #004a03;
+}
+.cryptpad-toolbar.poll input {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content {
+  line-height: 14px;
+  background: #004a03;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content a.active {
+  background-color: #003002;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content a:hover {
+  background-color: #006304;
+  color: #fff;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content hr {
+  background-color: #001701;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content p h2 {
+  background-color: #003002;
+}
+.cryptpad-toolbar.poll .dropdown-bar-content p .accountData {
+  background-color: #006304;
 }
 .cryptpad-toolbar.whiteboard {
-  background: linear-gradient(20deg, #800080 150px, #ddd 150px);
-  border-bottom: 2px solid #800080;
+  background-color: #800080;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.whiteboard .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.whiteboard .drawer-content {
+  background-color: #a900a9;
+}
+.cryptpad-toolbar.whiteboard .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.whiteboard .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.whiteboard .drawer-content button:hover {
+  background-color: #800080;
+}
+.cryptpad-toolbar.whiteboard .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .hoverable:hover .pencilIcon {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .hoverable:hover .pencilIcon:hover {
+  background: #670066;
+}
+.cryptpad-toolbar.whiteboard .saveIcon {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .saveIcon:hover {
+  background: #670066;
+}
+.cryptpad-toolbar.whiteboard input {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content {
+  line-height: 14px;
+  background: #670066;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content a.active {
+  background-color: #4d004d;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content a:hover {
+  background-color: #800080;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content hr {
+  background-color: #340033;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content p h2 {
+  background-color: #4d004d;
+}
+.cryptpad-toolbar.whiteboard .dropdown-bar-content p .accountData {
+  background-color: #800080;
 }
 .cryptpad-toolbar.drive {
-  background: linear-gradient(20deg, #0087ff 150px, #ddd 150px);
-  border-bottom: 2px solid #0087ff;
+  background-color: #0087ff;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.drive .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.drive .drawer-content {
+  background-color: #299aff;
+}
+.cryptpad-toolbar.drive .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.drive .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.drive .drawer-content button:hover {
+  background-color: #0087ff;
+}
+.cryptpad-toolbar.drive .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .hoverable:hover .pencilIcon {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .hoverable:hover .pencilIcon:hover {
+  background: #0079e6;
+}
+.cryptpad-toolbar.drive .saveIcon {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .saveIcon:hover {
+  background: #0079e6;
+}
+.cryptpad-toolbar.drive input {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content {
+  line-height: 14px;
+  background: #0079e6;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content a.active {
+  background-color: #006ccc;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content a:hover {
+  background-color: #0087ff;
+  color: #fff;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content hr {
+  background-color: #005eb3;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content p h2 {
+  background-color: #006ccc;
+}
+.cryptpad-toolbar.drive .dropdown-bar-content p .accountData {
+  background-color: #0087ff;
 }
 .cryptpad-toolbar.file {
-  background: linear-gradient(20deg, #cd2532 150px, #ddd 150px);
-  border-bottom: 2px solid #cd2532;
+  background-color: #cd2532;
+  color: #fff;
+}
+.cryptpad-toolbar.file .cryptpad-toolbar-leftside,
+.cryptpad-toolbar.file .cryptpad-toolbar-rightside,
+.cryptpad-toolbar.file .drawer-content {
+  background-color: #dc3f4b;
+}
+.cryptpad-toolbar.file .cryptpad-toolbar-leftside button:hover,
+.cryptpad-toolbar.file .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar.file .drawer-content button:hover {
+  background-color: #cd2532;
+}
+.cryptpad-toolbar.file .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+.cryptpad-toolbar.file .hoverable:hover .pencilIcon {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+.cryptpad-toolbar.file .hoverable:hover .pencilIcon:hover {
+  background: #b7212d;
+}
+.cryptpad-toolbar.file .saveIcon {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+.cryptpad-toolbar.file .saveIcon:hover {
+  background: #b7212d;
+}
+.cryptpad-toolbar.file input {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+.cryptpad-toolbar.file .dropdown-bar-content {
+  line-height: 14px;
+  background: #b7212d;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.cryptpad-toolbar.file .dropdown-bar-content a {
+  color: #fff;
+}
+.cryptpad-toolbar.file .dropdown-bar-content a.active {
+  background-color: #a21d27;
+  color: #fff;
+}
+.cryptpad-toolbar.file .dropdown-bar-content a:hover {
+  background-color: #cd2532;
+  color: #fff;
+}
+.cryptpad-toolbar.file .dropdown-bar-content hr {
+  background-color: #8c1922;
+}
+.cryptpad-toolbar.file .dropdown-bar-content p h2 {
+  background-color: #a21d27;
+}
+.cryptpad-toolbar.file .dropdown-bar-content p .accountData {
+  background-color: #cd2532;
 }
 .cryptpad-toolbar .fa {
   font: normal normal normal 14px/1 FontAwesome;
@@ -189,13 +646,30 @@
   height: 100%;
   border-radius: 0;
   margin: 0;
+  background: transparent;
+}
+.cryptpad-toolbar .separator {
+  content: '';
+  display: inline-block;
+  background: #888;
+  margin: 7px 4px;
+  height: 18px;
+  width: 1px;
+  vertical-align: top;
+}
+.cryptpad-toolbar .separator:last-child {
+  display: none;
 }
 .cryptpad-toolbar button {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   border: 1px solid transparent;
   border-radius: .25rem;
-  color: #000;
-  background-color: #fff;
-  border-color: #ccc;
+  color: inherit;
   font: 12px Ubuntu, Arial, sans-serif;
 }
 .cryptpad-toolbar button#shareButton,
@@ -242,12 +716,16 @@
   display: none;
 }
 .cryptpad-toolbar button * {
-  color: #000;
+  color: inherit;
   font: 12px Ubuntu, Arial, sans-serif;
 }
-.cryptpad-toolbar button:hover {
-  color: #292b2c;
-  background-color: #e6e6e6;
+.cryptpad-toolbar .cryptpad-toolbar-rightside button,
+.cryptpad-toolbar .cryptpad-toolbar-leftside button {
+  background: transparent;
+}
+.cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+.cryptpad-toolbar .cryptpad-toolbar-leftside button:hover {
+  background-color: rgba(50, 50, 50, 0.3);
   border-color: #adadad;
 }
 .cryptpad-toolbar button.upgrade {
@@ -271,74 +749,90 @@
   margin: auto;
   font-size: 20px;
 }
+.cryptpad-toolbar .cryptpad-state {
+  line-height: 64px;
+}
 .cryptpad-toolbar .cryptpad-lag {
-  height: 20px;
-  width: 23px;
-  background: transparent;
   display: inline-block;
-  padding: 3px;
-  margin: 3px;
   vertical-align: top;
   box-sizing: content-box;
   text-align: center;
+  line-height: 64px;
+}
+.cryptpad-toolbar .cryptpad-lag .disconnected {
+  display: none;
+  color: inherit;
+  width: 28px;
+  margin: 8px;
+  font-size: 28px;
+  text-align: center;
+  vertical-align: middle;
 }
-.cryptpad-toolbar .cryptpad-lag span {
+.cryptpad-toolbar .cryptpad-lag .bars {
+  margin: 8px;
+  height: 26px;
+  line-height: 26px;
   display: inline-block;
-  width: 4px;
+}
+.cryptpad-toolbar .cryptpad-lag .bars span {
+  display: inline-block;
+  width: 6px;
   margin: 0;
   margin-right: 1px;
-  background: black;
+  background: white;
   vertical-align: bottom;
   box-sizing: border-box;
   border: 1px solid black;
+  visibility: hidden;
   transition: background 1s, border 1s;
 }
-.cryptpad-toolbar .cryptpad-lag span:last-child {
+.cryptpad-toolbar .cryptpad-lag .bars span:last-child {
   margin-right: 0;
 }
-.cryptpad-toolbar .cryptpad-lag span.bar1 {
-  height: 5px;
+.cryptpad-toolbar .cryptpad-lag .bars span.bar1 {
+  height: 6px;
 }
-.cryptpad-toolbar .cryptpad-lag span.bar2 {
-  height: 10px;
+.cryptpad-toolbar .cryptpad-lag .bars span.bar2 {
+  height: 12px;
 }
-.cryptpad-toolbar .cryptpad-lag span.bar3 {
-  height: 15px;
+.cryptpad-toolbar .cryptpad-lag .bars span.bar3 {
+  height: 18px;
 }
-.cryptpad-toolbar .cryptpad-lag span.bar4 {
-  height: 20px;
+.cryptpad-toolbar .cryptpad-lag .bars span.bar4 {
+  height: 24px;
+}
+.cryptpad-toolbar .cryptpad-lag.dc .disconnected {
+  display: inline;
+}
+.cryptpad-toolbar .cryptpad-lag.dc .bars {
+  display: none;
 }
-.cryptpad-toolbar .cryptpad-lag.lag0 span {
+.cryptpad-toolbar .cryptpad-lag.lag0 span span {
   background: transparent;
-  border-color: red;
 }
 .cryptpad-toolbar .cryptpad-lag.lag1 .bar2,
 .cryptpad-toolbar .cryptpad-lag.lag1 .bar3,
 .cryptpad-toolbar .cryptpad-lag.lag1 .bar4 {
   background: transparent;
 }
-.cryptpad-toolbar .cryptpad-lag.lag1 span {
-  background-color: orange;
-  border-color: orange;
+.cryptpad-toolbar .cryptpad-lag.lag1 span span {
+  visibility: visible;
 }
 .cryptpad-toolbar .cryptpad-lag.lag2 .bar3,
 .cryptpad-toolbar .cryptpad-lag.lag2 .bar4 {
   background: transparent;
 }
-.cryptpad-toolbar .cryptpad-lag.lag2 span {
-  background-color: orange;
-  border-color: orange;
+.cryptpad-toolbar .cryptpad-lag.lag2 span span {
+  visibility: visible;
 }
 .cryptpad-toolbar .cryptpad-lag.lag3 .bar4 {
   background: transparent;
 }
-.cryptpad-toolbar .cryptpad-lag.lag3 span {
-  background-color: #5cb85c;
-  border-color: #5cb85c;
+.cryptpad-toolbar .cryptpad-lag.lag3 span span {
+  visibility: visible;
 }
-.cryptpad-toolbar .cryptpad-lag.lag4 span {
-  background-color: #5cb85c;
-  border-color: #5cb85c;
+.cryptpad-toolbar .cryptpad-lag.lag4 span span {
+  visibility: visible;
 }
 .cryptpad-toolbar div {
   white-space: normal;
@@ -358,14 +852,6 @@
   margin: 3px 2px;
   box-sizing: border-box;
 }
-.cryptpad-toolbar .dropdown-bar-content {
-  margin-top: -3px;
-  margin-right: 2px;
-}
-.cryptpad-toolbar .cryptpad-state {
-  line-height: 32px;
-  /* equivalent to 26px + 2*2px margin used for buttons */
-}
 .cryptpad-toolbar .rightside-button {
   float: right;
   cursor: pointer;
@@ -454,126 +940,191 @@
     display: none;
   }
 }
-@media screen and (max-width: 600px) {
-  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top {
-    height: 67px;
-  }
-}
-@media screen and (max-width: 600px) {
-  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
-  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
-    top: 35px;
-  }
-}
-@media screen and (min-width: 601px) {
-  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
-  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
-    top: 0px;
-  }
+.cryptpad-toolbar:not(.notitle) {
+  /*.cryptpad-toolbar-top {
+        @media screen and (max-width: @media-medium-screen) {
+            height: 67px;
+        }
+        .cryptpad-link, .cryptpad-user {
+            @media screen and (max-width: @media-medium-screen) {
+                top: 35px;
+            }
+            @media screen and (min-width: (@media-medium-screen + 1px)) {
+                top: 0px;
+            }
+        }
+    }*/
 }
 .cryptpad-toolbar-top {
-  display: block;
-  text-align: center;
-  height: 32px;
+  display: flex;
+  flex-flow: row;
+  height: 64px;
   position: relative;
 }
+.cryptpad-toolbar-top .cryptpad-title {
+  order: 3;
+  height: 100%;
+  display: inline-block;
+  line-height: 64px;
+  flex: 1;
+  margin-left: 20px;
+}
 .cryptpad-toolbar-top .cryptpad-title .title,
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon,
 .cryptpad-toolbar-top .cryptpad-title .saveIcon {
-  font-size: 1.5em;
+  font-size: 25px;
   vertical-align: middle;
-  line-height: 32px;
+  line-height: 25px;
 }
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
-  margin-left: 11px;
-}
-.cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover {
-  color: #999;
-  margin-left: 0px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 0px 2px 2px 0px;
+  padding: 5px;
+  border-collapse: collapse;
 }
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
+  font-size: 25px;
   cursor: pointer;
 }
 .cryptpad-toolbar-top .cryptpad-title .saveIcon {
   cursor: pointer;
-  border: 1px solid black;
   border-radius: 0px 2px 2px 0px;
-  background: white;
   padding: 5px;
-  display: inline;
-  margin-left: -1px;
   border-collapse: collapse;
 }
-.cryptpad-toolbar-top .cryptpad-title .saveIcon:hover {
-  color: #999;
-}
 .cryptpad-toolbar-top .cryptpad-title .saveIcon span {
+  font-size: 25px;
   cursor: pointer;
 }
-.cryptpad-toolbar-top .cryptpad-title:not(input):hover .editable {
-  border: 1px solid #888;
+.cryptpad-toolbar-top .cryptpad-title .editable {
+  border: 1px solid transparent;
   border-radius: 2px 0px 0px 2px;
-  background: white;
-  padding: 5px;
-  border-collapse: collapse;
-}
-.cryptpad-toolbar-top .cryptpad-title:not(input):hover .pencilIcon {
-  cursor: pointer;
-  border: 1px solid #888;
-  border-radius: 0px 2px 2px 0px;
-  background: white;
   padding: 5px;
-  display: inline;
-  margin-left: -1px;
   border-collapse: collapse;
 }
 .cryptpad-toolbar-top .cryptpad-title input {
   font-size: 1.5em;
   vertical-align: middle;
   box-sizing: border-box;
-  border: 1px solid black;
-  background: #fff;
   cursor: auto;
   width: 300px;
+  font-size: 25px;
   padding: 5px 5px;
+  height: 40px;
+}
+.cryptpad-toolbar-top .cryptpad-link,
+.cryptpad-toolbar-top .cryptpad-new {
+  font-size: 48px;
+  line-height: 64px;
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  color: white;
+  transition: all 0.15s;
+}
+.cryptpad-toolbar-top .cryptpad-new {
+  background-color: rgba(0, 0, 0, 0.2);
+  order: 2;
+  text-align: center;
+}
+.cryptpad-toolbar-top .cryptpad-new:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.cryptpad-toolbar-top .cryptpad-new > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px !important;
+  font-size: 1em;
+  color: inherit;
+  height: auto;
+  padding: 0px;
+  margin: 0;
+}
+.cryptpad-toolbar-top .cryptpad-new > button::before {
+  padding-top: 4px;
+}
+.cryptpad-toolbar-top .cryptpad-new > button:hover {
+  background-color: initial;
+  border-color: transparent;
+}
+.cryptpad-toolbar-top .cryptpad-new > button span {
+  vertical-align: top;
+  font-size: 1em;
+  text-decoration: none;
+  color: inherit;
+}
+.cryptpad-toolbar-top .cryptpad-new .dropdown-bar-content {
+  font-size: 12px;
+  line-height: 14px;
 }
 .cryptpad-toolbar-top .cryptpad-link {
-  position: absolute;
-  left: 0px;
-  height: 32px;
-  background: #0087ff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.4);
+  order: 1;
+}
+.cryptpad-toolbar-top .cryptpad-link:hover {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
   cursor: pointer;
-  height: 32px;
+  font-size: 1em;
+  height: auto;
   padding: 0px 5px;
   text-decoration: none;
   color: inherit;
 }
-.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo:hover span {
-  text-decoration: underline;
+.cryptpad-toolbar-top .cryptpad-user {
+  height: 100%;
+  display: inline-block;
+  order: 4;
+  line-height: 64px;
 }
-.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo img {
-  vertical-align: middle;
-  height: 32px;
-  cursor: pointer;
+.cryptpad-toolbar-top .cryptpad-user > * {
+  display: inline-block;
+  height: 100%;
+  vertical-align: top;
 }
-.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo span {
-  font-size: 1.5em;
-  margin-left: 5px;
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-upgrade {
+  height: 32px;
   vertical-align: middle;
   cursor: pointer;
 }
-.cryptpad-toolbar-top .cryptpad-user {
-  height: 100%;
-  position: absolute;
-  right: 0;
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown {
+  margin-left: 20px;
+  height: 64px;
+  width: 64px;
+  padding: 0px;
+  box-sizing: border-box;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.3);
 }
-.cryptpad-toolbar-top .cryptpad-user :not(.cryptpad-lag) span {
-  vertical-align: top;
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown .dropdown-bar-content {
+  margin: 0;
+}
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  width: 64px;
+  padding: 0;
 }
-.cryptpad-toolbar-top .cryptpad-user button span.fa {
-  vertical-align: baseline;
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown button span {
+  font-size: 32px;
+}
+.cryptpad-toolbar-top .cryptpad-user .cryptpad-user-dropdown button span .fa {
+  margin-left: 3px;
 }
 .cryptpad-toolbar-leftside {
   height: 32px;
@@ -601,6 +1152,28 @@
   border-radius: 0;
   padding: 0 10px;
 }
+.cryptpad-toolbar-rightside .drawer-content {
+  position: absolute;
+  right: 0px;
+  top: 96px;
+  width: 50px;
+  background: white;
+  border: 1px solid black;
+  display: none;
+}
+.cryptpad-toolbar-rightside .drawer-content button {
+  text-align: center;
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+  border: 1px solid transparent;
+}
+.cryptpad-toolbar-rightside .drawer-content button:hover {
+  border: 1px solid transparent;
+}
+.cryptpad-toolbar-rightside .drawer-content button:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
 .cryptpad-toolbar-history {
   display: none;
   text-align: center;
@@ -632,6 +1205,9 @@
   padding: 3px 3px;
   border-radius: 5px;
 }
+.cryptpad-spinner {
+  line-height: 64px;
+}
 .cryptpad-spinner > span {
   height: 16px;
   width: 16px;
@@ -645,21 +1221,12 @@
   font-weight: bold;
   text-transform: uppercase;
 }
-.cryptpad-user p.accountData {
-  background: #f0f0f0;
-}
 .cryptpad-user p.accountData > span {
   font-weight: bold;
 }
 .cryptpad-user p.accountData > span span {
   font-weight: normal;
 }
-.cryptpad-user .buttonTitle .fa:not(.fa-caret-down) {
-  margin-right: 5px;
-}
-.cryptpad-user .buttonTitle .account-name {
-  margin-left: 5px;
-}
 .cryptpad-dropdown-share a .fa {
   margin-right: 5px;
 }
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index d63d81cbc..c01da201c 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -74,7 +74,7 @@ define(function () {
 
     out.greenLight = "Tout fonctionne bien";
     out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
-    out.redLight = "Vous êtes déconnectés de la session";
+    out.redLight = "Vous êtes déconnecté de la session";
 
     out.pinLimitReached = "Vous avez atteint votre limite de stockage";
     out.updated_0_pinLimitReachedAlert = "Vous avez atteint votre limite de stockage. Les nouveaux pads ne seront pas enregistrés dans votre CryptDrive.<br>" +
diff --git a/www/common/common-hash.js b/www/common/common-hash.js
index c4f452dc7..48186239c 100644
--- a/www/common/common-hash.js
+++ b/www/common/common-hash.js
@@ -100,6 +100,8 @@ Version 1
 
         var ret = {};
 
+    if (typeof href !== "string") { console.error(href); }
+
         if (!href) { return ret; }
         if (href.slice(-1) !== '/') { href += '/'; }
 
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index a385dea91..26295c14a 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -530,7 +530,7 @@ define([
     };
 
     common.setPadTitle = function (name, padHref, cb) {
-        var href = padHref || window.location.href;
+        var href = typeof padHref === "string" ? padHref : window.location.href;
         var parsed = parsePadUrl(href);
         if (!parsed.hash) { return; }
         href = getRelativeHref(href);
@@ -924,6 +924,7 @@ define([
     common.createButton = function (type, rightside, data, callback) {
         var button;
         var size = "17px";
+        console.log(type);
         switch (type) {
             case 'export':
                 button = $('<button>', {
@@ -1096,6 +1097,13 @@ define([
                     });
                 }
                 break;
+            case 'more':
+                button = $('<button>', {
+                    title: Messages.moreActions || 'TODO',
+                    'class': "fa fa-ellipsis-h",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
@@ -1143,9 +1151,9 @@ define([
         var $button = $('<button>', {
             'class': ''
         }).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
-        $('<span>', {
+        /*$('<span>', {
             'class': 'fa fa-caret-down',
-        }).appendTo($button);
+        }).appendTo($button);*/
 
         // Menu
         var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
@@ -1186,7 +1194,7 @@ define([
             }
         };
 
-        $button.click(function (e) {
+        $container.click(function (e) {
             e.stopPropagation();
             var state = $innerblock.is(':visible');
             $('.dropdown-bar-content').hide();
@@ -1365,15 +1373,19 @@ define([
                 content: Messages.login_register
             });
         }
-        var $icon = $('<span>', {'class': 'fa fa-user'});
-        var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
-        var $userButton = $('<div>').append($icon).append($userbig);
-        if (account && config.displayNameCls) {
+        var $icon = $('<span>', {'class': 'fa fa-user-secret'});
+        //var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
+        var $userButton = $('<div>').append($icon);//.append($userbig);
+        if (account) {
+
+            $userButton = $('<div>').append(accountName.slice(0,1).toUpperCase());
+        }
+        /*if (account && config.displayNameCls) {
             $userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
         } else if (account) {
             // If no display name, do not display the parentheses
             $userbig.append($('<span>', {'class': 'account-name'}).text(accountName));
-        }
+        }*/
         var dropdownConfigUser = {
             text: $userButton.html(), // Button initial text
             options: options, // Entries displayed in the menu
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index c16314f69..d4f986cad 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -17,6 +17,7 @@ define([
     var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top';
     var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
     var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
+    var DRAWER_CLS = Bar.constants.drawer = 'drawer-content';
     var HISTORY_CLS = Bar.constants.history = 'cryptpad-toolbar-history';
 
     // Userlist
@@ -81,7 +82,7 @@ define([
         $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
-        $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        //$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer)
@@ -89,6 +90,15 @@ define([
         .append($('<div>', {'class': RIGHTSIDE_CLS}))
         .append($('<div>', {'class': HISTORY_CLS}));
 
+        var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
+        if (!config.hideDrawer) {
+            var $drawerContent = $('<div>', {'class': 'drawer-content'}).appendTo($rightside);
+            var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
+            $drawer.click(function (e) {
+                $drawerContent.toggle();
+            });
+        }
+
         // The 'notitle' class removes the line added for the title with a small screen
         if (!config.title || typeof config.title !== "object") {
             $toolbar.addClass('notitle');
@@ -216,9 +226,11 @@ define([
         var fa_viewusers = '<span class="fa fa-eye"></span>';
         var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
         var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
-        var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
-        var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
-        $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
+        //var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
+        //var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
+        //$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
+        var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
+        $userButtons.find('.buttonTitle').html('').append($spansmall);
 
         // Change username in useradmin dropdown
         if (config.displayed.indexOf('useradmin') !== -1) {
@@ -269,6 +281,7 @@ define([
         };
         var $block = Cryptpad.createDropdown(dropdownConfig);
         $block.attr('id', 'userButtons');
+        toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
         toolbar.$leftside.prepend($block);
 
         return $block;
@@ -282,7 +295,6 @@ define([
         }
         Cryptpad.getRecentPads(function (err, recent) {
             var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-            var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
             var hashes = Cryptpad.getHashes(channel, secret);
             var options = [];
 
@@ -342,11 +354,11 @@ define([
                 });
             }
             var dropdownConfigShare = {
-                text: $('<div>').append($shareIcon).append($span).html(),
+                text: $('<div>').append($shareIcon).html(),
                 options: options
             };
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
-            $shareBlock.find('button').attr('id', 'shareButton');
+            //$shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
 
             if (hashes.editHash) {
@@ -401,6 +413,8 @@ define([
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
+        var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
+
         if (typeof config.title !== "object") {
             console.error("config.title", config);
             throw new Error("config.title is not an object");
@@ -412,7 +426,7 @@ define([
         // Buttons
         var $text = $('<span>', {
             'class': 'title'
-        }).appendTo($titleContainer);
+        }).appendTo($hoverable);
         var $pencilIcon = $('<span>', {
             'class': 'pencilIcon',
             'title': Messages.clickToEdit
@@ -425,7 +439,7 @@ define([
         var $input = $('<input>', {
             type: 'text',
             placeholder: placeholder
-        }).appendTo($titleContainer).hide();
+        }).appendTo($hoverable).hide();
         if (config.readOnly !== 1) {
             $text.attr("title", Messages.clickToEdit);
             $text.addClass("editable");
@@ -433,12 +447,12 @@ define([
                 'class': 'fa fa-pencil readonly',
                 style: 'font-family: FontAwesome;'
             });
-            $pencilIcon.append($icon).appendTo($titleContainer);
+            $pencilIcon.append($icon).appendTo($hoverable);
             var $icon2 = $('<span>', {
                 'class': 'fa fa-check readonly',
                 style: 'font-family: FontAwesome;'
             });
-            $saveIcon.append($icon2).appendTo($titleContainer);
+            $saveIcon.append($icon2).appendTo($hoverable);
         }
 
         // Events
@@ -454,15 +468,14 @@ define([
             if (name === "") {
                 name = $input.attr('placeholder');
             }
-            Cryptpad.renamePad(name, function (err, newtitle) {
-                if (err) { return; }
+            Cryptpad.renamePad(name, null, function (err, newtitle) {
+                if (err) { return console.error(err); }
                 $text.text(newtitle);
                 callback(null, newtitle);
                 $input.hide();
                 $text.show();
                 $pencilIcon.show();
                 $saveIcon.hide();
-                //$pencilIcon.css('display', '');
             });
         };
         $input.on('keyup', function (e) {
@@ -498,20 +511,13 @@ define([
         var $linkContainer = $('<span>', {
             'class': "cryptpad-link"
         }).appendTo(toolbar.$top);
-        var $imgTag = $('<img>', {
-            src: "/customize/cryptofist_mini.png",
-            alt: "Cryptpad"
-        });
 
         // We need to override the "a" tag action here because it is inside the iframe!
-        var $aTagSmall = $('<a>', {
+        var $aTag = $('<a>', {
             href: "/",
             title: Messages.header_logoTitle,
-            'class': "cryptpad-logo"
-        }).append($imgTag);
-        //var $span = $('<span>').text('CryptDrive');
-        var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
-        $aTagSmall.addClass('narrow');
+            'class': "cryptpad-logo fa fa-hdd-o"
+        });
         var onClick = function (e) {
             e.preventDefault();
             if (e.ctrlKey) {
@@ -523,10 +529,9 @@ define([
 
         var onContext = function (e) { e.stopPropagation(); };
 
-        $aTagBig.click(onClick).contextmenu(onContext);
-        $aTagSmall.click(onClick).contextmenu(onContext);
+        $aTag.click(onClick).contextmenu(onContext);
 
-        $linkContainer.append($aTagSmall).append($aTagBig);
+        $linkContainer.append($aTag);
 
         return $linkContainer;
     };
@@ -539,9 +544,6 @@ define([
         if(typeof getLag === "function") {
             lag = getLag();
         }
-        var lagLight = $('<div>', {
-            'class': 'lag'
-        });
         var title;
         if (lag && toolbar.connected) {
             $lag.attr('class', LAG_CLS);
@@ -566,9 +568,10 @@ define([
         }
         else if (!toolbar.firstConnection) {
             $lag.attr('class', LAG_CLS);
-            // Display the red light at the 2nd failed attemp to get the lag
-            lagLight.addClass('lag-red');
+            $lag.addClass('dc');
             title = Messages.redLight;
+        } else {
+            $lag.addClass('lag4');
         }
         if (title) {
             $lag.attr('title', title);
@@ -576,10 +579,12 @@ define([
     };
     var createLag = function (toolbar, config) {
         var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
-        $('<span>', {'class': 'bar1'}).appendTo($a);
-        $('<span>', {'class': 'bar2'}).appendTo($a);
-        $('<span>', {'class': 'bar3'}).appendTo($a);
-        $('<span>', {'class': 'bar4'}).appendTo($a);
+        var $container = $('<span>', {'class': 'bars'}).appendTo($a);
+        $('<span>', {'class': 'bar1'}).appendTo($container);
+        $('<span>', {'class': 'bar2'}).appendTo($container);
+        $('<span>', {'class': 'bar3'}).appendTo($container);
+        $('<span>', {'class': 'bar4'}).appendTo($container);
+        $('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
         if (config.realtime) {
             checkLag(toolbar, config, $a);
             setInterval(function () {
@@ -664,7 +669,9 @@ define([
     };
 
     var createNewPad = function (toolbar) {
-        var $newPad = toolbar.$userAdmin.find('.'+NEWPAD_CLS).show();
+        var $newPad = $('<span>', {
+            'class': "cryptpad-new dropdown-bar"
+        }).appendTo(toolbar.$top);
 
         var pads_options = [];
         Config.availablePadTypes.forEach(function (p) {
@@ -680,18 +687,14 @@ define([
                 content: Messages.type[p]
             });
         });
-        var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
-        var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
-        var $newButton = $('<div>').append($plusIcon).append($newbig);
         var dropdownConfig = {
-            text: $newButton.html(), // Button initial text
+            text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu
-            left: true, // Open to the left of the button,
             container: $newPad
         };
         var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
         $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
-        $newPadBlock.find('button').attr('id', 'newdoc');
+        $newPadBlock.find('button').addClass('fa fa-plus');
         return $newPadBlock;
     };
 
@@ -901,6 +904,7 @@ define([
         var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
         toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
         toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
+        toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
         toolbar.$top = $toolbar.find('.'+Bar.constants.top);
         toolbar.$history = $toolbar.find('.'+Bar.constants.history);
 
diff --git a/www/pad/main.js b/www/pad/main.js
index 2a48f12a3..6538f0222 100644
--- a/www/pad/main.js
+++ b/www/pad/main.js
@@ -472,6 +472,7 @@ define([
                 Title.setToolbar(toolbar);
 
                 var $rightside = toolbar.$rightside;
+                var $drawer = toolbar.$drawer;
 
                 var editHash;
 
@@ -513,7 +514,7 @@ define([
                     $toolbar: $bar
                 };
                 var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-                $rightside.append($hist);
+                $drawer.append($hist);
 
                 /* save as template */
                 if (!Cryptpad.isTemplate(window.location.href)) {
@@ -528,12 +529,12 @@ define([
 
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportFile);
-                $rightside.append($export);
+                $drawer.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
                     var $import = Cryptpad.createButton('import', true, {}, importFile);
-                    $rightside.append($import);
+                    $drawer.append($import);
                 }
 
                 /* add a forget button */