Use less2 in secure iframes

customize.dist/application_config.js

@@ -51,5 +51,16 @@ define(function() {
     config.loginSalt = '';
     config.badStateTimeout = 30000;
 
+    config.applicationsIcon = {
+        file: 'fa-file-text-o',
+        pad: 'fa-file-word-o',
+        code: 'fa-file-code-o',
+        slide: 'fa-file-powerpoint-o',
+        poll: 'fa-calendar',
+        whiteboard: 'fa-paint-brush',
+        todo: 'fa-tasks',
+        contacts: 'fa-users',
+    };
+
     return config;
 });

customize.dist/header.js

@@ -41,7 +41,7 @@ define([
         $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         if (Cryptpad.isLoggedIn() && ApiConfig.allowSubscriptions) {

customize.dist/main.js

@@ -15,7 +15,7 @@ define([
         var $main = $('#mainBlock');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         // main block is hidden in case javascript is disabled
@@ -61,7 +61,7 @@ define([
         var displayCreateButtons = function () {
             var $parent = $('#buttons');
             var options = [];
-            var $container = $('<div>', {'class': 'dropdown-bar'}).appendTo($parent);
+            var $container = $('<div>', {'class': 'cp-dropdown-container'}).appendTo($parent);
             Config.availablePadTypes.forEach(function (el) {
                 if (el === 'drive') { return; }
                 if (!Cryptpad.isLoggedIn() && Config.registeredOnlyTypes &&

customize.dist/src/less/cryptpad.less

@@ -458,7 +458,7 @@ noscript {
             padding: 0;
             &.buttons {
                 margin-bottom: 10px;
-                .dropdown-bar {
+                .cp-dropdown-container {
                     button {
                         white-space: normal;
                         text-align: left;

customize.dist/src/less/dropdown.less

@@ -1,115 +1,4 @@
-@import (once) "../less2/include/colortheme.less";
+@import (once) "../less2/include/dropdown.less";
 
-/* The container <div> - needed to position the dropdown content */
+.dropdown_main();
-.dropdown-bar {
-    position: relative;
-    display: inline-block;
-
-    .dropbtn {
-    }
-
-    &:hover {
-        .dropbtn {
-        }
-    }
-
-    .fa {
-        font-family: FontAwesome;
-    }
-
-    button {
-        .fa-caret-down{
-            margin-right: 0px;
-            margin-left: 5px;
-        }
-        * {
-            .unselectable();
-            cursor: default;
-        }
-    }
-
-    .dropdown-bar-content {
-        display: none;
-        position: absolute;
-        background-color: @dropdown-bg;
-        min-width: 250px;
-        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
-        z-index: 1000;
-        max-height: 300px;
-        overflow-y: auto;
-        font-family: @colortheme_font;
-        font-size: 16px;
-        line-height: 1em;
-
-        &.left {
-            right: 0;
-        }
-
-        &:hover {
-            display: block;
-        }
-
-        a {
-            color: @dropdown-color;
-            padding: 5px 16px;
-            text-decoration: none;
-            display: flex;
-            cursor: pointer;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            float: none;
-            text-align: left;
-            font: @dropdown-font;
-            line-height: 1em;
-
-
-            .fa {
-                width: 20px;
-                text-align: center;
-                margin-right: 5px !important;
-            }
-
-            &:hover {
-                background-color: @dropdown-bg-hover;
-                color: @dropdown-color;
-            }
-
-            &.active {
-                background-color: @dropdown-bg-active;
-                color: @dropdown-color;
-            }
-        }
-
-        hr {
-            margin: 5px 0px;
-            height: 1px;
-            background: #bbb;
-        }
-
-        p {
-            min-width: 160px;
-            padding: 5px;
-            margin: 0;
-            white-space: normal;
-            text-align: left;
-            color: black;
-            font-size: 14px;
-            * {
-                font-size: 14px;
-            }
-            h2 {
-                color: black;
-                font-weight: bold;
-                text-align: center;
-                background-color: #EEEEEE;
-                padding: 5px 0px;
-                margin: 5px 0px;
-                font-size: 16px;
-                white-space: normal;
-            }
-        }
-    }
-}
 

customize.dist/src/less/toolbar.less

@@ -1,8 +1,16 @@
 @import "./variables.less";
 @import "./mixins.less";
 
-@import "./dropdown.less";
+@import (once) "../less2/include/dropdown.less";
 @import (once) "../less2/include/colortheme.less";
+@import (once) "../less2/include/ckeditor-fix.less";
+@import (once) "../less2/include/icon-colors.less";
+
+.dropdown_main();
+
+.ckeditor_fix();
+
+.iconColors_main();
 
 .unselectable {
     -webkit-touch-callout: none;
@@ -13,51 +21,9 @@
     user-select: none;
 }
 
-.cke_reset_all * {
-    color: inherit;
-}
-
-
-// Classes used in common-interface.js
-.padColor { color: @toolbar-pad-bg; }
-.codeColor { color: @toolbar-code-bg; }
-.slideColor { color: @toolbar-slide-bg; }
-.pollColor { color: @toolbar-poll-bg; }
-.fileColor { color: @toolbar-file-bg; }
-.friendsColor { color: @toolbar-friends-bg; }
-.whiteboardColor { color: @toolbar-whiteboard-bg; }
-.driveColor { color: @toolbar-drive-bg; }
-.settingsColor { color: @toolbar-settings-bg; }
-.profileColor { color: @toolbar-settings-bg; }
-.defaultColor { color: @toolbar-default-bg; }
-.todoColor { color:@toolbar-todo-bg; }
-
 .toolbar-container {
     display: flex;
 }
-#cke_editor1 .cke_inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    flex-flow: column;
-}
-.cke_toolbox_main {
-    display: inline-block;
-    margin-bottom: -3px;
-}
-#cke_1_contents {
-    flex: 1;
-    margin-top: -1px;
-    display: flex;
-    overflow: visible;
-    iframe {
-        min-height: 100%;
-        width: 100%;
-    }
-}
 
 body .userlist-drawer {
     font: @main-font-size @colortheme_font;
@@ -201,36 +167,9 @@ body {
                 background: darken(@bgcolor, 10%);
                 color: @color;
             }
-            .dropdown-bar-content.left a {
+            .cp-dropdown-content.cp-dropdown-left a {
                 color: black;
             }
-            /*.dropdown-bar-content {
-                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;
-                    }
-                }
-            }*/
         }
     }
 
@@ -322,7 +261,7 @@ body .cryptpad-toolbar {
     width: 100%;
     z-index: 9001;
 
-    .dropdown-bar {
+    .cp-dropdown-container {
         //height: 100%;
         //display: inline-block;
         button {
@@ -865,7 +804,7 @@ body .cryptpad-toolbar {
             &:hover {
                 background-color: rgba(0,0,0,0.4);
             }
-            .dropdown-bar-content {
+            .cp-dropdown-content {
                 margin: 0;
             }
             button {
@@ -929,7 +868,7 @@ body .cryptpad-toolbar {
         border-radius: 0;
         height: 100%;
     }
-    .dropdown-bar-content {
+    .cp-dropdown-content {
         margin-top: -1px;
     }
 

customize.dist/src/less/topbar.less

@@ -67,7 +67,7 @@
         }
 
         button {
-            .buttonTitle {
+            .cp-dropdown-button-title {
                 .fa-user {
                     margin-right: 5px;
                 }

customize.dist/src/less/variables.less

@@ -81,8 +81,8 @@
 @toolbar-settings-color: @colortheme_settings-color;
 @toolbar-profile-bg: @colortheme_profile-bg;
 @toolbar-profile-color: @colortheme_profile-color;
-@toolbar-todo-bg: #7bccd1;
+@toolbar-todo-bg: @colortheme_todo-bg;
-@toolbar-todo-color: #000;
+@toolbar-todo-color: @colortheme_todo-color;
 
 @topbar-back: #fff;
 @topbar-color: #000;

customize.dist/src/less2/include/alertify.less

@@ -1,5 +1,6 @@
 @import (once) "./colortheme.less";
 @import (once) "./browser.less";
+@import (once) "./modal-theme.less";
 
 .alertify_main () {
     @alertify-fore: @colortheme_modal-fg;
@@ -19,13 +20,14 @@
     @alertify-input-bg: @colortheme_modal-input;
     @alertify-input-fg: @colortheme_modal-fg;
 
-    @alertify_padding-base: @colortheme_modal-padding;
+    @alertify_padding-base: @modal_padding;
-    @alertify_box-shadow: @colortheme_modal-shadow;
+    @alertify_box-shadow: @modal_shadow;
 
     // Logs to show that something has happened
     // These show only once
 
     .alertify-logs {
+        z-index:10000;
         @media print {
             visibility: hidden;
         }

customize.dist/src/less2/include/app-noscroll.less

@@ -0,0 +1,20 @@
+// html
+.noscroll_main () {
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+    position: relative;
+    body {
+        height: 100%;
+        width: 100%;
+        padding: 0px;
+        margin: 0px;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+    }
+}
+

customize.dist/src/less2/include/avatar.less

@@ -0,0 +1,38 @@
+.avatar_main (@width) {
+    &.cp-avatar {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    .cp-avatar-default, media-tag {
+        display: inline-flex;
+        width: @width;
+        height: @width;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        overflow: hidden;
+        box-sizing: content-box;
+    }
+    .cp-avatar-default {
+        .unselectable();
+        background: white;
+        color: black;
+        font-size: @width/1.2;
+    }
+    media-tag {
+        min-height: @width;
+        min-width: @width;
+        max-height: @width;
+        max-width: @width;
+        img {
+            min-width: 100%;
+            min-height: 100%;
+            max-width: none;
+            max-height: none; // To override 'media-tag img' in slide.less
+        }
+    }
+    }
+}
+

customize.dist/src/less2/include/ckeditor-fix.less

@@ -0,0 +1,35 @@
+.ckeditor_fix () {
+
+    .cke_reset_all * {
+        color: inherit;
+    }
+    #cke_editor1 .cke_inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        flex-flow: column;
+    }
+    .cke_toolbox_main {
+        display: inline-block;
+        margin-bottom: -3px;
+    }
+    #cke_1_contents {
+        flex: 1;
+        margin-top: -1px;
+        display: flex;
+        overflow: visible;
+        iframe {
+            min-height: 100%;
+            width: 100%;
+        }
+    }
+    .cke_toolbox .cp-toolbar-history {
+        input.gotoInput { // TODO
+            padding: 3px 3px;
+        }
+    }
+
+}

customize.dist/src/less2/include/colortheme.less

@@ -1,4 +1,6 @@
 @colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
+@colortheme_app-font-size: 16px;
+@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
 
 @colortheme_link-color: #0275D8;
 @colortheme_link-color-visited: #005999;
@@ -18,8 +20,6 @@
 @colortheme_modal-link: #eee;
 @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
 @colortheme_modal-dim: rgba(0, 0, 0, 0.4);
-@colortheme_modal-padding: 12px;
-@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
 
 @colortheme_modal-input: #111;
 
@@ -29,6 +29,11 @@
 @colortheme_notification-log: rgba(0, 0, 0, 0.8);
 @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
 
+@colortheme_dropdown-bg: #f9f9f9;
+@colortheme_dropdown-color: black;
+@colortheme_dropdown-bg-hover: #f1f1f1;
+@colortheme_dropdown-bg-active: #e8e8e8;
+
 // Apps
 
 @colortheme_pad-bg: #1c4fa0;
@@ -64,6 +69,9 @@
 @colortheme_profile-bg: #0087ff;
 @colortheme_profile-color: #fff;
 
+@colortheme_todo-bg: #7bccd1;
+@colortheme_todo-color: #000;
+
 @cryptpad_color_blue: #4591C4; 
 @cryptpad_color_grey: #999999;
 @cryptpad_header_col: #1E1F1F;

customize.dist/src/less2/include/dropdown.less

@@ -0,0 +1,109 @@
+@import (once) "./colortheme.less";
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown_main () {
+    .cp-dropdown-container {
+        @dropdown_font: @colortheme_app-font-size @colortheme_font;
+        position: relative;
+        display: inline-block;
+
+        .fa {
+            font-family: FontAwesome;
+        }
+
+        button {
+            .fa-caret-down{
+                margin-right: 0px;
+                margin-left: 5px;
+            }
+            * {
+                .unselectable();
+                cursor: default;
+            }
+        }
+
+        .cp-dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: @colortheme_dropdown-bg;
+            min-width: 250px;
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            max-height: 300px;
+            overflow-y: auto;
+            font: @dropdown_font;
+            line-height: 1em;
+
+            &.cp-dropdown-left {
+                right: 0;
+            }
+
+            &:hover {
+                display: block;
+            }
+
+            a {
+                color: @colortheme_dropdown-color;
+                padding: 5px 16px;
+                text-decoration: none;
+                display: flex;
+                cursor: pointer;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                float: none;
+                text-align: left;
+                font: @dropdown_font;
+                line-height: 1em;
+
+
+                .fa {
+                    width: 20px;
+                    text-align: center;
+                    margin-right: 5px !important;
+                }
+
+                &:hover {
+                    background-color: @colortheme_dropdown-bg-hover;
+                    color: @colortheme_dropdown-color;
+                }
+
+                &.cp-dropdown-element-active {
+                    background-color: @colortheme_dropdown-bg-active;
+                    color: @colortheme_dropdown-color;
+                }
+            }
+
+            hr {
+                margin: 5px 0px;
+                height: 1px;
+                background: #bbb;
+            }
+
+            p {
+                min-width: 160px;
+                padding: 5px;
+                margin: 0;
+                white-space: normal;
+                text-align: left;
+                color: black;
+                font-size: 14px;
+                * {
+                    font-size: 14px;
+                }
+                h2 {
+                    color: black;
+                    font-weight: bold;
+                    text-align: center;
+                    background-color: #EEEEEE;
+                    padding: 5px 0px;
+                    margin: 5px 0px;
+                    font-size: 16px;
+                    white-space: normal;
+                }
+            }
+        }
+    }
+}
+

customize.dist/src/less2/include/fileupload.less

@@ -0,0 +1,52 @@
+@import (once) './colortheme.less';
+@import (once) './modal.less';
+
+.fileupload_main () {
+    /* Upload status table */
+    #cp-fileupload {
+        .modal_base();
+        position: absolute;
+        left: 10vw; right: 10vw;
+        bottom: 10vh;
+        opacity: 0.9;
+        box-sizing: border-box;
+        z-index: 10000;
+        display: none;
+        #cp-fileupload-table {
+            width: 80vw;
+            tr:nth-child(1) {
+                background-color: darken(@colortheme_modal-bg, 20%);
+                td {
+                    text-align: center;
+                    font-weight: bold;
+                    padding: 0.25em;
+                }
+            }
+            @upload_pad_h: 0.25em;
+            @upload_pad_v: 0.5em;
+
+            td {
+                padding: @upload_pad_h @upload_pad_v;
+            }
+            .cp-fileupload-table-progress {
+                width: 200px;
+                position: relative;
+                text-align: center;
+                box-sizing: border-box;
+            }
+            .cp-fileupload-table-progress-container {
+                position: absolute;
+                width: 0px;
+                left: @upload_pad_v;
+                top: @upload_pad_h; bottom: @upload_pad_h;
+                background-color: rgba(0,0,255,0.3);
+                z-index: -1;
+            }
+            .cp-fileupload-table-cancel { text-align: center; }
+            .fa.cancel {
+                color: rgb(255, 0, 115);
+            }
+        }
+    }
+}
+

customize.dist/src/less2/include/icon-colors.less

@@ -0,0 +1,17 @@
+@import (once) "./colortheme.less";
+.iconColors_main () {
+    // Classes used in common-interface.js
+    .cp-icon-color-pad { color: @colortheme_pad-bg; }
+    .cp-icon-color-code { color: @colortheme_code-bg; }
+    .cp-icon-color-slide { color: @colortheme_slide-bg; }
+    .cp-icon-color-poll { color: @colortheme_poll-bg; }
+    .cp-icon-color-file { color: @colortheme_file-bg; }
+    .cp-icon-color-friends { color: @colortheme_friends-bg; }
+    .cp-icon-color-whiteboard { color: @colortheme_whiteboard-bg; }
+    .cp-icon-color-drive { color: @colortheme_drive-bg; }
+    .cp-icon-color-settings { color: @colortheme_settings-bg; }
+    .cp-icon-color-profile { color: @colortheme_settings-bg; }
+    .cp-icon-color-default { color: @colortheme_default-bg; }
+    .cp-icon-color-todo { color:@colortheme_todo-bg; }
+}
+

customize.dist/src/less2/include/markdown.less

@@ -0,0 +1,27 @@
+.markdown_preformatted-code (@color: #333) {
+    pre > code {
+        display: block;
+        position: relative;
+        border: 1px solid @color;
+        width: 90%;
+        margin: auto;
+        padding-left: .25vw;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+}
+
+.markdown_gfm-table (@color: black) {
+    table {
+        border-collapse: collapse;
+        tr {
+            th {
+                border: 3px solid @color;
+                padding: 15px;
+            }
+        }
+    }
+}
+
+// todo ul, ol
+

customize.dist/src/less2/include/modal-theme.less

@@ -0,0 +1,4 @@
+// Used in modal.less and alertify.less
+@modal_padding: 12px;
+@modal_shadow: 0 8px 32px 0 rgba(0,0,0,.4);
+

customize.dist/src/less2/include/modal.less

@@ -1,11 +1,12 @@
 @import (once) "./colortheme.less";
+@import (once) "./modal-theme.less";
 
 .modal_base() {
     font-family: @colortheme_font;
 
     background-color: @colortheme_modal-bg;
     color: @colortheme_modal-fg;
-    box-shadow: @colortheme_modal-shadow;
+    box-shadow: @modal_shadow;
 
     a {
         color: @colortheme_modal-link;
@@ -30,9 +31,9 @@
     .cp-modal {
         background-color: @colortheme_modal-bg;
         color: @colortheme_modal-fg;
-        box-shadow: @colortheme_modal-shadow;
+        box-shadow: @modal_shadow;
 
-        padding: @colortheme_modal-padding;
+        padding: @modal_padding;
 
         position: absolute;
         top: 15vh; bottom: 15vh;
@@ -70,7 +71,7 @@
             position: absolute;
             top: 0;
             right: 0;
-            margin: @colortheme_modal-padding;
+            margin: @modal_padding;
             cursor: pointer;
         }
     }

customize.dist/src/less2/include/toolbar-history.less

@@ -0,0 +1,51 @@
+@import (once) "./colortheme.less";
+
+.history_main () {
+    body .cp-toolbar-history {
+        display: none;
+        text-align: center;
+        * {
+            font: @colortheme_app-font;
+        }
+        .cp-toolbar-history-next {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 20px;
+        }
+        .cp-toolbar-history-previous {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 20px;
+        }
+        .cp-toolbar-history-goto {
+            display: inline-block;
+            vertical-align: middle;
+            text-align: center;
+            input { width: 75px; }
+        }
+        .cp-toolbar-history-goto-input {
+            padding-left: 5px;
+            margin-left: 5px;
+            vertical-align: middle;
+        }
+        button {
+            color: inherit;
+            background-color: rgba(0,0,0,0.2);
+            &:hover {
+                background-color: rgba(0,0,0,0.4);
+            }
+        }
+        .cp-toolbar-history-close {
+            background: white;
+            color: black;
+            margin-top: 5px;
+            &:hover {
+                background-color: #e6e6e6;
+            }
+        }
+        .fa-spinner {
+            font-size: 66px;
+        }
+    }
+}
+

customize.dist/src/less2/include/toolbar.less

@@ -0,0 +1,796 @@
+@import (once) "./dropdown.less";
+@import (once) "./colortheme.less";
+@import (once) "./browser.less";
+@import (once) "./ckeditor-fix.less";
+@import (once) "./avatar.less";
+@import (once) "./toolbar-history.less";
+@import (once) "./icon-colors.less";
+
+
+.toolbar_main () {
+
+    @toolbar_line-height: 32px;
+    @toolbar_top-height: 64px;
+    @toolbar_button-font: @colortheme_app-font;
+
+    .unselectable () {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .dropdown_main();
+    .ckeditor_fix();
+    .history_main();
+    .iconColors_main();
+
+    .cp-toolbar-container {
+        display: flex;
+    }
+
+    .cp-toolbar-userlist-drawer {
+        font: @colortheme_app-font-size @colortheme_font;
+        min-width: 175px;
+        width: 175px;
+        display: block;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 10px;
+        box-sizing: border-box;
+        .cp-toolbar-userlist-drawer-close {
+            position: absolute;
+            margin-top: -10px;
+            margin-left: 149px;
+            font-size: 15px;
+            opacity: 0.5;
+            cursor: pointer;
+            text-shadow: unset;
+            &:hover {
+                opacity: 1;
+            }
+        }
+        h2 {
+            color: inherit;
+            text-align: center;
+            padding: 5px 0px;
+            margin: 5px 0px;
+            font: inherit;
+            font-weight: bold;
+            white-space: normal;
+            line-height: auto;
+        }
+        text-align:baseline;
+        .cp-toolbar-userlist-viewer {
+            font-style: italic;
+            padding: 5px;
+            background: rgba(0,0,0,0.1);
+            margin: 2px 0;
+        }
+
+        & > p {
+            font: @colortheme_app-font-size @colortheme_font;
+            margin: 0;
+            padding: 0;
+            display: block;
+        }
+
+        .cp-toolbar-userlist-others {
+            display: flex;
+            flex-flow: column;
+            margin: 10px 0;
+            margin-bottom: 20px;
+            &>span {
+                padding: 5px;
+                margin: 2px 0;
+                background: rgba(0,0,0,0.1);
+                .avatar_main(30px);
+                .cp-avatar-default, media-tag {
+                    margin-right: 5px;
+                }
+            }
+        }
+        .cp-toolbar-userlist-friend {
+            display: inline-block;
+            width: 20px;
+        }
+    }
+
+    .addToolbarColors (@color, @bg-color) {
+        .cp-toolbar-userlist-drawer {
+            background-color: @bgcolor;
+            color: @color;
+            .cp-toolbar-userlist-drawer-close {
+                color: @color;
+            }
+            h2 {
+                background-color: darken(@bgcolor, 10%);
+                color: @color;
+            }
+            .cp-toolbar-userlist-friend {
+                &:hover {
+                    color: darken(@color, 15%);
+                }
+            }
+        }
+        .cp-toolbar {
+            background-color: @bgcolor;
+            color: @color;
+            .cp-toolbar-spinner {
+                font-size: @colortheme_app-font-size;
+                color: @color;
+            }
+            .cp-toolbar-limit {
+                text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
+            }
+            .cp-toolbar-leftside, .cp-toolbar-rightside {
+                background-color: lighten(@bgcolor, 8%);
+                button:hover, button.cp-toolbar-button-active {
+                    background-color: @bgcolor;
+                }
+            }
+            .cp-toolbar-title-hoverable:hover {
+                .cp-toolbar-title-editable, .cp-toolbar-title-edit {
+                    cursor: text;
+                    border: 1px solid darken(@bgcolor, 15%);
+                    background: darken(@bgcolor, 10%);
+                    transition: all 0.15s;
+                    color: @color;
+                }
+                .cp-toolbar-title-editable {
+                    cursor: text;
+                }
+            }
+            .cp-toolbar-title-save {
+                border: 1px solid darken(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+                &:hover {
+                    background: darken(@bgcolor, 5%);
+                }
+            }
+            input {
+                border: 1px solid darken(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+            }
+            .cp-dropdown-content.cp-dropdown-left a {
+                color: black;
+            }
+        }
+    }
+
+    &.cp-app-pad {
+        @bgcolor: @colortheme_pad-bg;
+        @color: @colortheme_pad-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-code {
+        @bgcolor: @colortheme_code-bg;
+        @color: @colortheme_code-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-slide {
+        @bgcolor: @colortheme_slide-bg;
+        @color: @colortheme_slide-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-poll {
+        @bgcolor: @colortheme_poll-bg;
+        @color: @colortheme_poll-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-whiteboard {
+        @bgcolor: @colortheme_whiteboard-bg;
+        @color: @colortheme_whiteboard-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-drive {
+        @bgcolor: @colortheme_drive-bg;
+        @color: @colortheme_drive-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-file {
+        @bgcolor: @colortheme_file-bg;
+        @color: @colortheme_file-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-contacts {
+        @bgcolor: @colortheme_friends-bg;
+        @color: @colortheme_friends-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-settings {
+        @bgcolor: @colortheme_settings-bg;
+        @color: @colortheme_settings-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-profile {
+        @bgcolor: @colortheme_profile-bg;
+        @color: @colortheme_profile-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.cp-app-todo {
+        @bgcolor: @colortheme_todo-bg;
+        @color: @colortheme_todo-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+
+
+    /* TODO: move to the slide LESS page */
+    .cp-app-slide {
+        @media screen and (max-width: @browser_media-medium-screen) {
+            .cp-toolbar-leftside {
+                flex-flow: row wrap;
+                width: 175px;
+                height: auto;
+                .cp-toolbar-spinner { order: 0; }
+            }
+            .cp-toolbar-rightside {
+                height: 2*@toolbar_line-height;
+            }
+        }
+        @media screen and (max-width: 320px) {
+            .cp-toolbar-leftside {
+                flex-flow: row wrap;
+                width: 175px;
+                height: auto;
+                padding-top: @toolbar_line-height;
+                .cp-toolbar-spinner { order: 0; }
+            }
+            .cp-toolbar-rightside {
+                height: auto;
+            }
+        }
+    }
+
+    .cp-toolbar {
+        * {
+            outline-width: 0;
+            &:focus {
+                outline-width: 0;
+            }
+        }
+
+        @toolbar-green: #5cb85c;
+
+        box-sizing: border-box;
+        padding: 0px;
+
+        //background-color: #BBBBFF;
+        background-color: @colortheme_default-bg;
+        color: @colortheme_default-color;
+
+
+
+        .fa {
+            font: normal normal normal 14px/1 FontAwesome;
+            font-family: FontAwesome;
+        }
+
+        .unselectable();
+
+        font: @toolbar_button-font;
+        width: 100%;
+        z-index: 9001;
+
+        .cp-dropdown-container {
+            //height: 100%;
+            //display: inline-block;
+            button {
+                height: 100%;
+                border-radius: 0;
+                margin: 0;
+                background: transparent;
+            }
+        }
+
+        button {
+            transition: all 0.15s;
+            .unselectable();
+            &.cp-toolbar-hidden {
+                display: none;
+            }
+            .cp-toolbar-drawer {
+                display: none;
+            }
+            // Bootstrap 4 colors (btn-secondary)
+            border: 1px solid transparent;
+            color: inherit;
+            font: @toolbar_button-font;
+            * {
+                color: inherit;
+                font: @toolbar_button-font;
+            }
+        }
+        .cp-toolbar-rightside button, .cp-toolbar-leftside button {
+            background: transparent;
+            &:hover {
+                background-color: rgba(50,50,50,0.3);
+            }
+        }
+
+        .cp-toolbar-limit {
+            box-sizing: border-box;
+            height: 26px;
+            width: 26px;
+            display: inline-block;
+            padding: 3px;
+            margin: 0px 3px 0 6px;
+            vertical-align: middle;
+            line-height: @toolbar_top-height;
+            span {
+                color: red;
+                cursor: pointer;
+                margin: auto;
+                font-size: 20px;
+            }
+        }
+
+        div {
+            white-space: normal;
+        }
+
+        button, select {
+            height: @toolbar_line-height;
+            box-sizing: border-box;
+            padding: 3px 10px;
+            margin: 0;
+
+        }
+
+        .cp-toolbar-rightside-button {
+            float: right;
+            cursor: pointer;
+        }
+
+        select {
+            border: 0px;
+            margin-left: 5px;
+            margin-right: 5px;
+            padding-left: 5px;
+            border: 1px solid #A6A6A6;
+            border-bottom-color: #979797;
+            vertical-align: top;
+            box-sizing: content-box;
+            option {
+                height: 24px;
+            }
+        }
+
+        &.cp-toolbar-notitle {
+            .cp-toolbar-top-filler {
+                flex: 1;
+            }
+        }
+        &:not(.cp-toolbar-notitle) {
+            .cp-toolbar-top {
+                @media screen and (max-width: @browser_media-medium-screen) {
+                    flex-wrap: wrap;
+                    height: auto;
+                    .cp-toolbar-top-filler {
+                        flex: 1;
+                    }
+                    .cp-toolbar-title {
+                        flex: auto;
+                        width: 100%;
+                        order: 10;
+                        height: @toolbar_line-height;
+                        line-height: initial;
+                        margin: 0;
+                        .cp-toolbar-title-hoverable {
+                            width: 100%;
+                        }
+                        .cp-toolbar-title-editable {
+                            max-width: ~"calc(100vw - 26px)";
+                            display: inline-block;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            font-size: @colortheme_app-font-size;
+                            height: @toolbar_line-height;
+                            box-sizing: border-box;
+                            line-height: 20px;
+                        }
+                        .cp-toolbar-title-edit, .cp-toolbar-title-save {
+                            box-sizing: border-box;
+                            height: @toolbar_line-height;
+                            line-height: @colortheme_app-font-size;
+                            display: inline-block;
+
+                            .fa {
+                                font-size: @colortheme_app-font-size;
+                            }
+                        }
+                        input {
+                            height: @toolbar_line-height;
+                            font-size: @colortheme_app-font-size;
+                            flex: 1;
+                            max-width: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .cp-toolbar-top {
+        display: flex;
+        flex-flow: row;
+        height: @toolbar_top-height;
+        position: relative;
+        .cp-toolbar-top-filler {
+            height: 100%;
+            display: inline-block;
+            order: 4;
+            //flex: 1;
+        }
+        .cp-toolbar-title {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            order: 3;
+            height: 100%;
+            display: inline-flex;
+            align-items: center;
+            line-height: @toolbar_top-height;
+            margin: 0 10px;
+            .cp-toolbar-title-value {
+                font-size: 25px;
+                vertical-align: middle;
+                line-height: 25px;
+                white-space: nowrap;
+            }
+            .cp-toolbar-title-value-page {
+                padding: 0 5px;
+            }
+            .cp-toolbar-title-edit, .cp-toolbar-title-save {
+                display: flex;
+                align-items: center;
+                font-size: 20px;
+                vertical-align: middle;
+                line-height: 20px;
+                .fa {
+                    font-size: 20px;
+                }
+            }
+            .cp-toolbar-title-readonly {
+                margin-left: 10px;
+                font-size: 25px;
+                font-style: italic;
+                white-space: nowrap;
+            }
+            .cp-toolbar-title-hoverable {
+                display: inline-flex;
+                overflow: hidden;
+            }
+            .cp-toolbar-title-edit {
+                cursor: pointer;
+                border: 1px solid transparent;
+                padding: 5px;
+                border-collapse: collapse;
+                span {
+                    cursor: pointer;
+                }
+            }
+            .cp-toolbar-title-save {
+                cursor: pointer;
+                padding: 5px;
+                border-collapse: collapse;
+                span {
+                    cursor: pointer;
+                }
+            }
+            .cp-toolbar-title-editable {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                border: 1px solid transparent;
+                padding: 5px;
+                border-collapse: collapse;
+            }
+            input {
+                max-width: ~"calc(100% - 40px)";
+                flex: 1;
+                font-size: 1.5em;
+                vertical-align: middle;
+                box-sizing: border-box;
+                cursor: auto;
+                width: 300px;
+                font-size: 20px;
+                padding: 5px 5px;
+                height: 40px;
+            }
+        }
+        .cp-toolbar-link, .cp-toolbar-new {
+            font-size: 48px;
+            line-height: 64px;
+            width: @toolbar_top-height;
+            height: @toolbar_top-height;
+            padding: 0;
+            box-sizing: border-box;
+            display: inline-block;
+
+            color: white;
+            a {
+                color: white;
+            }
+            transition: all 0.15s;
+        }
+        .cp-toolbar-new {
+            background-color: rgba(0,0,0,0.2);
+            &:hover {
+                background-color: rgba(0,0,0,0.3);
+            }
+            text-align: center;
+            font-size: 32px;
+            margin-left: 10px;
+            &> 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;
+                height: auto;
+                padding: 0px;
+                margin: 0;
+                &::before {
+                    width: 100%;
+                    text-align: center;
+                    padding-top: 4px;
+                }
+                &:hover {
+                    background-color: initial;
+                    border-color: transparent;
+                }
+                span {
+                    vertical-align: top;
+                    font-size: 1em;
+                    text-decoration: none;
+                    color: inherit;
+                }
+            }
+        }
+        .cp-toolbar-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;
+            .fa {
+                margin: 0;
+            }
+            a.cp-toolbar-link-logo {
+                cursor: pointer;
+                display: inline-flex;
+                text-decoration: none;
+                height: auto;
+                padding: 10px;
+
+                img {
+                    cursor: pointer;
+                    height: 100%;
+                    width: 100%;
+                }
+            }
+        }
+        .cp-toolbar-user {
+            height: 100%;
+            display: inline-flex;
+            order: 5;
+            line-height: @toolbar_top-height;
+            color: white;
+            .cp-toolbar-new { order: 2; }
+            .cp-toolbar-user-dropdown { order: 3; }
+            .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
+            &> * {
+                display: inline-block;
+                height: 100%;
+                vertical-align: top;
+            }
+            .cp-toolbar-user-dropdown {
+                z-index: 10000;
+                //margin-left: 20px;
+                height: 64px;
+                width: 64px;
+                padding: 0px;
+                box-sizing: border-box;
+                text-align: center;
+                background-color: rgba(0,0,0,0.3);
+                transition: all 0.15s;
+                &:hover {
+                    background-color: rgba(0,0,0,0.4);
+                }
+                .cp-dropdown-content {
+                    margin: 0;
+                }
+                button {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 64px;
+                    width: 64px;
+                    padding: 0;
+                    span {
+                        text-align: center;
+                        width: 100%;
+                        cursor: default;
+                        font-size: 32px;
+                    }
+                    &.cp-avatar {
+                        .avatar_main(48px);
+                        &.cp-userlist-clickable {
+                            cursor: pointer;
+                            &:hover {
+                                background-color: rgba(0,0,0,0.3);
+                            }
+                        }
+                        .cp-toolbar-userlist-rightcol {
+                            order: 10;
+                            flex: 1;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            display: flex;
+                            flex-flow: column;
+                            .cp-toolbar-userlist-name {
+                                flex: 1;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                            }
+                            .cp-toolbar-userlist-friend {
+                                padding: 0;
+                            }
+                        }
+                        media-tag {
+                            margin: 8px;
+                        }
+                        border: 0;
+                    }
+                }
+            }
+            .cp-toolbar-backup {
+                margin: 0;
+                border-radius: 0;
+                background: transparent;
+                &:hover {
+                    background-color: rgba(0,0,0,0.2);
+                }
+            }
+        }
+    }
+
+    .cp-toolbar-leftside {
+        //height: @toolbar_line-height;
+        &:empty {
+            height: 0;
+        }
+        float: left;
+        display: inline-flex;
+        align-items: center;
+        //margin-bottom: -1px;
+        .cp-toolbar-users {
+            pre {
+                /* needed for ckeditor */
+                white-space: pre;
+                margin: 5px 0px;
+            }
+        }
+        button {
+            margin: 0px;
+            border-radius: 0;
+            height: 100%;
+        }
+        .cp-dropdown-content {
+            margin-top: -1px;
+        }
+
+        & > span {
+            height: @toolbar_line-height;
+        }
+
+        #cp-toolbar-userlist-drawer-open { order: 1; }
+        .cp-toolbar-share-button { order: 2; }
+        .cp-toolbar-spinner { order: 3; }
+
+        #cp-toolbar-userlist-drawer-open button {
+            width: 125px;
+            text-align: center;
+        }
+        .cp-toolbar-share-button button {
+            width: 50px;
+            text-align: center;
+        }
+    }
+    .cp-toolbar-rightside {
+        min-height: @toolbar_line-height;
+        overflow: hidden;
+        &:empty {
+            min-height: 0;
+            height: 0;
+        }
+        text-align: right;
+        /*&> button {
+            height: 100%;
+            margin: 0;
+            border-radius: 0;
+            padding: 0 10px;
+        }*/
+        .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
+            display: none;
+        }
+        .cp-toolbar-drawer-content {
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+            position: absolute;
+            right:0px;
+            margin-top: @toolbar_line-height;
+            min-width: 50px;
+            background: @colortheme_dropdown-bg;
+            display: flex;
+            flex-flow: column;
+            z-index:10000;
+            color: black;
+            .fa {
+                font-size: 17px;
+            }
+            &> span {
+                box-sizing: border-box;
+                min-width: 150px;
+                height: @toolbar_line-height;
+                border-radius: 0;
+                border: 0;
+            }
+            button {
+                padding: 5px 16px;
+                text-align: left;
+                margin: 0;
+                border-radius: 0;
+                border: 0;
+                width: 100%;
+                line-height: 1em;
+                .cp-toolbar-drawer-element {
+                    margin-left: 10px;
+                    display: inline;
+                    vertical-align: top;
+                }
+                &:hover {
+                    background-color: @colortheme_dropdown-bg-hover !important;
+                    color: @colortheme_dropdown-color;
+                }
+            }
+        }
+    }
+    .cp-toolbar-spinner {
+        line-height: @toolbar_line-height;
+        padding: 0 20px;
+        &> span.fa {
+            height: 20px;
+            width: 20px;
+            //margin: 8px;
+            line-height: 20px;
+            font-size: 20px;
+            text-align: center;
+        }
+    }
+    .cp-toolbar-readonly {
+        margin-right: 5px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+    .cp-toolbar-share {
+        a {
+            .fa {
+                margin-right: 5px;
+            }
+        }
+    }
+
+}
+

customize.dist/src/less2/main.less

@@ -10,3 +10,14 @@ body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
 body.cp-page-about { @import "./pages/page-about.less"; }
 body.cp-page-privacy { @import "./pages/page-privacy.less"; }
 body.cp-page-terms { @import "./pages/page-terms.less"; }
+
+// Set the HTML style for the apps which shouldn't have a body scrollbar
+html.cp-app-noscroll {
+    @import "./include/app-noscroll.less";
+    .noscroll_main();
+}
+
+body.cp-app-pad { @import "../../../pad/app-pad.less"; }
+body.cp-app-code { @import "../../../code2/app-code.less"; }
+body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
+

www/code2/app-code.less

@@ -0,0 +1,95 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+
+// body
+&.cp-app-code {
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    min-height: auto;
+
+    .CodeMirror {
+        display: inline-block;
+        height: 100%;
+        width: 50%;
+        min-width: 20%;
+        max-width: 80%;
+        resize: horizontal;
+        font-size: initial;
+    }
+    .CodeMirror.fullPage {
+        //min-width: 100%;
+        max-width: 100%;
+        resize: none;
+        flex: 1;
+    }
+    .CodeMirror-focused .cm-matchhighlight {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+        background-position: bottom;
+        background-repeat: repeat-x;
+    }
+    #cp-app-code-editor {
+        flex: 1;
+        display: flex;
+        flex-flow: row;
+        height: 100%;
+        overflow: hidden;
+    }
+    #cp-app-code-preview {
+        flex: 1;
+        padding: 5px 20px;
+        overflow: auto;
+        display: inline-block;
+        height: 100%;
+        border-left: 1px solid black;
+        box-sizing: border-box;
+        font-family: Calibri,Ubuntu,sans-serif;
+        word-wrap: break-word;
+        position: relative;
+        media-tag {
+            * {
+                max-width:100%;
+            }
+            iframe[type="application/pdf"] {
+                max-height:50vh;
+            }
+        }
+    }
+
+    #cp-app-code-preview-content {
+        max-width: 40vw;
+        margin: 1em auto;
+
+        .markdown_preformatted-code;
+        .markdown_gfm-table(black);
+    }
+
+    .cp-splitter {
+        position: absolute;
+        height: 100%;
+        width: 8px;
+        top: 0;
+        left: 0;
+
+        cursor: col-resize;
+    }
+
+    @media (max-width: @browser_media-medium-screen) {
+        .CodeMirror {
+            flex: 1;
+            max-width: 100%;
+            resize: none;
+        }
+        #cp-app-code-preview {
+            display: none !important;
+        }
+}
+}
+

www/code2/code.less

@@ -1,102 +0,0 @@
-@import "/customize/src/less/variables.less";
-@import "/customize/src/less/mixins.less";
-@import "/common/markdown.less";
-@import "/common/file-dialog.less";
-
-html, body{
-    height: 100%;
-    width: 100%;
-    padding: 0px;
-    margin: 0px;
-    overflow: hidden;
-    box-sizing: border-box;
-    position: relative;
-}
-body {
-    display: flex;
-    flex-flow: column;
-    max-height: 100%;
-    min-height: auto;
-}
-
-@slideTime: 500ms;
-.CodeMirror {
-    display: inline-block;
-    height: 100%;
-    width: 50%;
-    &.transition {
-        transition: width @slideTime, min-width @slideTime, max-width @slideTime;
-    }
-    min-width: 20%;
-    max-width: 80%;
-    resize: horizontal;
-    font-size: initial;
-}
-.CodeMirror.fullPage {
-    //min-width: 100%;
-    max-width: 100%;
-    resize: none;
-    flex: 1;
-}
-.CodeMirror-focused .cm-matchhighlight {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-    background-position: bottom;
-    background-repeat: repeat-x;
-}
-#editorContainer {
-    flex: 1;
-    display: flex;
-    flex-flow: row;
-    height: 100%;
-    overflow: hidden;
-}
-#previewContainer {
-    flex: 1;
-    padding: 5px 20px;
-    overflow: auto;
-    display: inline-block;
-    height: 100%;
-    border-left: 1px solid black;
-    box-sizing: border-box;
-    font-family: Calibri,Ubuntu,sans-serif;
-    word-wrap: break-word;
-    position: relative;
-    media-tag {
-        * {
-            max-width:100%;
-        }
-        iframe[type="application/pdf"] {
-            max-height:50vh;
-        }
-    }
-}
-
-#preview {
-    max-width: 40vw;
-    margin: 1em auto;
-
-    .markdown_preformatted-code;
-    .markdown_gfm-table(black);
-}
-
-.cp-splitter {
-    position: absolute;
-    height: 100%;
-    width: 8px;
-    top: 0;
-    left: 0;
-
-    cursor: col-resize;
-}
-
-@media (max-width: @media-medium-screen) {
-    .CodeMirror {
-        flex: 1;
-        max-width: 100%;
-        resize: none;
-    }
-    #previewContainer {
-        display: none !important;
-    }
-}
-

www/code2/inner.html

@@ -1,15 +1,17 @@
 <!DOCTYPE html>
-<html style="height: 100%;">
+<html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <script async data-bootload="/code2/inner.js" data-main="/common/sframe-boot.js?ver=1.1" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style> .loading-hidden { display: none; } </style>
 </head>
-<body class="app-code">
+<body class="cp-app-code">
-  <div id="cme_toolbox" class="toolbar-container"></div>
+  <div id="cme_toolbox" class="cp-toolbar-container"></div>
-  <div id="editorContainer">
+  <div id="cp-app-code-editor">
     <textarea id="editor1" name="editor1"></textarea>
-    <div id="previewContainer"><div id="preview"></div></div>
+    <div id="cp-app-code-preview">
+        <div id="cp-app-code-preview-content"></div>
+    </div>
   </div>
 </body>
 </html>

www/code2/inner.js

@@ -17,9 +17,7 @@ define([
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less2/main.less',
-    'less!/customize/src/less/toolbar.less',
-    'less!/code2/code.less',
 
     'css!cm/lib/codemirror.css',
     'css!cm/addon/dialog/dialog.css',
@@ -88,9 +86,9 @@ define([
 
         var isHistoryMode = false;
 
-        var $contentContainer = $('#editorContainer');
+        var $contentContainer = $('#cp-app-code-editor');
-        var $previewContainer = $('#previewContainer');
+        var $previewContainer = $('#cp-app-code-preview');
-        var $preview = $('#preview');
+        var $preview = $('#cp-app-code-preview-content');
         $preview.click(function (e) {
             if (!e.target) { return; }
             var $t = $(e.target);
@@ -370,7 +368,7 @@ define([
             common.initFilePicker(common, fileDialogCfg);
             APP.$mediaTagButton = $('<button>', {
                 title: Messages.filePickerButton,
-                'class': 'rightside-button fa fa-picture-o',
+                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
                 style: 'font-size: 17px'
             }).click(function () {
                 common.openFilePicker(common);

www/common/common-interface.js

@@ -280,28 +280,13 @@ define([
         };
     };
 
-    var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
+    var $defaultIcon = $('<span>', {"class": "fa fa-file-text-o"});
-    var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
-    var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
-    var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
-    var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
-    var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
-    var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
-    var $todoIcon = $('<span>', {"class": "fa fa-tasks todoColor"});
-    var $contactsIcon = $('<span>', {"class": "fa fa-users friendsColor"});
     UI.getIcon = function (type) {
-        var $icon;
+        var $icon = $defaultIcon.clone();
-
+
-        switch(type) {
+        if (AppConfig.applicationsIcon && AppConfig.applicationsIcon[type]) {
-            case 'pad': $icon = $padIcon.clone(); break;
+            var appClass = ' cp-icon-color-'+type;
-            case 'file': $icon = $fileAppIcon.clone(); break;
+            $icon = $('<span>', {'class': 'fa ' + AppConfig.applicationsIcon[type] + appClass});
-            case 'code': $icon = $codeIcon.clone(); break;
-            case 'slide': $icon = $slideIcon.clone(); break;
-            case 'poll': $icon = $pollIcon.clone(); break;
-            case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
-            case 'todo': $icon = $todoIcon.clone(); break;
-            case 'contacts': $icon = $contactsIcon.clone(); break;
-            default: $icon = $fileIcon.clone();
         }
 
         return $icon;

www/common/cryptpad-common.js

@@ -1444,12 +1444,8 @@ define([
         var href = data.href;
         if (!href) { return $icon; }
 
-        if (href.indexOf('/pad/') !== -1) { $icon = common.getIcon('pad'); }
+        var type = common.parsePadUrl(href).type;
-        else if (href.indexOf('/code/') !== -1) { $icon = common.getIcon('code'); }
+        $icon = common.getIcon(type);
-        else if (href.indexOf('/slide/') !== -1) { $icon = common.getIcon('slide'); }
-        else if (href.indexOf('/poll/') !== -1) { $icon = common.getIcon('poll'); }
-        else if (href.indexOf('/whiteboard/') !== -1) { $icon = common.getIcon('whiteboard'); }
-        else if (href.indexOf('/file/') !== -1) { $icon = common.getIcon('file'); }
 
         return $icon;
     };
@@ -1558,7 +1554,7 @@ define([
         // Container
         var $container = $(config.container);
         var containerConfig = {
-            'class': 'dropdown-bar'
+            'class': 'cp-dropdown-container'
         };
         if (config.buttonTitle) {
             containerConfig.title = config.buttonTitle;
@@ -1571,14 +1567,14 @@ define([
         // Button
         var $button = $('<button>', {
             'class': ''
-        }).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
+        }).append($('<span>', {'class': 'cp-dropdown-button-title'}).html(config.text || ""));
         /*$('<span>', {
             'class': 'fa fa-caret-down',
         }).appendTo($button);*/
 
         // Menu
-        var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
+        var $innerblock = $('<div>', {'class': 'cp-dropdown-content'});
-        if (config.left) { $innerblock.addClass('left'); }
+        if (config.left) { $innerblock.addClass('cp-dropdown-left'); }
 
         config.options.forEach(function (o) {
             if (!isValidOption(o)) { return; }
@@ -1591,8 +1587,8 @@ define([
 
         var setActive = function ($el) {
             if ($el.length !== 1) { return; }
-            $innerblock.find('.active').removeClass('active');
+            $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element(active');
-            $el.addClass('active');
+            $el.addClass('cp-dropdown-element-active');
             var scroll = $el.position().top + $innerblock.scrollTop();
             if (scroll < $innerblock.scrollTop()) {
                 $innerblock.scrollTop(scroll);
@@ -1607,7 +1603,7 @@ define([
 
         var show = function () {
             $innerblock.show();
-            $innerblock.find('.active').removeClass('active');
+            $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
             if (config.isSelect && value) {
                 var $val = $innerblock.find('[data-value="'+value+'"]');
                 setActive($val);
@@ -1619,10 +1615,10 @@ define([
         $container.click(function (e) {
             e.stopPropagation();
             var state = $innerblock.is(':visible');
-            $('.dropdown-bar-content').hide();
+            $('.cp-dropdown-content').hide();
             try {
                 $('iframe').each(function (idx, ifrw) {
-                    $(ifrw).contents().find('.dropdown-bar-content').hide();
+                    $(ifrw).contents().find('.cp-dropdown-content').hide();
                 });
             } catch (er) {
                 // empty try catch in case this iframe is problematic (cross-origin)
@@ -1638,7 +1634,7 @@ define([
             var pressed = '';
             var to;
             $container.keydown(function (e) {
-                var $value = $innerblock.find('[data-value].active');
+                var $value = $innerblock.find('[data-value].cp-dropdown-element-active');
                 if (e.which === 38) { // Up
                     if ($value.length) {
                         var $prev = $value.prev();
@@ -1679,7 +1675,7 @@ define([
                 value = val;
                 var $val = $innerblock.find('[data-value="'+val+'"]');
                 var textValue = name || $val.html() || val;
-                $button.find('.buttonTitle').html(textValue);
+                $button.find('.cp-dropdown-button-title').html(textValue);
             };
             $container.getValue = function () {
                 return value || '';
@@ -1826,7 +1822,7 @@ define([
 
         var oldUrl;
         if (account && !config.static && store) {
-            var $avatar = $userAdmin.find('.buttonTitle');
+            var $avatar = $userAdmin.find('.cp-dropdown-button-title');
             var updateButton = function (newName) {
                 var profile = store.getProfile();
                 var url = profile && profile.avatar;

www/common/file-dialog.less

@@ -1,47 +1,50 @@
 @import (once) '../customize/src/less2/include/colortheme.less';
 @import '../customize/src/less2/include/modal.less';
 
-#fileDialog {
+.fileDialog_main () {
-    .cp-modal {
+    #fileDialog {
-        .fileContainer {
+        display: none;
-            display: flex;
+        .cp-modal {
-            flex-wrap: wrap;
+            .fileContainer {
-            justify-content: center;
+                display: flex;
-            overflow-y: auto;
+                flex-wrap: wrap;
-        }
+                justify-content: center;
+                overflow-y: auto;
+            }
 
-        .element {
+            .element {
-            @darker: darken(@colortheme_modal-fg, 30%);
+                @darker: darken(@colortheme_modal-fg, 30%);
 
-            width: 200px;
+                width: 200px;
-            min-width: 200px;
+                min-width: 200px;
-            height: 1em;
+                height: 1em;
-            padding: 0.5em;
+                padding: 0.5em;
-            margin: 5px;
+                margin: 5px;
-            box-sizing: content-box;
+                box-sizing: content-box;
 
-            text-align: left;
+                text-align: left;
-            line-height: 1em;
+                line-height: 1em;
-            cursor: pointer;
+                cursor: pointer;
 
-            background-color: #111;
+                background-color: #111;
-            color: @darker;
+                color: @darker;
 
-            transition: all 0.1s;
+                transition: all 0.1s;
 
-            &:hover {
+                &:hover {
-                color: @colortheme_modal-fg;
+                    color: @colortheme_modal-fg;
-            }
+                }
 
-            overflow: hidden;
+                overflow: hidden;
-            text-overflow: ellipsis;
+                text-overflow: ellipsis;
-            white-space: nowrap;
+                white-space: nowrap;
 
-            align-items: center;
+                align-items: center;
 
-            .fa {
+                .fa {
-                cursor: pointer;
+                    cursor: pointer;
-                margin-right: 0.5em;
+                    margin-right: 0.5em;
+                }
             }
         }
     }

www/common/sframe-common-file.js

@@ -35,10 +35,10 @@ define([
         };
 
         var uid = function () {
-            return 'file-' + String(Math.random()).substring(2);
+            return 'cp-fileupload-element-' + String(Math.random()).substring(2);
         };
 
-        var $table = File.$table = $('<table>', { id: 'uploadStatus' });
+        var $table = File.$table = $('<table>', { id: 'cp-fileupload-table' });
         var $thead = $('<tr>').appendTo($table);
         $('<td>').text(Messages.upload_name).appendTo($thead);
         $('<td>').text(Messages.upload_size).appendTo($thead);
@@ -46,7 +46,7 @@ define([
         $('<td>').text(Messages.cancel).appendTo($thead);
 
         var createTableContainer = function ($body) {
-            File.$container = $('<div>', { id: 'uploadStatusContainer' }).append($table).appendTo($body);
+            File.$container = $('<div>', { id: 'cp-fileupload' }).append($table).appendTo($body);
             return File.$container;
         };
 
@@ -74,11 +74,11 @@ define([
 
             var $row = $table.find('tr[id="'+id+'"]');
 
-            $row.find('.upCancel').html('-');
+            $row.find('.cp-fileupload-table-cancel').html('-');
-            var $pv = $row.find('.progressValue');
+            var $pv = $row.find('.cp-fileupload-table-progress-value');
-            var $pb = $row.find('.progressContainer');
+            var $pb = $row.find('.cp-fileupload-table-progress-container');
-            var $pc = $row.find('.upProgress');
+            var $pc = $row.find('.cp-fileupload-table-progress');
-            var $link = $row.find('.upLink');
+            var $link = $row.find('.cp-fileupload-table-link');
 
             var sframeChan = common.getSframeChannel();
 
@@ -180,27 +180,27 @@ define([
             $table.show();
             var estimate = FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
 
-            var $progressBar = $('<div>', {'class':'progressContainer'});
+            var $progressBar = $('<div>', {'class':'cp-fileupload-table-progress-container'});
-            var $progressValue = $('<span>', {'class':'progressValue'}).text(Messages.upload_pending);
+            var $progressValue = $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending);
 
             var $tr = $('<tr>', {id: id}).appendTo($table);
 
-            var $cancel = $('<span>', {'class': 'cancel fa fa-times'}).click(function () {
+            var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
                 queue.queue = queue.queue.filter(function (el) { return el.id !== id; });
                 $cancel.remove();
-                $tr.find('.upCancel').text('-');
+                $tr.find('.cp-fileupload-table-cancel').text('-');
-                $tr.find('.progressValue').text(Messages.upload_cancelled);
+                $tr.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
             });
 
             var $link = $('<a>', {
-                'class': 'upLink',
+                'class': 'cp-fileupload-table-link',
                 'rel': 'noopener noreferrer'
             }).text(obj.metadata.name);
 
             $('<td>').append($link).appendTo($tr);
             $('<td>').text(prettySize(estimate)).appendTo($tr);
-            $('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr);
+            $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr);
-            $('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr);
+            $('<td>', {'class': 'cp-fileupload-table-cancel'}).append($cancel).appendTo($tr);
 
             queue.next();
         };
@@ -253,14 +253,14 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
                 counter++;
-                $hoverArea.addClass('hovering');
+                $hoverArea.addClass('cp-fileupload-hovering');
             })
             .on('dragleave', function (e) {
                 e.preventDefault();
                 e.stopPropagation();
                 counter--;
                 if (counter <= 0) {
-                    $hoverArea.removeClass('hovering');
+                    $hoverArea.removeClass('cp-fileupload-hovering');
                 }
             });
 
@@ -274,7 +274,7 @@ define([
 
                 var dropped = e.originalEvent.dataTransfer.files;
                 counter = 0;
-                $hoverArea.removeClass('hovering');
+                $hoverArea.removeClass('cp-fileupload-hovering');
                 onFileDrop(dropped, e);
             });
         };

www/common/sframe-common-history.js

@@ -81,9 +81,9 @@ define([
         var states = [];
         var c = states.length - 1;
 
-        var $hist = $toolbar.find('.cryptpad-toolbar-history');
+        var $hist = $toolbar.find('.cp-toolbar-history');
-        var $left = $toolbar.find('.cryptpad-toolbar-leftside');
+        var $left = $toolbar.find('.cp-toolbar-leftside');
-        var $right = $toolbar.find('.cryptpad-toolbar-rightside');
+        var $right = $toolbar.find('.cp-toolbar-rightside');
         var $cke = $toolbar.find('.cke_toolbox_main');
 
         $hist.html('').show();
@@ -111,9 +111,9 @@ define([
             var val = states[i].getContent().doc;
             c = i;
             if (typeof onUpdate === "function") { onUpdate(); }
-            $hist.find('.next, .previous').css('visibility', '');
+            $hist.find('.cp-toolbar-history-next, .cp-toolbar-history-previous').css('visibility', '');
-            if (c === states.length - 1) { $hist.find('.next').css('visibility', 'hidden'); }
+            if (c === states.length - 1) { $hist.find('.cp-toolbar-history-next').css('visibility', 'hidden'); }
-            if (c === 0) { $hist.find('.previous').css('visibility', 'hidden'); }
+            if (c === 0) { $hist.find('.cp-toolbar-history-previous').css('visibility', 'hidden'); }
             return val || '';
         };
 
@@ -128,18 +128,18 @@ define([
         var display = function () {
             $hist.html('');
             var $prev =$('<button>', {
-                'class': 'previous fa fa-step-backward buttonPrimary',
+                'class': 'cp-toolbar-history-previous fa fa-step-backward buttonPrimary',
                 title: Messages.history_prev
             }).appendTo($hist);
-            var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
+            var $nav = $('<div>', {'class': 'cp-toolbar-history-goto'}).appendTo($hist);
             var $next = $('<button>', {
-                'class': 'next fa fa-step-forward buttonPrimary',
+                'class': 'cp-toolbar-history-next fa fa-step-forward buttonPrimary',
                 title: Messages.history_next
             }).appendTo($hist);
 
             $('<label>').text(Messages.history_version).appendTo($nav);
             var $cur = $('<input>', {
-                'class' : 'gotoInput',
+                'class' : 'cp-toolbar-history-goto-input',
                 'type' : 'number',
                 'min' : '1',
                 'max' : states.length
@@ -150,11 +150,11 @@ define([
             var $label2 = $('<label>').text(' / '+ states.length).appendTo($nav);
             $('<br>').appendTo($nav);
             var $close = $('<button>', {
-                'class':'closeHistory',
+                'class':'cp-toolbar-history-close',
                 title: Messages.history_closeTitle
             }).text(Messages.history_closeTitle).appendTo($nav);
             var $rev = $('<button>', {
-                'class':'revertHistory buttonSuccess',
+                'class':'cp-toolbar-history-revert buttonSuccess',
                 title: Messages.history_restoreTitle
             }).text(Messages.history_restore).appendTo($nav);
             if (History.readOnly) { $rev.hide(); }
@@ -170,6 +170,7 @@ define([
                 $left.show();
                 $right.show();
                 $cke.show();
+                $(window).trigger('resize');
             };
 
             // Buttons actions
@@ -203,6 +204,7 @@ define([
 
             // Display the latest content
             render(get(c));
+            $(window).trigger('resize');
         };
 
         // Load all the history messages into a new chainpad object

www/common/sframe-common-interface.js

@@ -39,7 +39,7 @@ define([
         var MutationObserver = window.MutationObserver;
         var displayDefault = function () {
             var text = Cryptpad.getFirstEmojiOrCharacter(name);
-            var $avatar = $('<span>', {'class': 'default'}).text(text);
+            var $avatar = $('<span>', {'class': 'cp-avatar-default'}).text(text);
             $container.append($avatar);
             if (cb) { cb(); }
         };
@@ -207,7 +207,7 @@ define([
 
         var $displayName = $userAdmin.find('.'+displayNameCls);
 
-        var $avatar = $userAdmin.find('.buttonTitle');
+        var $avatar = $userAdmin.find('.cp-dropdown-button-title');
         var oldUrl;
         var updateButton = function () {
             var myData = metadataMgr.getUserData();
@@ -220,7 +220,7 @@ define([
                 UI.displayAvatar(Common, $avatar, url, newName, function ($img) {
                     oldUrl = url;
                     if ($img) {
-                        $userAdmin.find('button').addClass('avatar');
+                        $userAdmin.find('button').addClass('cp-avatar');
                     }
                 });
             }
@@ -271,7 +271,7 @@ define([
         };
         // Create modal
         var $blockContainer = Cryptpad.createModal({
-            id: 'fileDialog',
+            id: 'cp-filepicker-dialog',
             $body: cfg.$body,
             onClose: hideFileDialog
         }).show();
@@ -283,7 +283,7 @@ define([
         var to;
         $('<input>', {
             type: 'text',
-            'class': 'filter',
+            'class': 'cp-filepicker-filter',
             'placeholder': Messages.filePicker_filter
         }).appendTo($filter).on('keypress', function () {
             if (to) { window.clearTimeout(to); }
@@ -292,11 +292,11 @@ define([
         $filter.append(common.createButton('upload', false, cfg.data, function () {
             hideFileDialog();
         }));
-        var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
+        var $container = $('<span>', {'class': 'cp-filepicker-content'}).appendTo($block);
         // Update the files list when needed
         updateContainer = function () {
             $container.html('');
-            var filter = $filter.find('.filter').val().trim();
+            var filter = $filter.find('.cp-filepicker-filter').val().trim();
             var todo = function (err, list) {
                 if (err) { return void console.error(err); }
                 Object.keys(list).forEach(function (id) {
@@ -306,7 +306,7 @@ define([
                         return;
                     }
                     var $span = $('<span>', {
-                        'class': 'element',
+                        'class': 'cp-filepicker-content-element',
                         'title': name,
                     }).appendTo($container);
                     $span.append(Cryptpad.getFileIcon(data));

www/common/sframe-common-title.js

@@ -62,7 +62,7 @@ define(['jquery'], function ($) {
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();
-            $title.find('span.title').text(md.title || md.defaultTitle);
+            $title.find('span.cp-toolbar-title-value').text(md.title || md.defaultTitle);
             $title.find('input').val(md.title || md.defaultTitle);
             exp.title = md.title;
             //exp.updateTitle(md.title || md.defaultTitle);

www/common/sframe-common.js

@@ -182,7 +182,7 @@ define([
                 button = $('<button>', {
                     'class': 'fa fa-download',
                     title: Messages.exportButtonTitle,
-                }).append($('<span>', {'class': 'drawer'}).text(Messages.exportButton));
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.exportButton));
 
                 button.click(prepareFeedback(type));
                 if (callback) {
@@ -193,7 +193,7 @@ define([
                 button = $('<button>', {
                     'class': 'fa fa-upload',
                     title: Messages.importButtonTitle,
-                }).append($('<span>', {'class': 'drawer'}).text(Messages.importButton));
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.importButton));
                 if (callback) {
                     button
                     .click(prepareFeedback(type))
@@ -281,7 +281,7 @@ define([
                     style: 'font:'+size+' FontAwesome'
                 });
                 if (!isStrongestStored()) {
-                    button.addClass('hidden');
+                    button.addClass('cp-toolbar-hidden');
                 }
                 if (callback) {
                     button
@@ -310,7 +310,7 @@ define([
                 button = $('<button>', {
                     title: Messages.historyButton,
                     'class': "fa fa-history history",
-                }).append($('<span>', {'class': 'drawer'}).text(Messages.historyText));
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
                 if (data.histConfig) {
                     button
                     .click(prepareFeedback(type))
@@ -322,7 +322,7 @@ define([
             case 'more':
                 button = $('<button>', {
                     title: Messages.moreActions || 'TODO',
-                    'class': "drawer-button fa fa-ellipsis-h",
+                    'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
                     style: 'font:'+size+' FontAwesome'
                 });
                 break;
@@ -334,7 +334,7 @@ define([
                 .click(prepareFeedback(type));
         }
         if (rightside) {
-            button.addClass('rightside-button');
+            button.addClass('cp-toolbar-rightside-button');
         }
         return button;
     };

www/common/toolbar2.js

@@ -64,8 +64,8 @@ define([
             'class': USER_CLS
         }).appendTo($topContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
-        $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        $('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
-        $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        $('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer)
         .append($('<div>', {'class': LEFTSIDE_CLS}))
@@ -75,7 +75,7 @@ define([
         var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
         if (!config.hideDrawer) {
             var $drawerContent = $('<div>', {
-                'class': DRAWER_CLS,// + ' dropdown-bar-content cryptpad-dropdown'
+                'class': DRAWER_CLS,
                 'tabindex': 1
             }).appendTo($rightside).hide();
             var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
@@ -270,7 +270,7 @@ define([
         var fa_editusers = '<span class="fa fa-users"></span>';
         var fa_viewusers = '<span class="fa fa-eye"></span>';
         var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
-        $userButtons.find('.buttonTitle').html('').append($spansmall);
+        $userButtons.find('.cp-dropdown-button-title').html('').append($spansmall);
 
         updateDisplayName(toolbar, config);
     };
@@ -311,7 +311,7 @@ define([
         var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
 
         var $button = $('<button>').appendTo($container);
-        $('<span>',{'class': 'buttonTitle'}).appendTo($button);
+        $('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
 
         toolbar.$leftside.prepend($container);
 
@@ -444,7 +444,7 @@ define([
             };
             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);
+            $shareBlock.find('.cp-dropdown-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
             $shareBlock.addClass('shareButton');
             $shareBlock.find('button').attr('title', Messages.shareButton);
 
@@ -731,9 +731,6 @@ define([
     };
 
     var createNewPad = function (toolbar) {
-        /*var $newPad = $('<span>', {
-            'class': NEWPAD_CLS + " dropdown-bar"
-        }).appendTo(toolbar.$top);*/
         var $newPad = toolbar.$top.find('.'+NEWPAD_CLS).show();
 
         var pads_options = [];
@@ -822,7 +819,7 @@ define([
     // Events
     var initClickEvents = function (toolbar, config) {
         var removeDropdowns =  function () {
-            toolbar.$toolbar.find('.cryptpad-dropdown').hide();
+            toolbar.$toolbar.find('.cp-dropdown-content').hide();
         };
         var cancelEditTitle = function (e) {
             // Now we want to apply the title even if we click somewhere else

www/common/toolbar3.js

@@ -14,36 +14,37 @@ define([
     var SPINNER_DISAPPEAR_TIME = 1000;
 
     // Toolbar parts
-    var TOOLBAR_CLS = Bar.constants.toolbar = 'cryptpad-toolbar';
+    var TOOLBAR_CLS = Bar.constants.toolbar = 'cp-toolbar';
-    var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top';
+    var TOP_CLS = Bar.constants.top = 'cp-toolbar-top';
-    var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
+    var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside';
-    var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
+    var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside';
-    var DRAWER_CLS = Bar.constants.drawer = 'drawer-content';
+    var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content';
-    var HISTORY_CLS = Bar.constants.history = 'cryptpad-toolbar-history';
+    var HISTORY_CLS = Bar.constants.history = 'cp-toolbar-history';
 
     // Userlist
-    var USERLIST_CLS = Bar.constants.userlist = "cryptpad-dropdown-users";
+    var USERLIST_CLS = Bar.constants.userlist = "cp-toolbar-users";
-    var EDITSHARE_CLS = Bar.constants.editShare = "cryptpad-dropdown-editShare";
+    var EDITSHARE_CLS = Bar.constants.editShare = "cp-toolbar-share-edit";
-    var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare";
+    var VIEWSHARE_CLS = Bar.constants.viewShare = "cp-toolbar-share-view";
-    var SHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-share";
+    var SHARE_CLS = Bar.constants.viewShare = "cp-toolbar-share";
 
     // Top parts
-    var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
+    var USER_CLS = Bar.constants.userAdmin = "cp-toolbar-user";
-    var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
+    var SPINNER_CLS = Bar.constants.spinner = 'cp-toolbar-spinner';
-    var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit';
+    var LIMIT_CLS = Bar.constants.limit = 'cp-toolbar-limit';
-    var TITLE_CLS = Bar.constants.title = "cryptpad-title";
+    var TITLE_CLS = Bar.constants.title = "cp-toolbar-title";
-    var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-new";
+    var NEWPAD_CLS = Bar.constants.newpad = "cp-toolbar-new";
+    var LINK_CLS = Bar.constants.link = "cp-toolbar-link";
 
     // User admin menu
-    var USERADMIN_CLS = Bar.constants.user = 'cryptpad-user-dropdown';
+    var USERADMIN_CLS = Bar.constants.user = 'cp-toolbar-user-dropdown';
-    var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
+    var USERNAME_CLS = Bar.constants.username = 'cp-toolbar-user-name';
-    /*var READONLY_CLS = */Bar.constants.readonly = 'cryptpad-readonly';
+    /*var READONLY_CLS = */Bar.constants.readonly = 'cp-toolbar-readonly';
-    var USERBUTTON_CLS = Bar.constants.changeUsername = "cryptpad-change-username";
+    var USERBUTTON_CLS = Bar.constants.changeUsername = "cp-toolbar-user-rename";
 
     // Create the toolbar element
 
     var uid = function () {
-        return 'cryptpad-uid-' + String(Math.random()).substring(2);
+        return 'cp-toolbar-uid-' + String(Math.random()).substring(2);
     };
 
     var createRealtimeToolbar = function (config) {
@@ -54,21 +55,14 @@ define([
             id: uid(),
         });
 
-        // TODO iframe
-        // var parsed = Cryptpad.parsePadUrl(window.location.href);
-        var parsed = { type:'pad' };
-        if (typeof parsed.type === "string") {
-            config.$container.parents('body').addClass('app-' + parsed.type);
-        }
-
         var $topContainer = $('<div>', {'class': TOP_CLS});
-        $('<span>', {'class': 'filler'}).appendTo($topContainer);
+        $('<span>', {'class': 'cp-toolbar-top-filler'}).appendTo($topContainer);
         var $userContainer = $('<span>', {
             'class': USER_CLS
         }).appendTo($topContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
-        $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        $('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
-        $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        $('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer)
         .append($('<div>', {'class': LEFTSIDE_CLS}))
@@ -78,27 +72,27 @@ define([
         var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
         if (!config.hideDrawer) {
             var $drawerContent = $('<div>', {
-                'class': DRAWER_CLS,// + ' dropdown-bar-content cryptpad-dropdown'
+                'class': DRAWER_CLS,
                 'tabindex': 1
             }).appendTo($rightside).hide();
-            var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
+            var $drawer = Common.createButton('more', true).appendTo($rightside);
             $drawer.click(function () {
                 $drawerContent.toggle();
-                $drawer.removeClass('active');
+                $drawer.removeClass('cp-toolbar-button-active');
                 if ($drawerContent.is(':visible')) {
-                    $drawer.addClass('active');
+                    $drawer.addClass('cp-toolbar-button-active');
                     $drawerContent.focus();
                 }
             });
             var onBlur = function (e) {
                 if (e.relatedTarget) {
-                    if ($(e.relatedTarget).is('.drawer-button')) { return; }
+                    if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
                     if ($(e.relatedTarget).parents('.'+DRAWER_CLS).length) {
                         $(e.relatedTarget).blur(onBlur);
                         return;
                     }
                 }
-                $drawer.removeClass('active');
+                $drawer.removeClass('cp-toolbar-button-active');
                 $drawerContent.hide();
             };
             $drawerContent.blur(onBlur);
@@ -106,7 +100,7 @@ define([
 
         // The 'notitle' class removes the line added for the title with a small screen
         if (!config.title || typeof config.title !== "object") {
-            $toolbar.addClass('notitle');
+            $toolbar.addClass('cp-toolbar-notitle');
         }
 
         $container.prepend($toolbar);
@@ -185,15 +179,15 @@ define([
         var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
         Cryptpad.clearTooltips();
 
-        var $editUsersList = $('<div>', {'class': 'userlist-others'});
+        var $editUsersList = $('<div>', {'class': 'cp-toolbar-userlist-others'});
 
         // Editors
         var pendingFriends = Common.getPendingFriends();
         editUsersNames.forEach(function (data) {
             var name = data.name || Messages.anonymous;
-            var $span = $('<span>', {'class': 'avatar'});
+            var $span = $('<span>', {'class': 'cp-avatar'});
-            var $rightCol = $('<span>', {'class': 'right-col'});
+            var $rightCol = $('<span>', {'class': 'cp-toolbar-userlist-rightcol'});
-            var $nameSpan = $('<span>', {'class': 'name'}).text(name).appendTo($rightCol);
+            var $nameSpan = $('<span>', {'class': 'cp-toolbar-userlist-name'}).text(name).appendTo($rightCol);
             var isMe = data.curvePublic === user.curvePublic;
             if (Common.isLoggedIn() && data.curvePublic) {
                 if (isMe) {
@@ -203,11 +197,11 @@ define([
                     $nameSpan.text(name);
                 } else if (!friends[data.curvePublic]) {
                     if (pendingFriends.indexOf(data.netfluxId) !== -1) {
-                        $('<span>', {'class': 'friend'}).text(Messages.userlist_pending)
+                        $('<span>', {'class': 'cp-toolbar-userlist-friend'}).text(Messages.userlist_pending)
                             .appendTo($rightCol);
                     } else {
                         $('<span>', {
-                            'class': 'fa fa-user-plus friend',
+                            'class': 'fa fa-user-plus cp-toolbar-userlist-friend',
                             'title': Messages._getKey('userlist_addAsFriendTitle', [
                                 name
                             ])
@@ -219,7 +213,7 @@ define([
                 }
             }
             if (data.profile) {
-                $span.addClass('clickable');
+                $span.addClass('cp-userlist-clickable');
                 $span.click(function () {
                     window.open(origin+'/profile/#' + data.profile);
                 });
@@ -242,7 +236,7 @@ define([
 
         // Viewers
         if (numberOfViewUsers > 0) {
-            var viewText = '<div class="viewer">';
+            var viewText = '<div class="cp-toolbar-userlist-viewer">';
             var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
             viewText += numberOfViewUsers + ' ' + viewerText + '</div>';
             $editUsers.append(viewText);
@@ -252,7 +246,7 @@ define([
         var fa_editusers = '<span class="fa fa-users"></span>';
         var fa_viewusers = '<span class="fa fa-eye"></span>';
         var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
-        $userButtons.find('.buttonTitle').html('').append($spansmall);
+        $userButtons.find('.cp-dropdown-button-title').html('').append($spansmall);
     };
 
     var initUserList = function (toolbar, config) {
@@ -278,21 +272,21 @@ define([
         if (!config.metadataMgr) {
             throw new Error("You must provide a `metadataMgr` to display the userlist");
         }
-        var $content = $('<div>', {'class': 'userlist-drawer'});
+        var $content = $('<div>', {'class': 'cp-toolbar-userlist-drawer'});
         $content.on('drop dragover', function (e) {
             e.preventDefault();
             e.stopPropagation();
         });
-        var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
+        var $closeIcon = $('<span>', {"class": "fa fa-window-close cp-toolbar-userlist-drawer-close"}).appendTo($content);
         $('<h2>').text(Messages.users).appendTo($content);
         $('<p>', {'class': USERLIST_CLS}).appendTo($content);
 
         toolbar.userlistContent = $content;
 
-        var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
+        var $container = $('<span>', {id: 'cp-toolbar-userlist-drawer-open', title: Messages.userListButton});
 
         var $button = $('<button>').appendTo($container);
-        $('<span>',{'class': 'buttonTitle'}).appendTo($button);
+        $('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
 
         toolbar.$leftside.prepend($container);
 
@@ -304,7 +298,7 @@ define([
         var mobile = $('body').width() <= 600;
         var hide = function () {
             $content.hide();
-            $button.removeClass('active');
+            $button.removeClass('cp-toolbar-button-active');
             $ck.css({
                 'padding-left': '',
             });
@@ -314,7 +308,7 @@ define([
             if (mobile) {
                 $ck.hide();
             }
-            $button.addClass('active');
+            $button.addClass('cp-toolbar-button-active');
             $ck.css({
                 'padding-left': '175px',
             });
@@ -370,7 +364,7 @@ define([
         if (hashes.editHash) {
             options.push({
                 tag: 'a',
-                attributes: {title: Messages.editShareTitle, 'class': 'editShare'},
+                attributes: {title: Messages.editShareTitle, 'class': 'cp-toolbar-share-edit-copy'},
                 content: '<span class="fa fa-users"></span> ' + Messages.editShare
             });
             if (readOnly) {
@@ -379,7 +373,7 @@ define([
                     tag: 'a',
                     attributes: {
                         title: Messages.editOpenTitle,
-                        'class': 'editOpen',
+                        'class': 'cp-toolbar-share-edit-open',
                         href: origin + pathname + '#' + hashes.editHash,
                         target: '_blank'
                     },
@@ -391,7 +385,7 @@ define([
         if (hashes.viewHash) {
             options.push({
                 tag: 'a',
-                attributes: {title: Messages.viewShareTitle, 'class': 'viewShare'},
+                attributes: {title: Messages.viewShareTitle, 'class': 'cp-toolbar-share-view-copy'},
                 content: '<span class="fa fa-eye"></span> ' + Messages.viewShare
             });
             if (!readOnly) {
@@ -400,7 +394,7 @@ define([
                     tag: 'a',
                     attributes: {
                         title: Messages.viewOpenTitle,
-                        'class': 'viewOpen',
+                        'class': 'cp-toolbar-share-view-open',
                         href: origin + pathname + '#' + hashes.viewHash,
                         target: '_blank'
                     },
@@ -414,12 +408,12 @@ define([
             feedback: 'SHARE_MENU',
         };
         var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
-        $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
+        $shareBlock.find('.cp-dropdown-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
-        $shareBlock.addClass('shareButton');
+        $shareBlock.addClass('cp-toolbar-share-button');
         $shareBlock.find('button').attr('title', Messages.shareButton);
 
         if (hashes.editHash) {
-            $shareBlock.find('a.editShare').click(function () {
+            $shareBlock.find('a.cp-toolbar-share-edit-copy').click(function () {
                 /*Common.storeLinkToClipboard(false, function (err) {
                     if (!err) { Cryptpad.log(Messages.shareSuccess); }
                 });*/
@@ -429,7 +423,7 @@ define([
             });
         }
         if (hashes.viewHash) {
-            $shareBlock.find('a.viewShare').click(function () {
+            $shareBlock.find('a.cp-toolbar-share-view-copy').click(function () {
                 /*Common.storeLinkToClipboard(true, function (err) {
                     if (!err) { Cryptpad.log(Messages.shareSuccess); }
                 });*/
@@ -451,7 +445,7 @@ define([
         }
         var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
         var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);
-        $button.addClass('shareButton');
+        $button.addClass('cp-toolbar-share-button');
         $button.click(function () {
             var url = window.location.href;
             var success = Cryptpad.Clipboard.copy(url);
@@ -464,11 +458,10 @@ define([
 
     var createTitle = function (toolbar, config) {
         var $titleContainer = $('<span>', {
-            id: 'toolbarTitle',
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
-        var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
+        var $hoverable = $('<span>', {'class': 'cp-toolbar-title-hoverable'}).appendTo($titleContainer);
 
         if (typeof config.title !== "object") {
             console.error("config.title", config);
@@ -480,18 +473,18 @@ define([
 
         // Buttons
         var $text = $('<span>', {
-            'class': 'title'
+            'class': 'cp-toolbar-title-value'
         }).appendTo($hoverable);
         var $pencilIcon = $('<span>', {
-            'class': 'pencilIcon',
+            'class': 'cp-toolbar-title-edit',
             'title': Messages.clickToEdit
         });
         var $saveIcon = $('<span>', {
-            'class': 'saveIcon',
+            'class': 'cp-toolbar-title-save',
             'title': Messages.saveTitle
         }).hide();
         if (config.readOnly === 1) {
-            $titleContainer.append($('<span>', {'class': 'readOnly'})
+            $titleContainer.append($('<span>', {'class': 'cp-toolbar-title-readonly'})
                 .text('('+Messages.readonly+')'));
         }
         if (config.readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
@@ -501,14 +494,14 @@ define([
         }).appendTo($hoverable).hide();
         if (config.readOnly !== 1) {
             $text.attr("title", Messages.clickToEdit);
-            $text.addClass("editable");
+            $text.addClass("cp-toolbar-title-editable");
             var $icon = $('<span>', {
-                'class': 'fa fa-pencil readonly',
+                'class': 'fa fa-pencil cp-toolbar-title-icon-readonly',
                 style: 'font-family: FontAwesome;'
             });
             $pencilIcon.append($icon).appendTo($hoverable);
             var $icon2 = $('<span>', {
-                'class': 'fa fa-check readonly',
+                'class': 'fa fa-check cp-toolbar-title-icon-readonly',
                 style: 'font-family: FontAwesome;'
             });
             $saveIcon.append($icon2).appendTo($hoverable);
@@ -571,23 +564,22 @@ define([
     var createPageTitle = function (toolbar, config) {
         if (config.title || !config.pageTitle) { return; }
         var $titleContainer = $('<span>', {
-            id: 'toolbarTitle',
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
         toolbar.$top.find('.filler').hide();
 
-        var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
+        var $hoverable = $('<span>', {'class': 'cp-toolbar-title-hoverable'}).appendTo($titleContainer);
 
         // Buttons
         $('<span>', {
-            'class': 'title pageTitle'
+            'class': 'cp-toolbar-title-value cp-toolbar-title-value-page'
         }).appendTo($hoverable).text(config.pageTitle);
     };
 
     var createLinkToMain = function (toolbar, config) {
         var $linkContainer = $('<span>', {
-            'class': "cryptpad-link"
+            'class': LINK_CLS
         }).appendTo(toolbar.$top);
 
         // We need to override the "a" tag action here because it is inside the iframe!
@@ -601,7 +593,7 @@ define([
         var $aTag = $('<a>', {
             href: href,
             title: buttonTitle,
-            'class': "cryptpad-logo"
+            'class': "cp-toolbar-link-logo"
         }).append($('<img>', {
             src: '/customize/images/logo_white.png?' + ApiConfig.requireConf.urlArgs
         }));
@@ -784,7 +776,7 @@ define([
     var initClickEvents = function (toolbar, config) {
         var removeDropdowns =  function () {
             window.setTimeout(function () {
-                toolbar.$toolbar.find('.cryptpad-dropdown').hide();
+                toolbar.$toolbar.find('.cp-dropdown-content').hide();
             });
         };
         var cancelEditTitle = function (e) {

www/drive/file.css

@@ -1,595 +0,0 @@
-/* PAGE */
-html,
-body {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  font-size: 16px;
-  overflow: auto;
-}
-body {
-  display: flex;
-  flex-flow: column;
-}
-img.icon {
-  max-width: 20px;
-}
-.unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.app-container {
-  flex: 1;
-  overflow: auto;
-  width: 100%;
-  display: flex;
-  flex-flow: row;
-}
-@media screen and (max-width: 600px) {
-  .app-container {
-    display: block;
-  }
-  .app-container #tree {
-    resize: none;
-    width: 100%;
-    max-width: unset;
-    border-bottom: 1px solid #ccc;
-  }
-  .app-container #tree .category2 {
-    margin-top: 0.5em;
-  }
-}
-.padColor {
-  color: #1c4fa0;
-}
-.codeColor {
-  color: #ffae00;
-}
-.slideColor {
-  color: #e57614;
-}
-.pollColor {
-  color: #006304;
-}
-.fileColor {
-  color: #cd2532;
-}
-.whiteboardColor {
-  color: #800080;
-}
-.driveColor {
-  color: #0087ff;
-}
-.defaultColor {
-  color: #ddd;
-}
-div:focus {
-  outline: none;
-}
-.fa {
-  /*min-width: 17px;*/
-  margin-right: 3px;
-  font-family: FontAwesome;
-}
-ul {
-  list-style: none;
-  padding-left: 0px;
-}
-li {
-  padding: 0px 5px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.folder,
-.file {
-  margin-right: 5px;
-}
-.contextMenu {
-  display: none;
-  position: absolute;
-  z-index: 500;
-}
-.contextMenu li {
-  padding: 0;
-  font-size: 16px;
-}
-.contextMenu li a {
-  cursor: pointer;
-}
-.droppable {
-  background-color: #FE9A2E;
-  color: #222;
-}
-.selected {
-  border: 1px dotted #bbb;
-  background: #666;
-  color: #eee;
-  margin: -1px;
-}
-.selected .fa-minus-square-o,
-.selected .fa-plus-square-o {
-  color: #000;
-}
-.selectedTmp {
-  border: 1px dotted #bbb;
-  background: #AAA;
-  color: #ddd;
-  margin: -1px;
-}
-.selectedTmp .fa-minus-square-o,
-.selectedTmp .fa-plus-square-o {
-  color: #000;
-}
-span.fa-folder,
-span.fa-folder-open {
-  color: #FEDE8B;
-  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: #fff;
-  overflow: auto;
-  resize: horizontal;
-  width: auto;
-  white-space: nowrap;
-  max-width: 500px;
-  min-width: 200px;
-  padding: 10px 0px;
-  color: #000;
-}
-#tree img.icon {
-  margin-bottom: 3px;
-  margin-left: -2px;
-}
-#tree li {
-  padding: 0 0 0 5px;
-  cursor: auto;
-}
-#tree li.collapsed ul {
-  display: none;
-}
-#tree li input {
-  width: calc(100% - 30px);
-}
-#tree li > span.element-row {
-  min-width: calc(100% + 5px);
-  display: inline-block;
-  cursor: pointer;
-  margin-left: -5px;
-  padding-left: 5px;
-}
-#tree li > span.element-row:not(.selected):not(.active):hover {
-  background-color: #eee;
-}
-#tree span.element {
-  cursor: pointer;
-}
-#tree .active:not(.selected):not(.droppable) {
-  background-color: #c8c8c8;
-}
-#tree .category2 {
-  margin-top: 2em;
-}
-#tree .category2 .root > .fa {
-  min-width: 30px;
-  cursor: pointer;
-}
-#tree #allfilesTree {
-  margin-top: 0;
-}
-#tree #searchContainer {
-  text-align: center;
-  padding: 5px 0;
-}
-#tree #searchContainer input {
-  width: 80%;
-}
-#tree .fa.expcol {
-  margin-left: -10px;
-  font-size: 14px;
-  position: absolute;
-  left: -20px;
-  top: 9px;
-  width: auto;
-  height: 11px;
-  padding: 0;
-  margin: 0;
-  background: white;
-  z-index: 10;
-  cursor: default;
-}
-#tree .fa.expcol:before {
-  position: relative;
-  top: -1px;
-}
-#tree ul {
-  margin: 0px 0px 0px 10px;
-  list-style: none;
-  padding-left: 10px;
-}
-#tree ul li {
-  position: relative;
-}
-#tree ul li:before {
-  position: absolute;
-  left: -15px;
-  top: -0.25em;
-  content: '';
-  display: block;
-  border-left: 1px solid #888;
-  height: 1em;
-  border-bottom: 1px solid #888;
-  width: 17.5px;
-}
-#tree ul li:after {
-  position: absolute;
-  left: -15px;
-  bottom: -7px;
-  content: '';
-  display: block;
-  border-left: 1px solid #888;
-  height: 100%;
-}
-#tree ul li.root {
-  margin: 0px 0px 0px -10px;
-}
-#tree ul li.root:before {
-  display: none;
-}
-#tree ul li.root:after {
-  display: none;
-}
-#tree ul li:last-child:after {
-  display: none;
-}
-/* CONTENT */
-#rightCol {
-  display: flex;
-  flex-flow: column;
-  flex: 1;
-  min-width: 0;
-}
-#content {
-  box-sizing: border-box;
-  background: #fff;
-  color: #000;
-  overflow: auto;
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  position: relative;
-}
-#content .selectBox {
-  display: none;
-  background-color: rgba(100, 100, 100, 0.7);
-  position: absolute;
-  z-index: 50;
-}
-#content.readonly {
-  background: #e6e6e6;
-}
-#content h1 {
-  padding-left: 10px;
-  margin-top: 10px;
-}
-#content .info-box {
-  line-height: 40px;
-  padding-left: 10px;
-  margin: 10px auto;
-  background: #ddddff;
-  border: 1px solid #bbb;
-  border-radius: 5px;
-}
-#content .info-box span {
-  cursor: pointer;
-  margin-left: 10px;
-  float: right;
-}
-#content .info-box.noclose {
-  padding-right: 10px;
-}
-#content li {
-  cursor: default;
-}
-#content li:not(.header) *:not(input) {
-  /*pointer-events: none;*/
-}
-#content li:not(.header):hover:not(.selected, .selectedTmp) {
-  background-color: #eee;
-}
-#content li:not(.header):hover .name {
-  /*text-decoration: underline;*/
-}
-#content #folderContent li.searchResult {
-  border-bottom: 1px solid #bbb;
-  display: block;
-}
-#content #folderContent li.searchResult:hover {
-  background-color: initial;
-}
-#content #folderContent li.searchResult table {
-  width: 100%;
-}
-#content #folderContent li.searchResult table .label2 {
-  width: 150px;
-  font-size: 15px;
-  text-align: right;
-  padding-right: 15px;
-}
-#content #folderContent li.searchResult table .openDir a {
-  cursor: pointer;
-  color: #41b7d8;
-}
-#content #folderContent li.searchResult table .openDir a:hover {
-  color: #014c8c;
-  text-decoration: underline;
-}
-#content #folderContent li.searchResult table .path {
-  font-style: italic;
-}
-#content #folderContent li.searchResult table .title {
-  font-weight: bold;
-  cursor: pointer;
-}
-#content #folderContent li.searchResult table .title:hover {
-  background-color: #eee;
-}
-#content #folderContent li.searchResult table .col2 {
-  width: 250px;
-}
-#content #folderContent li.searchResult table td.icon {
-  width: 50px;
-  font-size: 40px;
-}
-#content .element .truncated {
-  display: none;
-}
-#content div.grid {
-  padding: 20px;
-}
-#content div.grid li {
-  display: inline-block;
-  margin: 10px 10px;
-  width: 140px;
-  height: 140px;
-  text-align: center;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-#content div.grid li:not(.selected):not(.selectedTmp) {
-  border: 1px solid #CCC;
-}
-#content div.grid li .name {
-  width: 100%;
-  height: 48px;
-  margin: 8px 0;
-  display: inline-block;
-  overflow: hidden;
-  word-wrap: break-word;
-}
-#content div.grid li.element {
-  position: relative;
-}
-#content div.grid li .truncated {
-  display: block;
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  text-align: center;
-}
-#content div.grid li input {
-  width: 100%;
-  margin-top: 5px;
-}
-#content div.grid li img.icon {
-  height: 48px;
-  max-width: none;
-  margin: 8px 0;
-}
-#content div.grid li .fa {
-  display: block;
-  margin: auto;
-  font-size: 48px;
-  margin: 8px 0;
-  text-align: center;
-}
-#content div.grid li .fa.listonly {
-  display: none;
-}
-#content div.grid .listElement {
-  display: none;
-}
-#content .list {
-  padding-left: 20px;
-}
-#content .list ul {
-  display: table;
-  width: 100%;
-  padding: 0px 10px;
-}
-#content .list li {
-  display: table-row;
-}
-#content .list li > span {
-  padding: 0 5px;
-  display: table-cell;
-}
-#content .list li.header {
-  cursor: default;
-  color: #555;
-}
-#content .list li.header span:not(.fa) {
-  text-align: left;
-}
-#content .list li.header span.sortasc,
-#content .list li.header span.sortdesc {
-  float: right;
-}
-#content .list li.header > span {
-  padding: 15px 5px;
-}
-#content .list li.header > span.active {
-  font-weight: bold;
-}
-#content .list li.header > span.clickable {
-  cursor: pointer;
-}
-#content .list li.header > span.clickable:hover {
-  background: #e8e8e8;
-}
-#content .list .element span {
-  overflow: hidden;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-#content .list .element span.icon {
-  width: 30px;
-}
-#content .list .element span.type,
-#content .list .element span.atime,
-#content .list .element span.ctime {
-  width: 175px;
-}
-#content .list .element span.title {
-  width: 250px;
-}
-@media screen and (max-width: 1200px) {
-  #content .list .element span.title {
-    display: none;
-  }
-}
-#content .list .element span.folders,
-#content .list .element span.files {
-  width: 150px;
-}
-.parentFolder {
-  cursor: pointer;
-  margin-left: 10px;
-}
-.parentFolder:hover {
-  text-decoration: underline;
-}
-#folderContent {
-  padding-right: 10px;
-  flex: 1;
-}
-/* Toolbar */
-#driveToolbar {
-  background: #ddd;
-  color: #555;
-  border-top: 1px solid #ccc;
-  border-bottom: ;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-  box-sizing: content-box;
-  padding: 0 6px;
-  display: flex;
-  flex-flow: row;
-  /* The container <div> - needed to position the dropdown content */
-}
-#driveToolbar .newPadContainer {
-  display: inline-block;
-  height: 100%;
-}
-#driveToolbar button {
-  height: 24px;
-  font: 12px Ubuntu, Arial, sans-serif;
-}
-#driveToolbar button span {
-  font: 12px Ubuntu, Arial, sans-serif;
-}
-#driveToolbar button .fa,
-#driveToolbar button.fa {
-  font-family: FontAwesome;
-}
-#driveToolbar button.element {
-  height: 26px;
-  width: 26px;
-  padding: 0;
-  box-sizing: border-box;
-}
-#driveToolbar button.new {
-  padding: 0 5px;
-}
-#driveToolbar .dropdown-bar {
-  margin: 2px 2px;
-  line-height: 1em;
-  position: relative;
-  display: inline-block;
-}
-#driveToolbar .right {
-  float: right;
-  /* Right-side buttons */
-}
-#driveToolbar .right button {
-  display: inline-block;
-}
-#driveToolbar .right button.active {
-  display: none;
-}
-#driveToolbar .right button .fa {
-  margin-right: 0px;
-}
-#driveToolbar .dropdown-bar-content {
-  margin-right: 2px;
-}
-#driveToolbar .leftside {
-  width: auto;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-}
-#driveToolbar .rightside {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  float: right;
-}
-#driveToolbar .path {
-  flex: 1;
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  cursor: default;
-  width: auto;
-  overflow: hidden;
-  white-space: nowrap;
-  direction: rtl;
-  max-width: 100%;
-  text-align: left;
-}
-#driveToolbar .path .element {
-  padding: 5px;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-#driveToolbar .path .element.clickable {
-  cursor: pointer;
-}
-#driveToolbar .path .element.clickable:hover {
-  background: #fff;
-  border: 1px solid #888;
-}
-#driveToolbar #contextButtonsContainer {
-  float: right;
-  margin: 2px;
-}
-#driveToolbar #contextButtonsContainer button {
-  vertical-align: top;
-}

www/drive/file.less

@@ -709,7 +709,7 @@ span {
             .fa {
                 margin-right: 5px;
             }
-            .buttonTitle {
+            .cp-dropdown-button-title {
                 display: inline-flex;
                 height: @toolbar-line-height;
                 align-items: center;
@@ -730,13 +730,13 @@ span {
         }
     }
     /* The container <div> - needed to position the dropdown content */
-    .dropdown-bar {
+    .cp-dropdown-container {
         margin: 2px 2px;
         line-height: 1em;
         position: relative;
         display: inline-block;
     }
-    .dropdown-bar-content {
+    .cp-dropdown-content {
         margin-right: 2px;
     }
 

www/drive/main.js

@@ -1154,23 +1154,8 @@ define([
 
         // This is duplicated in cryptpad-common, it should be unified
         var getFileIcon = function (id) {
-            var $icon = Cryptpad.getIcon();
-
             var data = filesOp.getFileData(id);
-            if (!data) { return $icon; }
+            return Cryptpad.getFileIcon(data);
-
-            var href = data.href;
-            if (!href) { return $icon; }
-
-            if (href.indexOf('/pad/') !== -1) { $icon = Cryptpad.getIcon('pad'); }
-            else if (href.indexOf('/pad2/') !== -1) { $icon = Cryptpad.getIcon('pad'); } // SFRAME
-            else if (href.indexOf('/code/') !== -1) { $icon = Cryptpad.getIcon('code'); }
-            else if (href.indexOf('/slide/') !== -1) { $icon = Cryptpad.getIcon('slide'); }
-            else if (href.indexOf('/poll/') !== -1) { $icon = Cryptpad.getIcon('poll'); }
-            else if (href.indexOf('/whiteboard/') !== -1) { $icon = Cryptpad.getIcon('whiteboard'); }
-            else if (href.indexOf('/file/') !== -1) { $icon = Cryptpad.getIcon('file'); }
-
-            return $icon;
         };
         var getIcon = Cryptpad.getIcon;
 
@@ -1356,10 +1341,6 @@ define([
 
         // Create the button allowing the user to switch from list to icons modes
         var createViewModeButton = function ($container) {
-            /*var $block = $('<div>', {
-                'class': 'dropdown-bar right changeViewModeContainer'
-            });*/
-
             var $listButton = $listIcon.clone().addClass('element');
             var $gridButton = $gridIcon.clone().addClass('element');
 
@@ -1495,7 +1476,7 @@ define([
         };
 
         var hideNewButton = function () {
-            $iframe.find('.dropdown-bar-content').hide();
+            $iframe.find('.cp-dropdown-content').hide();
         };
 
         var SORT_FOLDER_DESC = 'sortFoldersDesc';
@@ -2004,7 +1985,7 @@ define([
             createTitle($toolbar.find('.path'), path);
 
             if (APP.mobile()) {
-                var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
+                var $context = $('<button>', {'class': 'element right cp-dropdown-container', id: 'contextButton'});
                 $context.append($('<span>', {'class': 'fa fa-caret-down'}));
                 $context.appendTo($toolbar.find('.rightside'));
                 $context.click(function (e) {
@@ -2301,7 +2282,7 @@ define([
             $trashContextMenu.hide();
             $contentContextMenu.hide();
             $defaultContextMenu.hide();
-            $iframe.find('.cryptpad-dropdown').hide();
+            $iframe.find('.cp-dropdown-content').hide();
         };
 
         var stringifyPath = function (path) {
@@ -2335,7 +2316,7 @@ define([
 
         // Disable middle click in the context menu to avoid opening /drive/inner.html# in new tabs
         $(ifrw).click(function (e) {
-            if (!e.target || !$(e.target).parents('.cryptpad-dropdown').length) { return; }
+            if (!e.target || !$(e.target).parents('.cp-dropdown-content').length) { return; }
             if (e.which !== 1) {
                 e.stopPropagation();
                 return false;
@@ -2919,6 +2900,8 @@ define([
             };
 
             if (!readOnly && !APP.loggedIn) {
+                // TODO secure drive
+                // cryptpad-backup --> cp-toolbar-backup
                 var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
                 $backupButton.append($backupIcon.clone().css('marginRight', '0px'));
                 $backupButton.attr('title', Messages.fm_backup_title);

www/drive/oldfile.css

@@ -1,378 +0,0 @@
-/* PAGE */
-
-html, body {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    position: relative;
-    font-size: 20px;
-    overflow: auto;
-}
-
-body {
-    display: flex;
-    flex-flow: column;
-}
-
-.app-container {
-    flex: 1;
-    overflow: auto;
-    width: 100%;
-    display: flex;
-    flex-flow: row;
-}
-
-.fa {
-    /*min-width: 17px;*/
-    margin-right: 3px;
-    font-family: FontAwesome;
-}
-
-ul {
-    list-style: none;
-    padding-left: 10px;
-}
-
-li {
-    padding: 0px 5px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.folder, .file {
-    margin-right: 5px;
-}
-
-.contextMenu {
-    display: none;
-    position: absolute;
-}
-
-.droppable {
-    background-color: #FE9A2E;
-    color: #222;
-}
-
-.selected {
-    border: 1px dotted #bbb;
-    background: #666;
-    color: #eee;
-    margin: -1px;
-}
-
-/* TREE */
-
-
-#tree {
-    border-right: 1px solid #ccc;
-    box-sizing: border-box;
-    background: #eee;
-    overflow: auto;
-    resize: horizontal;
-    width: 350px;
-    white-space: nowrap;
-    max-width: 500px;
-    min-width: 200px;
-    padding: 10px 0px;
-}
-
-#tree li {
-    cursor: auto;
-}
-
-#tree span.element {
-    cursor: pointer;
-}
-
-#tree li > span.element:hover {
-    text-decoration: underline;
-}
-
-#tree .active {
-    text-decoration: underline;
-}
-
-#tree .category2 {
-    margin-top: 2em;
-}
-
-#tree .fa.expcol {
-    margin-left: -10px;
-    font-size: 14px;
-    position: absolute;
-    left: -20px;
-    top: 9px;
-    width: auto;
-    height: 11px;
-    padding: 0;
-    margin: 0;
-    background: white;
-    z-index: 10;
-    cursor: default;
-}
-#tree .fa.expcol:before {
-    position:relative;
-    top: -1px;
-}
-
-#tree li.collapsed ul {
-    display: none;
-}
-
-#tree li input {
-    width: calc(100% - 30px);
-}
-
-/* Tree lines */
-
-#tree ul {
-    margin: 0px 0px 0px 10px;
-    list-style: none;
-}
-#tree ul li {
-    position: relative;
-}
-#tree ul li:before {
-    position: absolute;
-    left: -15px;
-    top: -0.25em;
-    content: '';
-    display: block;
-    border-left: 1px solid #888;
-    height: 1em;
-    border-bottom: 1px solid #888;
-    width: 17.5px;
-}
-#tree ul li:after {
-    position: absolute;
-    left: -15px;
-    bottom: -7px;
-    content: '';
-    display: block;
-    border-left: 1px solid #888;
-    height: 100%;
-}
-#tree ul li.root {
-    margin: 0px 0px 0px -10px;
-}
-#tree ul li.root:before {
-    display: none;
-}
-#tree ul li.root:after {
-    display: none;
-}
-#tree ul li:last-child:after {
-    display: none;
-}
-
-
-/* CONTENT */
-
-#content {
-    box-sizing: border-box;
-    background: #eee;
-    overflow: auto;
-    flex: 1;
-    display: flex;
-    flex-flow: column;
-}
-
-#content h1 {
-    padding-left: 10px;
-    margin-top: 10px;
-}
-
-#content .info-box {
-    margin: 0px auto;
-    padding: 5px;
-    background: #ddddff;
-    border: 1px solid #bbb;
-    border-radius: 5px;
-    margin-bottom: 10px;
-}
-#content .info-box span {
-    cursor: pointer;
-    margin-left: 10px;
-    float: right;
-}
-
-.parentFolder {
-    cursor: pointer;
-    margin-left: 10px;
-}
-
-.parentFolder:hover {
-    text-decoration: underline;
-}
-
-#folderContent {
-    padding-right: 10px;
-    flex: 1;
-}
-
-#content li:not(.header) * {
-    pointer-events: none;
-}
-
-#content li:hover:not(.header) .name {
-    text-decoration: underline;
-}
-
-#content .grid li {
-    display: inline-block;
-    margin: 10px 10px;
-    width: 140px;
-    text-align: center;
-    vertical-align: top;
-}
-
-#content .grid li .name {
-    width: 100%;
-}
-
-#content .grid li input {
-    width: 100%;
-}
-
-#content .grid li .fa {
-    display: block;
-    margin: auto;
-    font-size: 40px;
-    text-align: center;
-}
-
-#content .grid li .fa.listonly {
-    display: none;
-}
-
-#content .list li {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    padding-right: 0px;
-}
-
-#content .list li .element {
-    display: inline-flex;
-    flex: 1;
-}
-
-#content .list li.header {
-    cursor: default;
-    color: #008;
-    margin-top: 10px;
-}
-#content .list li.header .element span:not(.fa) {
-    border-right: 1px solid #CCC;
-    text-align: left;
-}
-#content .list li.header .element span.fa {
-    float: right;
-}
-#content .list li.header span.name {
-    padding-left: 0;
-}
-
-#content .list .element span {
-    padding: 0px 10px;
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    box-sizing: border-box;
-    padding-right: 0px;
-    border-right: 10px solid rgba(0, 0, 0, 0);
-}
-#content .list .element span.name {
-    width: 478px;
-}
-.iframe #content .list .element span.name {
-    width: 278px;
-}
-#content .list .header span.name {
-    width: 500px;
-}
-.iframe #content .list .header span.name {
-    width: 300px;
-}
-#content .list .element span.type, #content .list .element span.atime, #content .list .element span.ctime {
-    width: 175px;
-}
-#content .list .element span.title {
-    width: 250px;
-}
-#content .list .element span.folders {
-    width: 150px;
-}
-#content .list .element span.files {
-    width: 150px;
-}
-#content div.grid .listElement {
-    display: none;
-}
-@media screen and (max-width: 1200px) {
-    #content .list .element span.title {
-        display: none;
-    }
-}
-@media screen and (min-width: 1201px) {
-    #content .list .element span.title {
-        display: inline;
-    }
-}
-
-/* Toolbar */
-
-#driveToolbar {
-    background: #ddd;
-    height: 40px;
-}
-
-.newPadContainer {
-    display: inline-block;
-    height: 100%;
-}
-
-button.newElement {
-    border-radius: 2px;
-    height: 30px;
-    background: #888;
-    color: #eee;
-    font-size: 16px;
-    border: none;
-    font-weight: bold;
-}
-
-button.newElement:hover {
-    box-shadow: 0px 0px 2px #000;
-}
-
-
-/* The container <div> - needed to position the dropdown content */
-#driveToolbar .dropdown-bar {
-    margin: 4px 5px;
-    position: relative;
-    display: inline-block;
-}
-#driveToolbar .dropdown-bar.right {
-    float: right;
-}
-
-/* Right-side buttons */
-#driveToolbar .dropdown-bar.right button {
-    display: inline-block;
-}
-#driveToolbar .dropdown-bar.right button.active {
-    display: none;
-}
-#driveToolbar .dropdown-bar.right button .fa {
-    margin-right: 0px;
-}
-.dropdown-bar-content {
-    margin-top: -3px;
-    margin-right: 2px;
-}

www/filepicker/app-filepicker.less

@@ -0,0 +1,55 @@
+@import (once) '../../customize/src/less2/include/colortheme.less';
+@import (once) '../../customize/src/less2/include/modal.less';
+@import (once) '../../customize/src/less2/include/icon-colors.less';
+@import (once) '../../customize/src/less2/include/fileupload.less';
+
+.iconColors_main();
+.fileupload_main();
+
+#cp-filepicker-dialog {
+    display: none;
+    .cp-modal {
+        .cp-filepicker-content {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            overflow-y: auto;
+        }
+
+        .cp-filepicker-content-element {
+            @darker: darken(@colortheme_modal-fg, 30%);
+
+            width: 200px;
+            min-width: 200px;
+            height: 1em;
+            padding: 0.5em;
+            margin: 5px;
+            box-sizing: content-box;
+
+            text-align: left;
+            line-height: 1em;
+            cursor: pointer;
+
+            background-color: #111;
+            color: @darker;
+
+            transition: all 0.1s;
+
+            &:hover {
+                color: @colortheme_modal-fg;
+            }
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            align-items: center;
+
+            .fa {
+                cursor: pointer;
+                margin-right: 0.5em;
+            }
+        }
+    }
+}
+

www/filepicker/inner.html

@@ -19,7 +19,7 @@
         }
     </style>
 </head>
-<body style="background: transparent;">
+<body class="cp-app-filepicker" style="background: transparent;">
 </body>
 </html>
 

www/filepicker/inner.js

@@ -9,9 +9,7 @@ define([
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less2/main.less',
-    'less!/customize/src/less/toolbar.less',
-    'less!/common/file-dialog.less',
 ], function (
     $,
     Crypto,
@@ -46,6 +44,7 @@ define([
             });
         };
 
+        // File uploader
         var fmConfig = {
             body: $('body'),
             noHandlers: true,
@@ -54,17 +53,75 @@ define([
             }
         };
         APP.FM = common.createFileManager(fmConfig);
-        var cfg = {
+
-            $body: $body,
+        // Create file picker
-            common: common,
+        var onSelect = function (url) {
-            onSelect: function (url) {
+            onFilePicked({url: url});
-                onFilePicked({url: url});
-            },
-            data: {
-                FM: APP.FM
-            }
         };
-        common.createFileDialog(cfg);
+        var data = {
+            FM: APP.FM
+        };
+        var createFileDialog = function (cfg) {
+            var sframeChan = common.getSframeChannel();
+            var updateContainer;
+            var hideFileDialog = function () {
+                sframeChan.event('EV_FILE_PICKER_CLOSE');
+            };
+            // Create modal
+            var $blockContainer = Cryptpad.createModal({
+                id: 'cp-filepicker-dialog',
+                $body: $body,
+                onClose: hideFileDialog
+            }).show();
+            // Set the fixed content
+            var $block = $blockContainer.find('.cp-modal');
+            var $description = $('<p>').text(Messages.filePicker_description);
+            $block.append($description);
+            var $filter = $('<p>', {'class': 'cp-modal-form'}).appendTo($block);
+            var to;
+            $('<input>', {
+                type: 'text',
+                'class': 'cp-filepicker-filter',
+                'placeholder': Messages.filePicker_filter
+            }).appendTo($filter).on('keypress', function () {
+                if (to) { window.clearTimeout(to); }
+                to = window.setTimeout(updateContainer, 300);
+            });
+            $filter.append(common.createButton('upload', false, data, function () {
+                hideFileDialog();
+            }));
+            var $container = $('<span>', {'class': 'cp-filepicker-content'}).appendTo($block);
+            // Update the files list when needed
+            updateContainer = function () {
+                $container.html('');
+                var filter = $filter.find('.cp-filepicker-filter').val().trim();
+                var todo = function (err, list) {
+                    if (err) { return void console.error(err); }
+                    Object.keys(list).forEach(function (id) {
+                        var data = list[id];
+                        var name = data.title || '?';
+                        if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
+                            return;
+                        }
+                        var $span = $('<span>', {
+                            'class': 'cp-filepicker-content-element',
+                            'title': name,
+                        }).appendTo($container);
+                        $span.append(Cryptpad.getFileIcon(data));
+                        $span.append(name);
+                        $span.click(function () {
+                            if (typeof onSelect === "function") { onSelect(data.href); }
+                            hideFileDialog();
+                        });
+                    });
+                };
+                common.getFilesList(todo);
+            };
+            updateContainer();
+            sframeChan.on('EV_FILE_PICKER_REFRESH', updateContainer);
+        };
+        createFileDialog();
+
         Cryptpad.removeLoadingScreen();
     };
 

www/invite/main.js

@@ -87,7 +87,7 @@ define([
         $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         // main block is hidden in case javascript is disabled

www/login/main.js

@@ -22,7 +22,7 @@ define([
         $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         // main block is hidden in case javascript is disabled

www/pad/app-pad.less

@@ -0,0 +1,30 @@
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) '../../customize/src/less2/include/alertify.less';
+
+.toolbar_main();
+.alertify_main();
+
+// body
+&.cp-app-pad {
+    #cke_1_top {
+        overflow: visible;
+        padding: 0px;
+        display: flex;
+    }
+    #cke_1_toolbox {
+        display: inline-block;
+        width: 100%;
+        background-color: #c1e7ff;
+    }
+    #cke_1_toolbox .cke_toolbar {
+        height: 28px;
+        padding: 2px 0;
+    }
+    #cke_1_top .cryptpad-toolbar {
+        padding: 0;
+        display: block;
+    }
+    .cke_wysiwyg_frame {
+        min-width: 60%;
+    }
+}

www/pad/inner.html

@@ -1,36 +1,10 @@
 <!DOCTYPE html>
-<html class="cp pad">
+<html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.2" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-    html, body {
-        margin: 0px;
-    }
-    #cke_1_top {
-        overflow: visible;
-        padding: 0px;
-        display: flex;
-    }
-    #cke_1_toolbox {
-        display: inline-block;
-        width: 100%;
-        background-color: #c1e7ff;
-    }
-    #cke_1_toolbox .cke_toolbar {
-        height: 28px;
-        padding: 2px 0;
-    }
-    #cke_1_top .cryptpad-toolbar {
-        padding: 0;
-        display: block;
-    }
-    .cke_wysiwyg_frame {
-        min-width: 60%;
-    }
-    </style>
 </head>
-<body class="app-pad">
+<body class="cp-app-pad">
     <textarea style="display:none" id="editor1" name="editor1"></textarea>
 </body>
 </html>

www/pad/inner.js

@@ -40,8 +40,7 @@ define([
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less2/main.less',
-    'less!/customize/src/less/toolbar.less'
 ], function (
     $,
     Crypto,
@@ -545,7 +544,7 @@ define([
             $bar.find('#cke_1_toolbar_collapser').hide();
             if (!readOnly) {
                 // Expand / collapse the toolbar
-                var $collapse = Cryptpad.createButton(null, true);
+                var $collapse = common.createButton(null, true);
                 $collapse.removeClass('fa-question');
                 var updateIcon = function () {
                     $collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');

www/profile/main.js

@@ -544,7 +544,7 @@ define([
 
     $(function () {
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         APP.$container = $('#container');

www/register/main.js

@@ -25,7 +25,7 @@ define([
         $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         // main block is hidden in case javascript is disabled

www/settings/main.js

@@ -479,7 +479,7 @@ define([
 
     $(function () {
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         APP.$container = $('#container');

www/user/main.js

@@ -41,7 +41,7 @@ define([
         $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
         $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
+            $('.cp-dropdown-content').hide();
         });
 
         // main block is hidden in case javascript is disabled