Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/pages.js

@@ -10,6 +10,72 @@ define([
         return e;
     };
 
+    var indexContent = function () {
+        return [
+            h('div.page.category.first#knowmore', [
+                h('center', [
+                    h('h1', Msg.main_howitworks)
+                ])
+            ]),
+            h('div.page', [
+                h('div.info-container', [
+                    h('div.left.image', [
+                        h('img', {
+                            src: '/customize/images/zeroknowledge_small.png',
+                            alt: 'Zero Knowledge'
+                        })
+                    ]),
+                    h('div.right', [
+                        h('h2', Msg.main_zeroKnowledge),
+                        setHTML(h('p'), Msg.main_zeroKnowledge_p)
+                    ])
+                ])
+            ]),
+            h('div.page.even', [
+                h('div.info-container', [
+                    h('div.left', [
+                        h('h2', Msg.main_writeItDown),
+                        h('p', Msg.main_writeItDown_p)
+                    ]),
+                    h('div.right.image', [
+                        h('img', {
+                            alt: "User account",
+                            src: '/customize/images/realtime_small.png',
+                        })
+                    ])
+                ])
+            ]),
+            h('div.page', [
+                h('div.info-container', [
+                    h('div.left.image', [
+                        h('img', {
+                            src: '/customize/images/key_small.png',
+                            alt: 'User account'
+                        })
+                    ]),
+                    h('div.right', [
+                        h('h2', Msg.main_share),
+                        h('p', Msg.main_share_p)
+                    ])
+                ])
+            ]),
+            h('div.page.even', [
+                h('div.info-container', [
+                    h('div.left', [
+                        h('h2', Msg.main_organize),
+                        h('p', Msg.main_organize_p)
+                    ]),
+                    h('div.right.image', [
+                        h('img', {
+                            src: '/customize/images/organize.png',
+                            alt: 'User account'
+                        })
+                    ])
+                ])
+            ])
+        ];
+    };
+
     Pages['/about.html'] = function () {
         return h('div#main_other', [
             h('center', [
@@ -18,7 +84,7 @@ define([
             setHTML(h('p'), Msg.main_p2),
             h('h2', Msg.main_howitworks),
             setHTML(h('p'), Msg.main_howitworks_p1)
-        ]);
+        ].concat(indexContent()));
     };
 
     Pages['/privacy.html'] = function () {
@@ -105,71 +171,6 @@ define([
         ]);
     };
 
-    var indexContent = function () {
-        return [
-            h('div.page.category.first#knowmore', [
-                h('center', [
-                    h('h1', Msg.main_howitworks)
-                ])
-            ]),
-            h('div.page', [
-                h('div.info-container', [
-                    h('div.left.image', [
-                        h('img', {
-                            src: '/customize/images/zeroknowledge_small.png',
-                            alt: 'Zero Knowledge'
-                        })
-                    ]),
-                    h('div.right', [
-                        h('h2', Msg.main_zeroKnowledge),
-                        setHTML(h('p'), Msg.main_zeroKnowledge_p)
-                    ])
-                ])
-            ]),
-            h('div.page.even', [
-                h('div.info-container', [
-                    h('div.left', [
-                        h('h2', Msg.main_writeItDown),
-                        h('p', Msg.main_writeItDown_p)
-                    ]),
-                    h('div.right.image', [
-                        h('img', {
-                            alt: "User account",
-                            src: '/customize/images/realtime_small.png',
-                        })
-                    ])
-                ])
-            ]),
-            h('div.page', [
-                h('div.info-container', [
-                    h('div.left.image', [
-                        h('img', {
-                            src: '/customize/images/key_small.png',
-                            alt: 'User account'
-                        })
-                    ]),
-                    h('div.right', [
-                        h('h2', Msg.main_share),
-                        h('p', Msg.main_share_p)
-                    ])
-                ])
-            ]),
-            h('div.page.even', [
-                h('div.info-container', [
-                    h('div.left', [
-                        h('h2', Msg.main_organize),
-                        h('p', Msg.main_organize_p)
-                    ]),
-                    h('div.right.image', [
-                        h('img', {
-                            src: '/customize/images/organize.png',
-                            alt: 'User account'
-                        })
-                    ])
-                ])
-            ])
-        ];
-    };
 
     var appButton = function (alt, h2, img, p, url, btn, id) {
         return h('div.app', [
@@ -258,12 +259,11 @@ define([
                 ]),
             ])
         ]
-        .concat(tryIt())
+        .concat(tryIt());
-        .concat(indexContent());
     };
 
     var loadingScreen = function () {
-        return h('div#loading',
+        return h('div#loading', 
             h('div.loadingContainer', [
                 h('img.cryptofist', {
                     src: '/customize/cryptofist_small.png'
@@ -426,5 +426,78 @@ define([
         ];
     };
 
+    Pages['/poll/'] = Pages['/poll/index.html'] = function () {
+        return [
+            appToolbar(),
+            h('div#content', [
+                h('div#poll', [
+                    h('div#howItWorks', [
+                        h('h1', 'CryptPoll'),
+                        h('h2', Msg.poll_subtitle),
+                        h('p', Msg.poll_p_save),
+                        h('p', Msg.poll_p_encryption)
+                    ]),
+                    h('div.upper', [
+                        h('button#publish', {
+                            style: { display: 'none' }
+                        }, Msg.poll_publish_button),
+                        h('button#admin', {
+                            style: { display: 'none' },
+                            title: Msg.poll_admin_button
+                        }, Msg.poll_admin_button),
+                        h('button#help', {
+                            title: Msg.poll_show_help_button,
+                            style: { display: 'none' }
+                        }, Msg.poll_show_help_button)
+                    ]),
+                    h('div.realtime', [
+                        h('br'),
+                        h('center', [
+                            h('textarea#description', {
+                                rows: "5",
+                                cols: "50",
+                                disabled: true
+                            }),
+                            h('br')
+                        ]),
+                        h('div#tableContainer', [
+                            h('div#tableScroll'),
+                            h('button#create-user', {
+                                title: Msg.poll_create_user
+                            }, h('span.fa.fa-plus')),
+                            h('button#create-option', {
+                                title: Msg.poll_create_option
+                            }, h('span.fa.fa-plus')),
+                            h('button#commit', {
+                                title: Msg.poll_commit
+                            }, h('span.fa.fa-check'))
+                        ])
+                    ])
+                ])
+            ]),
+            loadingScreen()
+        ];
+    };
+
+    Pages['/drive/'] = Pages['/drive/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/file/'] = Pages['/file/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/pad/'] = Pages['/pad/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/code/'] = Pages['/code/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/slide/'] = Pages['/slide/index.html'] = function () {
+        return loadingScreen();
+    };
+
     return Pages;
 });

customize.dist/src/less/loading.less

@@ -1,3 +1,5 @@
+@import "./variables.less";
+
 .cp #loading {
     position: fixed;
     z-index: 9999;

customize.dist/template.js

@@ -4,14 +4,14 @@ define([
     '/common/cryptpad-common.js',
     '/customize/pages.js',
 
-    'css!/customize/main.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
 ], function ($, h, Cryptpad, Pages) {
 $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
-        return /^\/(pad|code|slide|poll|whiteboard)\//.test(location.pathname);
+        console.error("Checking if is main app");
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|drive)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -116,40 +116,87 @@ $(function () {
 
     var pathname = location.pathname;
 
-
     if (isMainApp()) {
+        console.log("Is main app");
         if (typeof(Pages[pathname]) === 'function') {
-            $('body').html(h('body', Pages[pathname]()).innerHTML);
+            require([
-            setTimeout(function () {
+                'less!/customize/src/less/loading.less'
-                require(['/whiteboard/main.js'], function () {
+            ], function () {
-                    $('body').removeClass('noscroll');
+                //$('body').html(h('body', Pages[pathname]()).innerHTML);
-                });
+
+                console.log("TEMPLATED");
+
+                if (/whiteboard/.test(pathname)) {
+                    $('body').html(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/whiteboard/main.js'], function () {
+                            $('body').removeClass('noscroll');
+                        });
+                    });
+                } else if (/poll/.test(pathname)) {
+                    $('body').html(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/poll/main.js'], function () {
+                            $('body').removeClass('noscroll');
+                            console.log("TEMPLATE!");
+                        });
+                    });
+                } else if (/drive/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/drive/main.js'], function () {
+                            console.log("Templating done");
+                        });
+                    });
+                } else if (/file/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/file/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                } else if (/pad/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/pad/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                } else if (/code/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/code/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                } else if (/slide/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/slide/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                }
             });
+
             return;
         }
     }
 
     require([
+        'less!/customize/src/less/cryptpad.less',
         'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    ], function () {});
+    ], function () {
+        $body.append($topbar).append($main).append($footer);
 
-    $body.append($topbar).append($main).append($footer);
+        if (/^\/settings\//.test(pathname)) {
-
+            require([ '/settings/main.js', ], function () {});
-    if (/^\/settings\//.test(pathname)) {
+        } else if (/^\/profile\//.test(pathname)) {
-        require([ '/settings/main.js', ], function () {});
+            require([ '/profile/main.js'], function () {});
-    } else if (/^\/user\//.test(pathname)) {
+        } else if (/^\/user\//.test(pathname)) {
-        require([ '/user/main.js'], function () {});
+            require([ '/user/main.js'], function () {});
-    } else if (/^\/profile\//.test(pathname)) {
+        } else if (/^\/register\//.test(pathname)) {
-        require([ '/profile/main.js'], function () {});
+            require([ '/register/main.js' ], function () {});
-    } else if (/^\/register\//.test(pathname)) {
+        } else if (/^\/login\//.test(pathname)) {
-        require([ '/register/main.js' ], function () {});
+            require([ '/login/main.js' ], function () {});
-    } else if (/^\/login\//.test(pathname)) {
+        } else if (/^\/($|^\/index\.html$)/.test(pathname)) {
-        require([ '/login/main.js' ], function () {});
+            // TODO use different top bar
-    } else if (/^\/($|^\/index\.html$)/.test(pathname)) {
+            require([ '/customize/main.js', ], function () {});
-        // TODO use different top bar
+        } else {
-        require([ '/customize/main.js', ], function () {});
+            require([ '/customize/main.js', ], function () {});
-    } else {
+        }
-        require([ '/customize/main.js', ], function () {});
+    });
-    }
 });
 });

customize.dist/translations/messages.es.js

@@ -297,9 +297,9 @@ define(function () {
         'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Compartir&nbsp;</span> para obtener un <em>enlace solo lectura</em>&nbsp;que permite leer pero no escribir.',
         '</p>',
 
-        '<p><span style="color:#808080;"><em>',
+        '<p><em>',
         'Vamos, solo empezia a escribir...',
-        '</em></span></p></span>',
+        '</em></p></span>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.fr.js

@@ -500,10 +500,10 @@ define(function () {
         '<br>',
         'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Partager&nbsp;</span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
         '</p>',
-        '<p><span style="color:#808080; font-size: 16px;">',
+        '<p>',
         '<em>',
         'Lancez-vous, commencez à taper...',
-        '</em></span></p></span>',
+        '</em></p></span>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.js

@@ -511,9 +511,9 @@ define(function () {
         'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
         '</p>',
 
-        '<p><span style="color:#808080;"><em>',
+        '<p><em>',
         'Go ahead, just start typing...',
-        '</em></span></p></span>',
+        '</em></p></span>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.ro.js

@@ -331,7 +331,7 @@ define(function () {
     out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
     out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
     out.header_logoTitle = "Mergi la pagina principală";
-    out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span style=\"background-color:#5cb85c;color:#ffffff;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><span style=\"color:#808080;\"><em>Îndrăznește, începe să scrii...</em></span></p></span><p>&nbsp;<br></p>";
+    out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span style=\"background-color:#5cb85c;color:#ffffff;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p></span><p>&nbsp;<br></p>";
     out.codeInitialState = "/*\n   Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n   Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n   Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
     out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n  - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele  - Slide-urile tale sunt actualizate în timp real.";
     out.driveReadmeTitle = "Ce este CryptDrive?";

customize.dist/translations/messages.zh.js

@@ -473,9 +473,9 @@ define(function () {
         '分享這個工作檔案的網址連結給友人或是使用、 <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;分享&nbsp;</span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
         '</p>',
 
-        '<p><span style="color:#808080;"><em>',
+        '<p><em>',
         '來吧, 開始打字輸入吧...',
-        '</em></span></p></span>',
+        '</em></p></span>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
     "test": "node TestSelenium.js",
-    "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css && lessc ./www/file/file.less > ./www/file/file.css && lessc ./www/code/code.less > ./www/code/code.css",
+    "style": "lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css",
     "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../about.html ../contact.html ../../www/login/index.html ../../www/register/index.html ../../www/settings/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;"
   }
 }

www/code/code.css

@@ -1,79 +0,0 @@
-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;
-}
-.CodeMirror {
-  display: inline-block;
-  height: 100%;
-  width: 50%;
-  min-width: 20%;
-  max-width: 80%;
-  resize: horizontal;
-}
-.CodeMirror.transition {
-  transition: width 500ms, min-width 500ms, max-width 500ms;
-}
-.CodeMirror.fullPage {
-  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;
-}
-#previewContainer media-tag * {
-  max-width: 100%;
-}
-#preview {
-  max-width: 40vw;
-  margin: auto;
-}
-#preview table {
-  border-collapse: collapse;
-}
-#preview table tr th {
-  border: 3px solid black;
-  padding: 15px;
-}
-@media (max-width: 600px) {
-  .CodeMirror {
-    flex: 1;
-    max-width: 100%;
-    resize: none;
-  }
-  #previewContainer {
-    display: none !important;
-  }
-}

www/code/code.less

@@ -1,5 +1,5 @@
-@import "../../customize.dist/src/less/variables.less";
+@import "/customize/src/less/variables.less";
-@import "../../customize.dist/src/less/mixins.less";
+@import "/customize/src/less/mixins.less";
 
 html, body{
     height: 100%;

www/code/index.html

@@ -4,15 +4,8 @@
     <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <meta name="referrer" content="no-referrer" />
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="icon" type="image/png"
-        href="/customize/main-favicon.png"
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
             overflow-y: hidden;
@@ -46,14 +39,3 @@
     <div id="iframe-container">
         <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </div>
-    <div id="loading">
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-</body>
-</html>

www/code/inner.html

@@ -2,13 +2,11 @@
 <html style="height: 100%;">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script src="/bower_components/codemirror/lib/codemirror.js"></script>
     <link rel="stylesheet" href="/bower_components/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="/bower_components/codemirror/addon/dialog/dialog.css">
     <link rel="stylesheet" href="/bower_components/codemirror/addon/fold/foldgutter.css" />
-    <link rel="stylesheet" href="/code/code.css" />
     <script src="/bower_components/codemirror/mode/javascript/javascript.js"></script>
     <script src="/bower_components/codemirror/addon/mode/loadmode.js"></script>
     <script src="/bower_components/codemirror/mode/meta.js"></script>
@@ -32,6 +30,7 @@
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
     <script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
+    <script data-bootload="inner.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
 </head>
 <body>
   <div id="cme_toolbox" class="toolbar-container"></div>

www/code/inner.js

@@ -0,0 +1,5 @@
+define([
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/code/code.less',
+    'less!/customize/src/less/toolbar.less',
+], function () {});

www/code/main.js

@@ -10,6 +10,9 @@ define([
     '/common/cryptget.js',
     '/common/diffMarked.js',
     '/bower_components/tweetnacl/nacl-fast.min.js', // needed for media-tag
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less'
 ], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad,
              Cryptget, DiffMd) {
     var Messages = Cryptpad.Messages;

www/common/notify.js

@@ -41,13 +41,39 @@
         }
     };
 
+    var DEFAULT_MAIN = '/customize/main-favicon.png';
+    var DEFAULT_ALT = '/customize/alt-favicon.png';
+
+    var createFavicon = function () {
+        console.log("creating favicon");
+        var fav = document.createElement('link');
+        var attrs = {
+            id: 'favicon',
+            type: 'image/png',
+            rel: 'icon',
+            'data-main-favicon': DEFAULT_MAIN,
+            'data-alt-favicon': DEFAULT_ALT,
+            href: DEFAULT_MAIN,
+        };
+        Object.keys(attrs).forEach(function (k) {
+            fav.setAttribute(k, attrs[k]);
+        });
+        document.head.appendChild(fav);
+    };
+
+    if (!document.getElementById('favicon')) { createFavicon(); }
+
     Module.tab = function (frequency, count) {
         var key = '_pendingTabNotification';
 
         var favicon = document.getElementById('favicon');
+
+        var main = DEFAULT_MAIN;
+        var alt = DEFAULT_ALT;
+
         if (favicon) {
-            var main = favicon.getAttribute('data-main-favicon');
+            main = favicon.getAttribute('data-main-favicon') || DEFAULT_MAIN;
-            var alt = favicon.getAttribute('data-alt-favicon');
+            alt = favicon.getAttribute('data-alt-favicon') || DEFAULT_ALT;
             favicon.setAttribute('href', main);
         }
 

www/common/toolbar2.js

@@ -48,7 +48,8 @@ define([
         return 'cryptpad-uid-' + String(Math.random()).substring(2);
     };
 
-    var styleToolbar = function ($container, href, version) {
+    var styleToolbar = function ($container, href, version, force) {
+        if (!force) { return; }
         href = href || '/customize/toolbar.css' + (version?('?' + version): '');
 
         $.ajax({
@@ -108,9 +109,9 @@ define([
         $container.prepend($toolbar);
 
         if (ApiConfig && ApiConfig.requireConf && ApiConfig.requireConf.urlArgs) {
-            styleToolbar($container, undefined, ApiConfig.requireConf.urlArgs);
+            styleToolbar($container, undefined, ApiConfig.requireConf.urlArgs, config.legacyStyle);
         } else {
-            styleToolbar($container);
+            styleToolbar($container, void 0, void 0, config.legacyStyle);
         }
         $container.on('drop dragover', function (e) {
             e.preventDefault();
@@ -666,16 +667,7 @@ define([
                 });
             }
         };
-
+        Cryptpad.isOverPinLimit(todo);
-        Cryptpad.isOverPinLimit(function (e, isOver, data) {
-            var limit = data.limit;
-            var usage = data.usage;
-            if (typeof(limit) !== 'number' || typeof(usage) !== 'number') {
-                todo("invalid types");
-            } else if (Cryptpad.isLoggedIn() && usage >= limit) {
-                todo(void 0, true);
-            } else { todo(void 0, false); }
-        });
 
         return $limit;
     };
@@ -736,6 +728,7 @@ define([
                 Cryptpad.prompt(Messages.changeNamePrompt, lastName || '', function (newName) {
                     if (newName === null && typeof(lastName) === "string") { return; }
                     if (newName === null) { newName = ''; }
+                    else { Cryptpad.feedback('NAME_CHANGED'); }
                     Cryptpad.changeDisplayName(newName, true);
                 });
             });

www/drive/file.less

@@ -1,4 +1,4 @@
-@import "../../customize.dist/src/less/variables.less";
+@import "/customize/src/less/variables.less";
 
 @tree-bg: #fff;
 @tree-fg: #000;

www/drive/index.html

@@ -4,14 +4,7 @@
     <title>CryptDrive</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <link rel="icon" type="image/png"
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-        href="/customize/main-favicon.png"
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/customize/main.css" />
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
         html, body {
             margin: 0px;
@@ -34,14 +27,3 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <div id="loading">
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-</body>
-</html>

www/drive/inner.html

@@ -2,11 +2,8 @@
 <html>
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
-    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <script data-bootload="/drive/inner.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="stylesheet" href="file.css" />
-    <link rel="stylesheet" href="/customize/main.css" />
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>

www/drive/inner.js

@@ -0,0 +1,7 @@
+define([
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'css!/drive/file.css',
+    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less/toolbar.less',
+], function () {});

www/drive/main.js

@@ -9,7 +9,10 @@ define([
     '/common/toolbar2.js',
     '/customize/application_config.js',
     '/common/cryptget.js',
-    '/common/mergeDrive.js'
+    '/common/mergeDrive.js',
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less',
 ], function ($, Listmap, Crypto, TextPatcher, JSONSortify, Cryptpad, FO, Toolbar, AppConfig, Get, Merge) {
     var module = window.MODULE = {};
 

www/file/file.css

@@ -1,110 +0,0 @@
-html,
-body {
-  margin: 0px;
-  height: 100%;
-}
-#toolbar {
-  display: flex;
-}
-body {
-  display: flex;
-  flex-flow: column;
-}
-#app {
-  flex: 1;
-  background: url('/customize/bg3.jpg') no-repeat center center;
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.cryptpad-toolbar {
-  padding: 0px;
-  display: inline-block;
-}
-#file,
-#dl {
-  display: block;
-  height: 100%;
-  width: 100%;
-  border: 2px solid black;
-}
-.inputfile {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-media-tag img {
-  max-width: 100%;
-  max-height: calc(100vh - 96px);
-}
-#upload-form,
-#download-form {
-  padding: 0px;
-  margin: 0px;
-  position: relative;
-  width: 50vh;
-  height: 50vh;
-  display: block;
-  margin: 50px auto;
-  max-width: 80vw;
-}
-#upload-form label,
-#download-form label {
-  line-height: calc(50vh - 20px);
-  text-align: center;
-  position: relative;
-  padding: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 50vh;
-  box-sizing: border-box;
-}
-#download-form label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  white-space: normal;
-  word-wrap: break-word;
-}
-#download-form label span {
-  width: 50vh;
-  max-width: 80vw;
-  text-align: center;
-  line-height: 1.5em;
-}
-.hovering {
-  background-color: rgba(255, 0, 115, 0.5) !important;
-}
-.block {
-  display: block;
-}
-.hidden {
-  display: none;
-}
-.inputfile + label {
-  display: block;
-}
-#progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  transition: width 200ms;
-  width: 0%;
-  max-width: 100%;
-  max-height: 100%;
-  background-color: rgba(255, 0, 115, 0.75);
-  z-index: 10000;
-  display: block;
-}
-body #uploadStatusContainer {
-  background-color: rgba(255, 255, 255, 0.9);
-  color: black;
-  opacity: 0.9;
-}

www/file/file.less

@@ -1,5 +1,5 @@
-@import "../../customize.dist/src/less/variables.less";
+@import "/customize/src/less/variables.less";
-@import "../../customize.dist/src/less/mixins.less";
+@import "/customize/src/less/mixins.less";
 
 @button-border: 2px;
 

www/file/index.html

@@ -4,14 +4,7 @@
     <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="icon" type="image/png"
-        href="/customize/main-favicon.png"
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
             margin: 0px;
@@ -34,14 +27,4 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <div id="loading">
+
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-</body>
-</html>

www/file/inner.html

@@ -2,11 +2,8 @@
 <html>
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
-    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <script data-bootload="/file/inner.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="stylesheet" href="/file/file.css">
-    <link rel="stylesheet" href="/customize/main.css">
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>

www/file/inner.js

@@ -0,0 +1,7 @@
+define([
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/file/file.less',
+    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less/toolbar.less',
+], function () {});

www/file/main.js

@@ -9,6 +9,9 @@ define([
     '/file/file-crypto.js',
     '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/tweetnacl/nacl-fast.min.js',
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less',
 ], function ($, Crypto, realtimeInput, Toolbar, Cryptpad, Visible, Notify, FileCrypto) {
     var Messages = Cryptpad.Messages;
     var saveAs = window.saveAs;

www/pad/index.html

@@ -5,14 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="icon" type="image/png"
-        href="/customize/main-favicon.png"
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
             margin: 0px;
@@ -58,14 +51,4 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <div id="loading">
+
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-</body>
-</html>

www/pad/inner.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <script data-bootload="/pad/inner.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/ckeditor/ckeditor.js"></script>
     <style>
     html, body {
@@ -25,7 +26,7 @@
     }
     #cke_1_top .cryptpad-toolbar {
         padding: 0;
-        display: inline-block;
+        display: block;
     }
     .cke_wysiwyg_frame {
         min-width: 60%;

www/pad/inner.js

@@ -0,0 +1,3 @@
+define([
+    //'less!/customize/src/less/toolbar.less',
+], function () {});

www/pad/main.js

@@ -13,7 +13,10 @@ define([
     '/common/cryptget.js',
     '/pad/links.js',
     '/bower_components/file-saver/FileSaver.min.js',
-    '/bower_components/diff-dom/diffDOM.js'
+    '/bower_components/diff-dom/diffDOM.js',
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less',
 ], function ($, Crypto, realtimeInput, Hyperjson,
     Toolbar, Cursor, JsonOT, TypingTest, JSONSortify, TextPatcher, Cryptpad, Cryptget, Links) {
     var saveAs = window.saveAs;
@@ -468,7 +471,8 @@ define([
                     realtime: info.realtime,
                     network: info.network,
                     $container: $bar,
-                    $contentContainer: $iframe.find('#cke_1_contents')
+                    $contentContainer: $iframe.find('#cke_1_contents'),
+                    legacyStyle: true,
                 };
                 toolbar = info.realtime.toolbar = Toolbar.create(configTb);
 

www/poll/index.html

@@ -1,59 +1,11 @@
 <!DOCTYPE html>
 <html class="cp poll">
 <head>
-    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <title data-localization="poll_title">Zero Knowledge Date Picker</title>
-    <link rel="icon" type="image/png"
+    <script data-main="/common/boot.js" src="/bower_components/requirejs/require.js"
-        href="/customize/main-favicon.png"
+        data-bootload="/customize/template.js"></script>
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/customize/main.css" />
-    <link rel="stylesheet" href="./poll.css" />
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
 </head>
 <body>
 
-<div id="toolbar" class="toolbar-container"></div>
-<div id="content">
-    <div id="poll">
-        <div id="howItWorks">
-            <h1 id="mainTitle">CryptPoll</h1>
-            <h2 data-localization="poll_subtitle"></h2>
-
-            <p data-localization="poll_p_save"></p>
-            <p data-localization="poll_p_encryption"></p>
-        </div>
-
-        <div class="upper">
-            <button id="publish" data-localization-title="poll_publish_button" data-localization="poll_publish_button" style="display: none;">publish poll</button>
-            <button id="admin" data-localization-title="poll_admin_button" data-localization="poll_admin_button" style="display: none;">admin</button>
-            <button id="help" data-localization-title="poll_show_help_button" data-localization="poll_show_help_button">help</button>
-        </div>
-
-        <div class="realtime">
-            <br />
-            <center>
-            <textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
-            </center>
-            <div id="tableContainer">
-                <div id="tableScroll"></div>
-                <button data-localization-title="poll_create_user" id="create-user"><span class="fa fa-plus"></span></button>
-                <button data-localization-title="poll_create_option" id="create-option"><span class="fa fa-plus"></span></button>
-                <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="loading">
-    <div class="loadingContainer">
-        <img class="cryptofist" src="/customize/cryptofist_small.png" />
-        <div class="spinnerContainer">
-            <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-        </div>
-        <p data-localization="loading"></p>
-    </div>
-</div>

www/poll/main.js

@@ -8,7 +8,11 @@ define([
     '/bower_components/hyperjson/hyperjson.js',
     'render.js',
     '/common/toolbar2.js',
-    '/bower_components/file-saver/FileSaver.min.js'
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/toolbar.less',
+    'less!/poll/poll.less',
 ], function ($, TextPatcher, Listmap, Crypto, Cryptpad, Cryptget, Hyperjson, Renderer, Toolbar) {
 
     var Messages = Cryptpad.Messages;

www/poll/poll.less

@@ -1,5 +1,5 @@
-@import "../../customize.dist/src/less/variables.less";
+@import "/customize/src/less/variables.less";
-@import "../../customize.dist/src/less/mixins.less";
+@import "/customize/src/less/mixins.less";
 
 @poll-th-bg: #aaa;
 @poll-th-user-bg: #999;

www/settings/main.css

@@ -1,32 +0,0 @@
-.cp input[type="text"] {
-  padding-left: 10px;
-}
-.cp #mainBlock {
-  z-index: 1;
-  width: 1000px;
-  max-width: 90%;
-  margin: auto;
-}
-.cp #mainBlock #container .infoBlock {
-  padding: 15px;
-  border: 1px solid #555;
-  background: #cccccc;
-}
-.cp #mainBlock #container .infoBlock .label {
-  font-weight: bold;
-  text-decoration: underline;
-  margin-right: 5px;
-}
-.cp #mainBlock #container .displayName input,
-.cp #mainBlock #container .displayName button {
-  vertical-align: middle;
-}
-.cp #mainBlock #container .backupDrive button {
-  margin-right: 5px;
-}
-.cp #mainBlock #container .backupDrive button span.fa {
-  margin-right: 5px;
-}
-.cp #mainBlock #container > div {
-  margin: 10px 0;
-}

www/settings/main.js

@@ -6,13 +6,15 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
     '/customize/header.js',
 
-    'css!/customize/main.css',
+    'less!/customize/src/less/cryptpad.less',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'css!/settings/main.css',
+    'less!/settings/main.less',
 ], function ($, Cryptpad, Crypt, Merge) {
     var saveAs = window.saveAs;
 
+    console.log("wut");
+
     var USERNAME_KEY = 'cryptpad.username';
 
     var APP = window.APP = {

www/settings/main.less

@@ -1,4 +1,4 @@
-@import '../../customize.dist/src/less/variables.less';
+@import '/customize/src/less/variables.less';
 
 @border: 1px solid #555;
 

www/slide/index.html

@@ -5,15 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
-    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="icon" type="image/png"
-        href="/customize/main-favicon.png"
-
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
             overflow-y: hidden;
@@ -49,14 +41,4 @@
     <div id="iframe-container">
         <iframe id="pad-iframe", name="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </div>
-    <div id="loading">
+
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-</body>
-</html>

www/slide/inner.js

@@ -1 +1,5 @@
-define([ 'less!/slide/slide.less' ], function () {});
+define([
+    'less!/slide/slide.less',
+    'less!/customize/src/less/toolbar.less',
+    'less!/customize/src/less/cryptpad.less',
+], function () {});

www/slide/main.js

@@ -10,6 +10,9 @@ define([
     '/common/cryptget.js',
     '/slide/slide.js',
     '/bower_components/tweetnacl/nacl-fast.min.js', // needed for media-tag
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less',
 ], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Cryptget, Slide) {
     var Messages = Cryptpad.Messages;
 

www/whiteboard/index.html

@@ -4,12 +4,6 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <link rel="icon" type="image/png"
-        href="/customize/main-favicon.png"
-        data-main-favicon="/customize/main-favicon.png"
-        data-alt-favicon="/customize/alt-favicon.png"
-        id="favicon" />
-    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <style> .noscroll { overflow-y: hidden; } </style>
 </head>
 <body class='noscroll'>

www/whiteboard/main.js

@@ -15,8 +15,9 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'css!/customize/main.css',
+    'less!/customize/src/less/cryptpad.less',
     'less!/whiteboard/whiteboard.less',
+    'less!/customize/src/less/toolbar.less',
 ], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig) {
     var saveAs = window.saveAs;
     var Messages = Cryptpad.Messages;

www/whiteboard/whiteboard.css

@@ -1,84 +0,0 @@
-.hidden {
-  display: none;
-}
-html,
-body {
-  padding: 0px;
-  margin: 0px;
-  box-sizing: border-box;
-}
-body {
-  display: flex;
-  flex-flow: column;
-  height: 100%;
-  background: url('/customize/bg3.jpg') no-repeat center center;
-  background-size: cover;
-  background-position: center;
-}
-#canvas-area {
-  flex: 1;
-  display: flex;
-}
-.canvas-container {
-  border: 1px solid black;
-  margin: auto;
-  background: white;
-}
-#controls {
-  display: block;
-  position: relative;
-  border-top: 1px solid black;
-  background: white;
-  height: 100px;
-  line-height: 100px;
-  padding-bottom: 5px;
-}
-#controls #width,
-#controls #opacity {
-  position: relative;
-  vertical-align: middle;
-}
-#controls #clear,
-#controls #delete,
-#controls #toggleDraw {
-  display: inline;
-  vertical-align: middle;
-}
-#controls .selected {
-  margin-left: 20px;
-  display: inline-block;
-  height: 135px;
-  width: 135px;
-  z-index: 9001;
-  text-align: center;
-}
-#controls .selected img {
-  vertical-align: middle;
-}
-/* Colors */
-#colors {
-  position: relative;
-  vertical-align: middle;
-  z-index: 100;
-  background: white;
-  display: flex;
-  justify-content: space-between;
-}
-#colors span.palette-color {
-  height: 4vw;
-  width: 4vw;
-  display: inline-block;
-  margin: 5px;
-  border: 1px solid black;
-  vertical-align: top;
-}
-#color-picker {
-  display: block;
-}
-#pickers {
-  visibility: hidden;
-  position: absolute;
-  width: 0;
-  height: 0;
-  z-index: -5;
-}