Merge branch 'master' of https://github.com/xwiki-labs/cryptpad

.dockerignore

@@ -1,5 +1,7 @@
 data
 Dockerfile
 docker-compose.yml
+.dockerignore
 .git
-.gitignore
+.gitignore
+node_modules

.flowconfig

@@ -1,5 +1,6 @@
 [ignore]
-
+.*/bower_components/.*
+.*/node_modules/lesshint/*
 [include]
 
 [libs]

.gitignore

@@ -1,4 +1,5 @@
 datastore
+tasks
 www/bower_components/*
 node_modules
 /config.js

.jshintignore

@@ -11,6 +11,9 @@ www/common/hyperscript.js
 www/common/tippy.min.js
 
 www/pad/wysiwygarea-plugin.js
-www/pad2/wysiwygarea-plugin.js
+www/pad/mediatag-plugin.js
+www/pad/mediatag-plugin-dialog.js
 
 www/common/media-tag-nacl.min.js
+
+customize/

.jshintrc

@@ -7,7 +7,6 @@
     "iterator": true,
     "latedef": true,
     "nocomma": true,
-    "notypeof": true,
     "shadow": false,
     "undef": true,
     "unused": true,
@@ -19,5 +18,8 @@
         "require",
         "module",
         "__dirname"
-    ]
+    ],
+    "globals": {
+        "self": true
+    }
 }

.lesshintrc

@@ -0,0 +1,60 @@
+{
+    "fileExtensions": [".less"],
+
+    // These rules are almost certainly crap and will not catch bugs (Caleb)
+    "newlineAfterBlock": { "enabled": false }, // not just a newline but an entire empty line after each block
+    "spaceAroundOperator": { "enabled": false }, // disallow calc(10px+10px);
+    "hexLength": { "enabled": false }, // require long hex color codes or require short where possible
+    "hexNotation": { "enabled": false }, // require hex lowercase
+    "propertyOrdering": { "enabled": false }, // require attributes to be in alphabetical order D:
+    "stringQuotes": { "enabled": false }, // force quoting of strings with ' or " (silly)
+    "importPath": { "enabled": false }, // require imports to not have .less, ridiculous
+    "qualifyingElement": { "enabled": false }, // disallow div.xxx and require .xxx
+    "decimalZero": { "enabled": false }, // disallow .5em
+    "borderZero": { "enabled": false }, // disallow border: none;
+    "selectorNaming": { "enabled": false }, // this would be crap because classes are what they are.
+    "zeroUnit": { "enabled": false },
+    "singleLinePerProperty": { "enabled": false },
+    "_singleLinePerProperty": {
+        "enabled": true,
+        "allowSingleLineRules": true
+    },
+    "spaceAroundComma": { "enabled": false },
+    "importantRule": { "enabled": false },
+    "universalSelector": { "enabled": false },
+    "idSelector": { "enabled": false },
+    "singleLinePerSelector": { "enabled": false },
+    "spaceBetweenParens": { "enabled": false },
+    "maxCharPerLine": { "enabled": false }, // using lesshint flags can cause long lines
+    "comment": { "enabled": false }, // ban multi-line comments ?
+
+    // These rules should be discussed, if they're crap then they should be moved up.
+    "colorVariables": { "enabled": false }, // require all colors to be stored as variables first...
+    "variableValue": { "enabled": false }, // any attribute types which should always be variables ?  color?
+    "spaceBeforeBrace": { "enabled": true },//{ "enabled": true, "style": "one_space" },
+
+    // Turn everything else on
+    "spaceAfterPropertyColon": { "enabled": true },
+    "finalNewline": { "enabled": true }, // require an empty line at the end of the file (enabled for now)
+    "attributeQuotes": { "enabled": true },
+    "depthLevel": {
+        "depth": 1 // TODO(cjd) This is obviously not triggering, even with 1
+    },
+    "duplicateProperty": { "enabled": true },
+    "emptyRule": { "enabled": true },
+    "hexValidation": { "enabled": true }, // disallow actual garbage color hex codes (e.g. #ab)
+    "propertyUnits": {
+        "valid": ["rem", "vw", "em", "px"], // These units are allowed for all properties
+        "invalid": ["pt"],      // The 'pt' unit is not allowed under any circumstances
+        "properties": {
+            //"line-height": []   // No units are allowed for line-height
+        }
+    },
+    "spaceAfterPropertyName": { "enabled": true, "style": "no_space" },
+    "spaceAfterPropertyValue": { "enabled": true, "style": "no_space" },
+    "spaceAroundBang": { "enabled": true, "style": "before" },
+    "trailingSemicolon": { "enabled": true },
+    "trailingWhitespace": { "enabled": true },
+    "urlFormat": { "enabled": true, "style": "relative" },
+    "urlQuotes": { "enabled": true }
+}

.travis.yml

@@ -1,12 +1,4 @@
 language: node_js
-env:
-  matrix:
-    - "BROWSER='firefox::Windows 10'"
-    - "BROWSER='chrome::Windows 10'"
-    #- "BROWSER='MicrosoftEdge:14.14393:Windows 10'"
-    #- "BROWSER='internet explorer:11.103:Windows 10'"
-    #- "BROWSER='safari:10.0:macOS 10.12'"
-    #- "BROWSER='safari:9.0:OS X 10.11'"
 branches:
   only:
     - master
@@ -14,15 +6,7 @@ branches:
     - staging
 node_js:
   - "6.6.0"
-before_script:
+script:
   - npm run-script lint
-  - cp config.example.js config.js
-  - npm install bower
-  - ./node_modules/bower/bin/bower install
-  - node ./server.js &
-  - sleep 2
-addons:
-  sauce_connect:
-    username: "cjdelisle"
-    access_key:
-      secure: "pgGh8YGXLPq6fpdwwK2jnjRtwXPbVWQ/HIFvwX7E6HBpzxxcF2edE8sCdonWW9TP2LQisZFmVLqoSnZWMnjBr2CBAMKMFvaHQDJDQCo4v3BXkID7KgqyKmNcwW+FPfSJ5MxNBro8/GE/awkhZzJLYGUTS5zi/gVuIUwdi6cHI8s="
+  - npm run-script flow
+  - docker build -t xwiki/cryptpad .

Dockerfile

@@ -4,7 +4,7 @@ COPY . /cryptpad
 WORKDIR /cryptpad
 
 RUN apk add --no-cache git tini \
-   && npm install \
+   && npm install --production \
    && npm install -g bower \
    && bower install --allow-root
 

TestSelenium.js

@@ -20,20 +20,44 @@ if (process.env.SAUCE_USERNAME !== undefined) {
         "accessKey": process.env.SAUCE_ACCESS_KEY,
     }).forBrowser(browserArray[0], browserArray[1], browserArray[2]).build();
 } else {
-    driver = new WebDriver.Builder().withCapabilities({ browserName: "chrome" }).build();
+    driver = new WebDriver.Builder().withCapabilities({
+        browserName: process.env.BROWSER || "chrome"
+    }).build();
 }
 
 var SC_GET_DATA = "return (window.__CRYPTPAD_TEST__) ? window.__CRYPTPAD_TEST__.getData() : '[]'";
 
 var failed = false;
-var nt = nThen;
+var nt = nThen(function (waitFor) {
+    driver.get('http://localhost:3000/auth/').then(waitFor());
+}).nThen(function (waitFor) {
+    console.log('initialized');
+    driver.manage().addCookie({name: 'test', value: 'auto'}).then(waitFor());
+}).nThen;
+
 [
-    //'/register/#?test=test',
-    '/assert/#?test=test',
-  //  '/auth/#?test=test' // TODO(cjd): Not working on automatic tests, understand why.
-].forEach(function (path) {
+    // login test must happen after register test
+    ['/register/', {}],
+    ['/login/', {}],
+
+    ['/assert/', {}],
+    ['/auth/', {}],
+
+    ['/pad/#/1/edit/1KXFMz5L+nLgvHqXVJjyiQ/IUAE6IzVVg5UIYFOPglmVxvV/', {}],
+    ['/pad/#/1/view/1KXFMz5L+nLgvHqXVJjyiQ/O4kuSnJyviGVlz3qpcr4Fxc8fIK6uTeB30MfMkh86O8/', {}],
+
+    ['/code/#/1/edit/CWtkq8Qa2re7W1XvXZRDYg/2G7Gse5UZ8dLyGAXUdCV2fLL/', {}],
+    ['/code/#/1/view/CWtkq8Qa2re7W1XvXZRDYg/G1pVa1EL26JRAjk28b43W7Ftc3AkdBblef1U58F3iDk/', {}],
+
+    ['/slide/#/1/edit/uwKqgj8Ezh2dRaFUWSlrRQ/JkJtAb-hNzfESZEHreAeULU1/', {}],
+    ['/slide/#/1/view/uwKqgj8Ezh2dRaFUWSlrRQ/Xa8jXl+jWMpwep41mlrhkqbRuVKGxlueH80Pbgeu5Go/', {}],
+
+    ['/poll/#/1/edit/lHhnKHSs0HBsl2UGfSJoLw/ZXSsAq4BORIixuFaLVBFcxoq/', {}],
+    ['/poll/#/1/view/lHhnKHSs0HBsl2UGfSJoLw/TGul8PhswwLh1klHpBto6yEntWtKES2+tetYrrYec4M/', {}]
+
+].forEach(function (x) {
     if (failed) { return; }
-    var url = 'http://localhost:3000' + path;
+    var url = 'http://localhost:3000' + x[0];
     nt = nt(function (waitFor) {
         var done = waitFor();
         console.log('\n\n-----TEST ' + url + ' -----');
@@ -70,6 +94,10 @@ var nt = nThen;
                 if (done) { setTimeout(logMore, 50); }
             }));
         };
+        driver.manage().addCookie({
+            name: 'test',
+            value: encodeURIComponent(JSON.stringify({ test:'auto', opts: x[1] }))
+        });
         driver.get(url).then(waitFor(logMore));
     }).nThen;
 });

bower.json

@@ -21,7 +21,7 @@
     "jquery": "~2.1.3",
     "tweetnacl": "0.12.2",
     "components-font-awesome": "^4.6.3",
-    "ckeditor": "~4.7",
+    "ckeditor": "4.7.3",
     "codemirror": "^5.19.0",
     "requirejs": "2.3.5",
     "marked": "0.3.5",
@@ -29,18 +29,27 @@
     "json.sortify": "~2.1.0",
     "secure-fabric.js": "secure-v1.7.9",
     "hyperjson": "~1.4.0",
-    "textpatcher": "^1.3.0",
-    "chainpad-json-validator": "^0.2.0",
     "chainpad-crypto": "^0.1.3",
-    "chainpad-listmap": "^0.3.0",
+    "chainpad-listmap": "^0.4.2",
+    "chainpad": "^5.0.0",
+    "chainpad-netflux": "^0.6.1",
     "file-saver": "1.3.1",
     "alertifyjs": "1.0.11",
     "scrypt-async": "1.2.0",
     "require-css": "0.1.10",
     "less": "^2.7.2",
-    "bootstrap": "#v4.0.0-alpha.6",
+    "bootstrap": "^v4.0.0",
     "diff-dom": "2.1.1",
     "nthen": "^0.1.5",
-    "open-sans-fontface": "^1.4.2"
+    "open-sans-fontface": "^1.4.2",
+    "bootstrap-tokenfield": "^0.12.1",
+    "localforage": "^1.5.2",
+    "html2canvas": "^0.4.1",
+    "croppie": "^2.5.0",
+    "sortablejs": "#^1.6.0",
+    "saferphore": "^0.0.1"
+  },
+  "resolutions": {
+    "bootstrap": "^v4.0.0"
   }
 }

check-account-deletion.js

@@ -0,0 +1,76 @@
+/* jshint esversion: 6, node: true */
+const Fs = require('fs');
+const nThen = require('nthen');
+const Pinned = require('./pinned');
+const Nacl = require('tweetnacl');
+
+const hashesFromPinFile = (pinFile, fileName) => {
+    var pins = {};
+    pinFile.split('\n').filter((x)=>(x)).map((l) => JSON.parse(l)).forEach((l) => {
+        switch (l[0]) {
+            case 'RESET': {
+                pins = {};
+                if (l[1] && l[1].length) { l[1].forEach((x) => { pins[x] = 1; }); }
+                //jshint -W086
+                // fallthrough
+            }
+            case 'PIN': {
+                l[1].forEach((x) => { pins[x] = 1; });
+                break;
+            }
+            case 'UNPIN': {
+                l[1].forEach((x) => { delete pins[x]; });
+                break;
+            }
+            default: throw new Error(JSON.stringify(l) + '  ' + fileName);
+        }
+    });
+    return Object.keys(pins);
+};
+
+var escapeKeyCharacters = function (key) {
+    return key && key.replace && key.replace(/\//g, '-');
+};
+
+
+const dataIdx = process.argv.indexOf('--data');
+let edPublic;
+if (dataIdx === -1) {
+    const hasEdPublic = process.argv.indexOf('--ed');
+    if (hasEdPublic === -1) { return void console.error("Missing ed argument"); }
+    edPublic = escapeKeyCharacters(process.argv[hasEdPublic+1]);
+} else {
+    const deleteData = JSON.parse(process.argv[dataIdx+1]);
+    if (!deleteData.toSign || !deleteData.proof) { return void console.error("Invalid arguments"); }
+    // Check sig
+    const ed = Nacl.util.decodeBase64(deleteData.toSign.edPublic);
+    const signed = Nacl.util.decodeUTF8(JSON.stringify(deleteData.toSign));
+    const proof = Nacl.util.decodeBase64(deleteData.proof);
+    if (!Nacl.sign.detached.verify(signed, proof, ed)) { return void console.error("Invalid signature"); }
+    edPublic = escapeKeyCharacters(deleteData.toSign.edPublic);
+}
+
+let data = [];
+let pinned = [];
+
+nThen((waitFor) => {
+    let f = './pins/' + edPublic.slice(0, 2) + '/' + edPublic + '.ndjson';
+    Fs.readFile(f, waitFor((err, content) => {
+        if (err) { throw err; }
+        pinned = hashesFromPinFile(content.toString('utf8'), f);
+    }));
+}).nThen((waitFor) => {
+    Pinned.load(waitFor((d) => {
+        data = Object.keys(d);
+    }), {
+        exclude: [edPublic + '.ndjson']
+    });
+}).nThen(() => {
+    console.log('Pads pinned by this user and not pinned by anybody else:');
+    pinned.forEach((p) => {
+        if (data.indexOf(p) === -1) {
+            console.log(p);
+        }
+    });
+});
+

check-accounts.js

@@ -0,0 +1,40 @@
+/* globals Buffer */
+var Https = require('https');
+var Config = require("./config.js");
+var Package = require("./package.json");
+
+var body = JSON.stringify({
+    domain: Config.myDomain,
+    adminEmail: Config.adminEmail,
+    version: Package.version,
+});
+
+var options = {
+    host: 'accounts.cryptpad.fr',
+    path: '/api/getauthorized',
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(body)
+    }
+};
+
+Https.request(options, function (response) {
+    if (!('' + response.statusCode).match(/^2\d\d$/)) {
+        throw new Error('SERVER ERROR ' + response.statusCode);
+    }
+    var str = '';
+    response.on('data', function (chunk) {
+        str += chunk;
+    });
+    response.on('end', function () {
+        try {
+            var json = JSON.parse(str);
+            console.log(json);
+        } catch (e) {
+            throw new Error(e);
+        }
+    });
+}).on('error', function (e) {
+    console.error(e);
+}).end(body);

config.example.js

@@ -3,6 +3,15 @@
     globals module
 */
 var domain = ' http://localhost:3000/';
+
+// You can `kill -USR2` the node process and it will write out a heap dump.
+// If your system doesn't support dumping, comment this out and install with
+// `npm install --production`
+// See: https://strongloop.github.io/strongloop.com/strongblog/how-to-heap-snapshots/
+
+// to enable this feature, uncomment the line below:
+// require('heapdump');
+
 module.exports = {
 
     // the address you want to bind to, :: means all ipv4 and ipv6 addresses
@@ -84,6 +93,8 @@ module.exports = {
     // cross-domain iframe. It can simply host the same content as CryptPad.
     // httpSafeOrigin: "https://some-other-domain.xyz",
 
+    httpUnsafeOrigin: domain,
+
     /*  your server's websocket url is configurable
      *  (default: '/cryptpad_websocket')
      *
@@ -114,7 +125,9 @@ module.exports = {
         'terms',
         'about',
         'contact',
-        'what-is-cryptpad'
+        'what-is-cryptpad',
+        'features',
+        'faq'
     ],
 
     /*  Limits, Donations, Subscriptions and Contact
@@ -159,6 +172,41 @@ module.exports = {
      */
     defaultStorageLimit: 50 * 1024 * 1024,
 
+    /*
+     *  CryptPad allows administrators to give custom limits to their friends.
+     *  add an entry for each friend, identified by their user id,
+     *  which can be found on the settings page. Include a 'limit' (number of bytes),
+     *  a 'plan' (string), and a 'note' (string).
+     *
+     *  hint: 1GB is 1024 * 1024 * 1024 bytes
+     */
+    customLimits: {
+        /*
+        "https://my.awesome.website/user/#/1/cryptpad-user1/YZgXQxKR0Rcb6r6CmxHPdAGLVludrAF2lEnkbx1vVOo=": {
+            limit: 20 * 1024 * 1024 * 1024,
+            plan: 'insider',
+            note: 'storage space donated by my.awesome.website'
+        },
+        "https://my.awesome.website/user/#/1/cryptpad-user2/GdflkgdlkjeworijfkldfsdflkjeEAsdlEnkbx1vVOo=": {
+            limit: 10 * 1024 * 1024 * 1024,
+            plan: 'insider',
+            note: 'storage space donated by my.awesome.website'
+        }
+        */
+    },
+
+    /*  some features may require that the server be able to schedule tasks
+        far into the future, such as:
+            > "three months from now, this channel should expire"
+        To disable these features, set 'enableTaskScheduling' to false
+    */
+    enableTaskScheduling: true,
+
+    /*  if you would like the list of scheduled tasks to be stored in
+        a custom location, change the path below:
+    */
+    taskPath: './tasks',
+
     /*
      *  By default, CryptPad also contacts our accounts server once a day to check for changes in
      *  the people who have accounts. This check-in will also send the version of your CryptPad
@@ -201,6 +249,14 @@ module.exports = {
      */
     pinPath: './pins',
 
+    /*  Pads that are not 'pinned' by any registered user can be set to expire
+     *  after a configurable number of days of inactivity (default 90 days).
+     *  The value can be changed or set to false to remove expiration.
+     *  Expired pads can then be removed using a cron job calling the
+     *  `delete-inactive.js` script with node
+     */
+    inactiveTime: 90, // days
+
     /*  CryptPad allows logged in users to upload encrypted files. Files/blobs
      *  are stored in a 'blob-store'. Set its location here.
      */
@@ -278,4 +334,12 @@ module.exports = {
     //  '/etc/apache2/ssl/my_public_cert.crt',
     //  '/etc/apache2/ssl/my_certificate_authorities_cert_chain.ca'
     //],
+
+    /* You can get a repl for debugging the server if you want it.
+     * to enable this, specify the debugReplName and then you can
+     * connect to it with `nc -U /tmp/repl/<your name>.sock`
+     * If you run multiple cryptpad servers, you need to use different
+     * repl names.
+     */
+    //debugReplName: "cryptpad"
 };

customize.dist/404.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="cp" id="four-oh-four">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<head>
+    <title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
+    <script async data-bootload="/customize/four-oh-four.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body class="html">
+<noscript>
+<h1>404</h1>
+<h3>We couldn't find the page you were looking for</h3>
+
+</noscript>

customize.dist/application_config.js

@@ -1,55 +1,10 @@
-define(function() {
-    var config = {};
-
-    /* Select the buttons displayed on the main page to create new collaborative sessions
-     * Existing types : pad, code, poll, slide
-     */
-    config.availablePadTypes = ['drive', 'pad', 'code', 'slide', 'poll', 'whiteboard', 'file', 'todo', 'contacts'];
-    config.registeredOnlyTypes = ['file', 'contacts'];
-
-    /*  Cryptpad apps use a common API to display notifications to users
-     *  by default, notifications are hidden after 5 seconds
-     *  You can change their duration here (measured in milliseconds)
-     */
-    config.notificationTimeout = 5000;
-
-    config.enablePinning = true;
-
-    config.whiteboardPalette = [
-        '#000000', // black
-        '#FFFFFF', // white
-        '#848484', // grey
-        '#8B4513', // saddlebrown
-        '#FF0000', // red
-        '#FF8080', // peach?
-        '#FF8000', // orange
-        '#FFFF00', // yellow
-        '#80FF80', // light green
-        '#00FF00', // green
-        '#00FFFF', // cyan
-        '#008B8B', // dark cyan
-        '#0000FF', // blue
-        '#FF00FF', // fuschia
-        '#FF00C0', // hot pink
-        '#800080', // purple
-    ];
-
-    config.enableTemplates = true;
-
-    config.enableHistory = true;
-
-    /*  user passwords are hashed with scrypt, and salted with their username.
-        this value will be appended to the username, causing the resulting hash
-        to differ from other CryptPad instances if customized. This makes it
-        such that anyone who wants to bruteforce common credentials must do so
-        again on each CryptPad instance that they wish to attack.
-
-        WARNING: this should only be set when your CryptPad instance is first
-        created. Changing it at a later time will break logins for all existing
-        users.
-    */
-    config.loginSalt = '';
-    config.badStateTimeout = 30000;
-
-    return config;
+/*
+ * You can override the configurable values from this file.
+ * The recommended method is to make a copy of this file (/customize.dist/application_config.js)
+   in a 'customize' directory (/customize/application_config.js).
+ * If you want to check all the configurable values, you can open the internal configuration file
+   but you should not change it directly (/common/application_config_internal.js)
+*/
+define(['/common/application_config_internal.js'], function (AppConfig) {
+    return AppConfig;
 });

customize.dist/ckeditor-config.js

@@ -5,12 +5,12 @@ CKEDITOR.editorConfig = function( config ) {
     config.needsBrFiller= fixThings;
     config.needsNbspFiller= fixThings;
 
-    config.removeButtons= 'Source,Maximize';
+    config.removeButtons= 'Source,Maximize,Anchor';
     // magicline plugin inserts html crap into the document which is not part of the
     // document itself and causes problems when it's sent across the wire and reflected back
     config.removePlugins= 'resize,elementspath';
     config.resize_enabled= false; //bottom-bar
-    config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
+    config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify,mediatag,print';
     config.toolbarGroups= [
         // {"name":"clipboard","groups":["clipboard","undo"]},
         //{"name":"editing","groups":["find","selection"]},
@@ -23,7 +23,8 @@ CKEDITOR.editorConfig = function( config ) {
         {"name":"basicstyles","groups":["basicstyles","cleanup"]},
         {"name":"paragraph","groups":["list","indent","blocks","align","bidi"]},
         {"name":"styles"},
-        {"name":"colors"}];
+        {"name":"colors"},
+        {"name":"print"}];
 
     config.font_defaultLabel = 'Arial';
     config.fontSize_defaultLabel = '16';
@@ -67,4 +68,4 @@ CKEDITOR.editorConfig = function( config ) {
     CKEDITOR.document._appendStyleSheet = CKEDITOR.document.appendStyleSheet;
     CKEDITOR.tools.buildStyleHtml = function (x) { return CKEDITOR.tools._buildStyleHtml(fix(x)); };
     CKEDITOR.document.appendStyleSheet = function (x) { return CKEDITOR.document._appendStyleSheet(fix(x)); };
-}());
+}());

customize.dist/credential.js

@@ -5,6 +5,13 @@ define([
     var Cred = {};
     var Scrypt = window.scrypt;
 
+    Cred.MINIMUM_PASSWORD_LENGTH = typeof(AppConfig.minimumPasswordLength) === 'number'?
+        AppConfig.minimumPasswordLength: 8;
+
+    Cred.isLongEnoughPassword = function (passwd) {
+        return passwd.length >= Cred.MINIMUM_PASSWORD_LENGTH;
+    };
+
     var isString = Cred.isString = function (x) {
         return typeof(x) === 'string';
     };

customize.dist/delta-words.js

@@ -0,0 +1,61 @@
+define([
+    '/bower_components/chainpad/chainpad.dist.js',
+], function (ChainPad) {
+    var Diff = ChainPad.Diff;
+
+    var isSpace = function (S, i) {
+        return /^\s$/.test(S.charAt(i));
+    };
+
+    var leadingBoundary = function (S, offset) {
+        if (/\s/.test(S.charAt(offset))) { return offset; }
+        while (offset > 0) {
+            offset--;
+            if (isSpace(S, offset)) { offset++; break; }
+        }
+        return offset;
+    };
+
+    var trailingBoundary = function (S, offset) {
+        if (isSpace(S, offset)) { return offset; }
+        while (offset < S.length && !/\s/.test(S.charAt(offset))) {
+            offset++;
+        }
+        return offset;
+    };
+
+    var opsToWords = function (previous, current) {
+        var output = [];
+        Diff.diff(previous, current).forEach(function (op) {
+            // ignore deleted sections...
+            var offset = op.offset;
+            var toInsert = op.toInsert;
+
+            // given an operation,  check whether it is a word fragment,
+            // if it is, expand it to its word boundaries
+            var first = current.slice(leadingBoundary(current, offset), offset);
+            var last = current.slice(offset + toInsert.length, trailingBoundary(current, offset + toInsert.length));
+
+            var result = first + toInsert + last;
+            // concat-in-place
+            Array.prototype.push.apply(output, result.split(/\s+/));
+        });
+        return output.filter(Boolean);
+    };
+
+    var runningDiff = function (getter, f, time) {
+        var last = getter();
+        // first time through, send all the words :D
+        f(opsToWords("", last));
+        return setInterval(function () {
+            var current = getter();
+
+            // find inserted words...
+            var words = opsToWords(last, current);
+            last = current;
+            f(words);
+        }, time);
+    };
+
+    return runningDiff;
+});

customize.dist/faq.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<head>
+    <title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body class="html">
+    <noscript>
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
+    </noscript>
+</html>
+

customize.dist/features.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<head>
+    <title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body class="html">
+    <noscript>
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
+    </noscript>
+</html>

customize.dist/four-oh-four.js

@@ -0,0 +1,87 @@
+define([
+    'jquery',
+    '/api/config',
+    '/common/hyperscript.js',
+    '/common/outer/local-store.js',
+    '/customize/messages.js',
+
+    'less!/customize/src/less2/pages/page-404.less',
+], function ($, Config, h, LocalStore, Messages) {
+    var urlArgs = Config.requireConf.urlArgs;
+    var img = h('img#cp-logo', {
+        src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
+    });
+
+    var brand = h('h1#cp-brand', 'CryptPad');
+    var message = h('h2#cp-scramble', Messages.four04_pageNotFound);
+    var title = h('h2#cp-title', "404");
+
+    var loggedIn = LocalStore.isLoggedIn();
+    var link = h('a#cp-link', {
+        href: loggedIn? '/drive/': '/',
+    }, loggedIn? Messages.header_logoTitle: Messages.header_homeTitle);
+
+    if (Config.httpUnsafeOrigin && Config.httpUnsafeOrigin !== window.location.origin
+        && window.parent) {
+        $(link).click(function (e) {
+            e.preventDefault();
+            window.parent.location = Config.httpUnsafeOrigin + $(link).attr('href').slice(1);
+        });
+    }
+
+    var content = h('div#cp-main', [
+        img,
+        brand,
+        title,
+        message,
+        link,
+    ]);
+    document.body.appendChild(content);
+
+    var die = function (n) { return Math.floor(Math.random() * n); };
+    var randomChar = function () {
+        return String.fromCharCode(die(94) + 34);
+    };
+    var mutate = function (S, i, c) {
+        var A = S.split("");
+        A[i] = c;
+        return A.join("");
+    };
+
+    var take = function (A) {
+        var n = die(A.length);
+        var choice = A[n];
+        A.splice(n, 1);
+        return choice;
+    };
+
+    var makeDecryptor = function (el, t, difficulty, cb) {
+        var Orig = el.innerText;
+        var options = [];
+        el.innerText = el.innerText.split("").map(function (c, i) {
+            Orig[i] = c;
+            options.push(i);
+            return randomChar();
+        }).join("");
+
+        return function f () {
+            if (die(difficulty) === 0) {
+                var choice = take(options);
+                el.innerText = mutate(el.innerText, choice, Orig.charAt(choice));
+            } else { // make a superficial change
+                el.innerText = mutate(el.innerText,
+                    options[die(options.length)],
+                    randomChar());
+            }
+            setTimeout(options.length > 0? f: cb, t);
+        };
+    };
+
+    makeDecryptor(brand, 70, 2, function () { })();
+    makeDecryptor(title, 50, 14, function () { })();
+    makeDecryptor(link, 20, 4, function () {})();
+    makeDecryptor(message, 12, 3, function () {
+        console.log('done');
+    })();
+});
+

customize.dist/header.js

@@ -1,54 +0,0 @@
-define([
-    'jquery',
-    '/customize/application_config.js',
-    '/common/cryptpad-common.js',
-    '/api/config',
-], function ($, Config, Cryptpad, ApiConfig) {
-
-    window.APP = {
-        Cryptpad: Cryptpad,
-    };
-
-    var Messages = Cryptpad.Messages;
-
-    $(function () {
-        // Language selector
-        var $sel = $('#language-selector');
-        Cryptpad.createLanguageSelector(undefined, $sel);
-        $sel.find('button').addClass('btn').addClass('btn-secondary');
-        $sel.show();
-
-        var $upgrade = $('#upgrade');
-
-        var showUpgrade = function (text, feedback, url) {
-            if (ApiConfig.removeDonateButton) { return; }
-            if (localStorage.plan) { return; }
-            if (!text) { return; }
-            $upgrade.text(text).show();
-            $upgrade.click(function () {
-                Cryptpad.feedback(feedback);
-                window.open(url,'_blank');
-            });
-        };
-
-        // User admin menu
-        var $userMenu = $('#user-menu');
-        var userMenuCfg = {
-            $initBlock: $userMenu,
-            'static': true
-        };
-        var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg);
-        $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
-
-        $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
-        });
-
-        if (Cryptpad.isLoggedIn() && ApiConfig.allowSubscriptions) {
-            showUpgrade(Messages.upgradeAccount, "HOME_UPGRADE_ACCOUNT", Cryptpad.upgradeURL);
-        } else {
-            showUpgrade(Messages.supportCryptpad, "HOME_SUPPORT_CRYPTPAD", Cryptpad.donateURL);
-        }
-    });
-});
-

customize.dist/images/email.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+</style>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.9122" y1="8.1983" x2="23.1969" y2="8.1983">
+		<stop  offset="0" style="stop-color:#4592C4"/>
+		<stop  offset="1" style="stop-color:#545ACD"/>
+	</linearGradient>
+	<path class="st0" d="M1.6,6.1c0.6,0.3,9,4.9,9.3,5c0.3,0.2,0.6,0.2,1.1,0.2c0.5,0,0.8-0.1,1.1-0.2c0.3-0.2,8.7-4.7,9.3-5
+		c0.2-0.1,0.6-0.3,0.7-0.6c0.1-0.4,0-0.6-0.6-0.6H12.1H1.6C1,5,0.8,5.2,1,5.6C1,5.8,1.4,6,1.6,6.1z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="0.6056" y1="12.6427" x2="23.3944" y2="12.6427">
+		<stop  offset="0" style="stop-color:#4592C4"/>
+		<stop  offset="1" style="stop-color:#545ACD"/>
+	</linearGradient>
+	<path class="st1" d="M22.9,6.4c-0.4,0.2-4.5,3.1-7.1,4.8l4.5,5.1c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0-0.3-0.1l-5.4-4.6
+		c-0.8,0.5-1.4,0.9-1.5,0.9c-0.4,0.2-0.7,0.2-1.1,0.2c-0.4,0-0.7,0-1.1-0.2c-0.1-0.1-0.7-0.4-1.5-0.9L4,16.5
+		c-0.1,0.1-0.3,0.1-0.3,0.1c-0.1-0.1,0-0.2,0.1-0.3l4.5-5.1C5.6,9.5,1.6,6.6,1.1,6.4c-0.5-0.2-0.5,0-0.5,0.3c0,0.2,0,11.2,0,11.2
+		c0,0.5,0.8,1.1,1.3,1.1h10.2h10.2c0.5,0,1.2-0.6,1.2-1.1c0,0,0-11,0-11.2C23.4,6.4,23.4,6.1,22.9,6.4z"/>
+</g>
+</svg>

customize.dist/images/github.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#Shape_1_);}
+</style>
+<g id="Octicons">
+	<g id="mark-github">
+		<linearGradient id="Shape_1_" gradientUnits="userSpaceOnUse" x1="1.0181" y1="12" x2="22.9819" y2="12">
+			<stop  offset="0" style="stop-color:#4592C4"/>
+			<stop  offset="1" style="stop-color:#545ACD"/>
+		</linearGradient>
+		<path id="Shape" class="st0" d="M12,1.3c-6.1,0-11,4.9-11,11c0,4.9,3.1,9,7.5,10.4c0.5,0.1,0.8-0.2,0.8-0.5c0-0.3,0-1.1,0-2
+			c-2.8,0.5-3.5-0.7-3.7-1.3c-0.1-0.3-0.7-1.3-1.1-1.6c-0.4-0.2-0.9-0.7,0-0.7c0.9,0,1.5,0.8,1.7,1.1c1,1.7,2.6,1.2,3.2,0.9
+			c0.1-0.7,0.4-1.2,0.7-1.5c-2.4-0.3-5-1.2-5-5.4c0-1.2,0.4-2.2,1.1-3C6,8.5,5.7,7.3,6.3,5.8c0,0,0.9-0.3,3,1.1
+			c0.9-0.2,1.8-0.4,2.7-0.4c0.9,0,1.9,0.1,2.7,0.4c2.1-1.4,3-1.1,3-1.1c0.6,1.5,0.2,2.6,0.1,2.9c0.7,0.8,1.1,1.7,1.1,3
+			c0,4.2-2.6,5.1-5,5.4c0.4,0.3,0.7,1,0.7,2c0,1.5,0,2.6,0,3c0,0.3,0.2,0.6,0.8,0.5c4.3-1.5,7.5-5.6,7.5-10.4
+			C23,6.2,18.1,1.3,12,1.3L12,1.3z"/>
+	</g>
+</g>
+</svg>

customize.dist/images/irc.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+</style>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4.7893" y1="12.0669" x2="6.7712" y2="12.0669">
+		<stop  offset="0" style="stop-color:#4592C4"/>
+		<stop  offset="1" style="stop-color:#545ACD"/>
+	</linearGradient>
+	<polygon class="st0" points="4.8,13 6.4,13 6.8,11.2 5.1,11.2 	"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="0.4529" y1="12" x2="23.5471" y2="12">
+		<stop  offset="0" style="stop-color:#4592C4"/>
+		<stop  offset="1" style="stop-color:#545ACD"/>
+	</linearGradient>
+	<path class="st1" d="M21.6,17.8c0-0.1,0.1-0.1,0.1-0.2c1.2-1.7,1.8-3.8,1.8-6c0-6.2-5.2-11.2-11.5-11.2S0.5,5.4,0.5,11.6
+		c0,6.2,5.2,11.1,11.6,11.1c1.6,0,3.1-0.3,4.5-0.9c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.2-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5,0,0.7,0.1
+		l4.7,1.7l-1.2-4.9C21.4,18.3,21.4,18.1,21.6,17.8z M9.1,11.2H7.5L7.2,13h1.5v0.7H7L6.6,16H5.8l0.5-2.3H4.7L4.2,16H3.5l0.4-2.3H2.5
+		V13h1.5l0.4-1.8H2.9v-0.7h1.6L5,8.1h0.7l-0.4,2.3h1.6l0.5-2.3h0.7l-0.5,2.3h1.4V11.2z M11.2,16h-0.9v-5.9h0.9V16z M11.1,8.9
+		C11,9,10.9,9.1,10.7,9.1c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.2,0.1-0.4,0.2-0.4c0.1-0.1,0.2-0.1,0.4-0.1
+		c0.1,0,0.3,0,0.4,0.1s0.2,0.2,0.2,0.4S11.2,8.9,11.1,8.9z M16.3,10.9c-0.2-0.1-0.5-0.1-0.6-0.1c-0.5,0-0.9,0.2-1.2,0.6
+		c-0.3,0.4-0.5,0.9-0.5,1.4V16h-0.9v-5.9h0.7l0.1,1.1h0c0.2-0.4,0.5-0.7,0.8-0.9c0.3-0.2,0.6-0.3,1-0.3c0.3,0,0.5,0,0.7,0.1
+		L16.3,10.9z M17.9,15.3c-0.5-0.5-0.7-1.3-0.7-2.2c0-1,0.2-1.7,0.7-2.3s1.2-0.8,2-0.8c0.3,0,0.6,0,0.8,0.1c0.3,0.1,0.5,0.1,0.7,0.2
+		l-0.3,0.8c-0.2-0.1-0.4-0.1-0.6-0.2c-0.2-0.1-0.4-0.1-0.6-0.1c-1.2,0-1.8,0.8-1.8,2.3c0,0.7,0.1,1.3,0.4,1.7s0.7,0.6,1.3,0.6
+		c0.5,0,1-0.1,1.5-0.3v0.8c-0.4,0.2-0.9,0.3-1.5,0.3C19.1,16.1,18.4,15.8,17.9,15.3z"/>
+</g>
+</svg>

customize.dist/images/issue.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#Shape_2_);}
+</style>
+<g id="Octicons_1_">
+	<g id="issue-opened">
+		<linearGradient id="Shape_2_" gradientUnits="userSpaceOnUse" x1="1.1619" y1="12" x2="22.8381" y2="12">
+			<stop  offset="0" style="stop-color:#4592C4"/>
+			<stop  offset="1" style="stop-color:#545ACD"/>
+		</linearGradient>
+		<path id="Shape_1_" class="st0" d="M12,3.2c4.9,0,8.8,4,8.8,8.8s-4,8.8-8.8,8.8s-8.8-4-8.8-8.8S7.1,3.2,12,3.2L12,3.2z M12,1.2
+			C6,1.2,1.2,6,1.2,12S6,22.8,12,22.8S22.8,18,22.8,12S18,1.2,12,1.2L12,1.2z M13.5,5.8h-3.1v7.7h3.1V5.8L13.5,5.8z M13.5,15.1h-3.1
+			v3.1h3.1V15.1L13.5,15.1z"/>
+	</g>
+</g>
+</svg>

customize.dist/images/sayhi.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.4529" y1="12" x2="23.5471" y2="12">
+	<stop  offset="0" style="stop-color:#4592C4"/>
+	<stop  offset="1" style="stop-color:#545ACD"/>
+</linearGradient>
+<path class="st0" d="M12,22.7c1.6,0,3.1-0.3,4.5-0.9c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.2-0.1,0.4-0.1,0.6-0.1c0.2,0,0.5,0,0.7,0.1
+	l4.7,1.7l-1.2-4.9c0-0.3,0.1-0.6,0.2-0.8l0,0c0-0.1,0.1-0.1,0.1-0.2c1.2-1.7,1.8-3.8,1.8-6c0-6.2-5.2-11.2-11.5-11.2
+	S0.5,5.4,0.5,11.6C0.5,17.8,5.6,22.7,12,22.7z M17.3,10.2c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8c-1,0-1.8-0.8-1.8-1.8
+	S16.4,10.2,17.3,10.2z M12,10.2c1,0,1.8,0.8,1.8,1.8S13,13.8,12,13.8S10.2,13,10.2,12S11,10.2,12,10.2z M6.7,10.2
+	c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8S4.9,13,4.9,12S5.7,10.2,6.7,10.2z"/>
+</svg>

customize.dist/images/twitter.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.3991" y1="12" x2="23.6009" y2="12">
+	<stop  offset="0" style="stop-color:#4592C4"/>
+	<stop  offset="1" style="stop-color:#545ACD"/>
+</linearGradient>
+<path class="st0" d="M23.6,4.8c-0.9,0.4-1.8,0.6-2.7,0.8C21.9,5,22.6,4,23,2.9c-0.9,0.5-1.9,0.9-3,1.2c-0.9-0.9-2.1-1.5-3.5-1.5
+	c-2.6,0-4.8,2.1-4.8,4.8c0,0.4,0,0.7,0.1,1.1c-4-0.2-7.5-2.1-9.8-5C1.6,4.1,1.4,5,1.4,5.8c0,1.7,0.8,3.1,2.1,4
+	C2.7,9.8,2,9.6,1.3,9.2c0,0,0,0,0,0.1c0,2.3,1.6,4.2,3.8,4.7c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1
+	c0.6,1.9,2.4,3.3,4.4,3.3c-1.6,1.3-3.7,2-5.9,2c-0.4,0-0.8,0-1.1-0.1c2.1,1.4,4.6,2.2,7.3,2.2c8.8,0,13.6-7.3,13.6-13.6
+	c0-0.2,0-0.4,0-0.6C22.2,6.6,23,5.8,23.6,4.8z"/>
+</svg>

customize.dist/login.js

@@ -0,0 +1,286 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-listmap/chainpad-listmap.js',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/common-util.js',
+    '/common/outer/network-config.js',
+    '/customize/credential.js',
+    '/bower_components/chainpad/chainpad.dist.js',
+    '/common/common-realtime.js',
+    '/common/common-constants.js',
+    '/common/common-interface.js',
+    '/common/common-feedback.js',
+    '/common/outer/local-store.js',
+    '/customize/messages.js',
+
+    '/bower_components/tweetnacl/nacl-fast.min.js',
+    '/bower_components/scrypt-async/scrypt-async.min.js', // better load speed
+], function ($, Listmap, Crypto, Util, NetConfig, Cred, ChainPad, Realtime, Constants, UI,
+            Feedback, LocalStore, Messages) {
+    var Exports = {
+        Cred: Cred,
+    };
+
+    var Nacl = window.nacl;
+    var allocateBytes = function (bytes) {
+        var dispense = Cred.dispenser(bytes);
+
+        var opt = {};
+
+        // dispense 18 bytes of entropy for your encryption key
+        var encryptionSeed = dispense(18);
+        // 16 bytes for a deterministic channel key
+        var channelSeed = dispense(16);
+        // 32 bytes for a curve key
+        var curveSeed = dispense(32);
+
+        var curvePair = Nacl.box.keyPair.fromSecretKey(new Uint8Array(curveSeed));
+        opt.curvePrivate = Nacl.util.encodeBase64(curvePair.secretKey);
+        opt.curvePublic = Nacl.util.encodeBase64(curvePair.publicKey);
+
+        // 32 more for a signing key
+        var edSeed = opt.edSeed = dispense(32);
+
+        // derive a private key from the ed seed
+        var signingKeypair = Nacl.sign.keyPair.fromSeed(new Uint8Array(edSeed));
+
+        opt.edPrivate = Nacl.util.encodeBase64(signingKeypair.secretKey);
+        opt.edPublic = Nacl.util.encodeBase64(signingKeypair.publicKey);
+
+        var keys = opt.keys = Crypto.createEditCryptor(null, encryptionSeed);
+
+        // 24 bytes of base64
+        keys.editKeyStr = keys.editKeyStr.replace(/\//g, '-');
+
+        // 32 bytes of hex
+        var channelHex = opt.channelHex = Util.uint8ArrayToHex(channelSeed);
+
+        // should never happen
+        if (channelHex.length !== 32) { throw new Error('invalid channel id'); }
+
+        opt.channel64 = Util.hexToBase64(channelHex);
+
+        opt.userHash = '/1/edit/' + [opt.channel64, opt.keys.editKeyStr].join('/');
+
+        return opt;
+    };
+
+    var loadUserObject = function (opt, cb) {
+        var config = {
+            websocketURL: NetConfig.getWebsocketURL(),
+            channel: opt.channelHex,
+            data: {},
+            validateKey: opt.keys.validateKey, // derived validation key
+            crypto: Crypto.createEncryptor(opt.keys),
+            logLevel: 1,
+            classic: true,
+            ChainPad: ChainPad,
+            owners: [opt.edPublic]
+        };
+
+        var rt = opt.rt = Listmap.create(config);
+        rt.proxy
+        .on('ready', function () {
+            setTimeout(function () { cb(void 0, rt); });
+        })
+        .on('disconnect', function (info) {
+            cb('E_DISCONNECT', info);
+        });
+    };
+
+    var isProxyEmpty = function (proxy) {
+        return Object.keys(proxy).length === 0;
+    };
+
+    Exports.loginOrRegister = function (uname, passwd, isRegister, shouldImport, cb) {
+        if (typeof(cb) !== 'function') { return; }
+
+        // Usernames are all lowercase. No going back on this one
+        uname = uname.toLowerCase();
+
+        // validate inputs
+        if (!Cred.isValidUsername(uname)) { return void cb('INVAL_USER'); }
+        if (!Cred.isValidPassword(passwd)) { return void cb('INVAL_PASS'); }
+        if (isRegister && !Cred.isLongEnoughPassword(passwd)) {
+            return void cb('PASS_TOO_SHORT');
+        }
+
+        Cred.deriveFromPassphrase(uname, passwd, 128, function (bytes) {
+            // results...
+            var res = {
+                register: isRegister,
+            };
+
+            // run scrypt to derive the user's keys
+            var opt = res.opt = allocateBytes(bytes);
+
+            // use the derived key to generate an object
+            loadUserObject(opt, function (err, rt) {
+                if (err) { return void cb(err); }
+
+                res.proxy = rt.proxy;
+                res.realtime = rt.realtime;
+                res.network = rt.network;
+
+                // they're registering...
+                res.userHash = opt.userHash;
+                res.userName = uname;
+
+                // export their signing key
+                res.edPrivate = opt.edPrivate;
+                res.edPublic = opt.edPublic;
+
+                res.curvePrivate = opt.curvePrivate;
+                res.curvePublic = opt.curvePublic;
+
+                // they tried to just log in but there's no such user
+                if (!isRegister && isProxyEmpty(rt.proxy)) {
+                    rt.network.disconnect(); // clean up after yourself
+                    return void cb('NO_SUCH_USER', res);
+                }
+
+                // they tried to register, but those exact credentials exist
+                if (isRegister && !isProxyEmpty(rt.proxy)) {
+                    rt.network.disconnect();
+                    return void cb('ALREADY_REGISTERED', res);
+                }
+
+                if (isRegister) {
+                    var proxy = rt.proxy;
+                    proxy.edPublic = res.edPublic;
+                    proxy.edPrivate = res.edPrivate;
+                    proxy.curvePublic = res.curvePublic;
+                    proxy.curvePrivate = res.curvePrivate;
+                    proxy.login_name = uname;
+                    proxy[Constants.displayNameKey] = uname;
+                    sessionStorage.createReadme = 1;
+                    Feedback.send('REGISTRATION', true);
+                } else {
+                    Feedback.send('LOGIN', true);
+                }
+
+                if (shouldImport) {
+                    sessionStorage.migrateAnonDrive = 1;
+                }
+
+                // We have to call whenRealtimeSyncs asynchronously here because in the current
+                // version of listmap, onLocal calls `chainpad.contentUpdate(newValue)`
+                // asynchronously.
+                // The following setTimeout is here to make sure whenRealtimeSyncs is called after
+                // `contentUpdate` so that we have an update userDoc in chainpad.
+                setTimeout(function () {
+                    Realtime.whenRealtimeSyncs(rt.realtime, function () {
+                        LocalStore.login(res.userHash, res.userName, function () {
+                            setTimeout(function () { cb(void 0, res); });
+                        });
+                    });
+                });
+            });
+        });
+    };
+    Exports.redirect = function () {
+        if (sessionStorage.redirectTo) {
+            var h = sessionStorage.redirectTo;
+            var parser = document.createElement('a');
+            parser.href = h;
+            if (parser.origin === window.location.origin) {
+                delete sessionStorage.redirectTo;
+                window.location.href = h;
+                return;
+            }
+        }
+        window.location.href = '/drive/';
+    };
+
+    var hashing;
+    Exports.loginOrRegisterUI = function (uname, passwd, isRegister, shouldImport, testing, test) {
+        if (hashing) { return void console.log("hashing is already in progress"); }
+        hashing = true;
+
+        var proceed = function (result) {
+            hashing = false;
+            if (test && typeof test === "function" && test()) { return; }
+            Realtime.whenRealtimeSyncs(result.realtime, function () {
+                Exports.redirect();
+            });
+        };
+
+        // setTimeout 100ms to remove the keyboard on mobile devices before the loading screen
+        // pops up
+        window.setTimeout(function () {
+            UI.addLoadingScreen({
+                loadingText: Messages.login_hashing,
+                hideTips: true,
+            });
+            // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed
+            // after hashing the password
+            window.setTimeout(function () {
+                Exports.loginOrRegister(uname, passwd, isRegister, shouldImport, function (err, result) {
+                    var proxy;
+                    if (result) { proxy = result.proxy; }
+
+                    if (err) {
+                        switch (err) {
+                            case 'NO_SUCH_USER':
+                                UI.removeLoadingScreen(function () {
+                                    UI.alert(Messages.login_noSuchUser, function () {
+                                        hashing = false;
+                                    });
+                                });
+                                break;
+                            case 'INVAL_USER':
+                                UI.removeLoadingScreen(function () {
+                                    UI.alert(Messages.login_invalUser, function () {
+                                        hashing = false;
+                                    });
+                                });
+                                break;
+                            case 'INVAL_PASS':
+                                UI.removeLoadingScreen(function () {
+                                    UI.alert(Messages.login_invalPass, function () {
+                                        hashing = false;
+                                    });
+                                });
+                                break;
+                            case 'PASS_TOO_SHORT':
+                                UI.removeLoadingScreen(function () {
+                                    var warning = Messages._getKey('register_passwordTooShort', [
+                                        Cred.MINIMUM_PASSWORD_LENGTH
+                                    ]);
+                                    UI.alert(warning, function () {
+                                        hashing = false;
+                                    });
+                                });
+                                break;
+                            case 'ALREADY_REGISTERED':
+                                // logMeIn should reset registering = false
+                                UI.removeLoadingScreen(function () {
+                                    UI.confirm(Messages.register_alreadyRegistered, function (yes) {
+                                        if (!yes) { return; }
+                                        proxy.login_name = uname;
+
+                                        if (!proxy[Constants.displayNameKey]) {
+                                            proxy[Constants.displayNameKey] = uname;
+                                        }
+                                        LocalStore.eraseTempSessionValues();
+                                        proceed(result);
+                                    });
+                                });
+                                break;
+                            default: // UNHANDLED ERROR
+                                hashing = false;
+                                UI.errorLoadingScreen(Messages.login_unhandledError);
+                        }
+                        return;
+                    }
+
+                    if (testing) { return void proceed(result); }
+
+                    proceed(result);
+                });
+            }, 500);
+        }, 200);
+    };
+
+    return Exports;
+});

customize.dist/main.js

@@ -1,30 +1,19 @@
 define([
     'jquery',
-    '/customize/application_config.js',
-    '/common/cryptpad-common.js',
-    '/customize/header.js',
-], function ($, Config, Cryptpad) {
-
-    window.APP = {
-        Cryptpad: Cryptpad,
-    };
-
-    var Messages = Cryptpad.Messages;
+    '/common/outer/local-store.js',
+    '/customize/messages.js',
+], function ($, LocalStore, Messages) {
 
     $(function () {
         var $main = $('#mainBlock');
 
-        $(window).click(function () {
-            $('.cryptpad-dropdown').hide();
-        });
-
         // main block is hidden in case javascript is disabled
         $main.removeClass('hidden');
 
         // Make sure we don't display non-translated content (empty button)
         $main.find('#data').removeClass('hidden');
 
-        if (Cryptpad.isLoggedIn()) {
+        if (LocalStore.isLoggedIn()) {
             if (window.location.pathname === '/') {
                 window.location = '/drive/';
                 return;
@@ -32,162 +21,9 @@ define([
 
             $main.find('a[href="/drive/"] div.pad-button-text h4')
                 .text(Messages.main_yourCryptDrive);
-
-            var name = localStorage[Cryptpad.userNameKey] || sessionStorage[Cryptpad.userNameKey];
-            var $loggedInBlock = $main.find('#loggedIn');
-            var $hello = $loggedInBlock.find('#loggedInHello');
-            var $logout = $loggedInBlock.find('#loggedInLogOut');
-
-            if (name) {
-                $hello.text(Messages._getKey('login_hello', [name]));
-            } else {
-                $hello.text(Messages.login_helloNoName);
-            }
-            $('#buttons').find('.nologin').hide();
-
-            $logout.click(function () {
-                Cryptpad.logout(function () {
-                    window.location.reload();
-                });
-            });
-
-            $loggedInBlock.removeClass('hidden');
         }
-        else {
-            $main.find('#userForm').removeClass('hidden');
-            $('#name').focus();
-        }
-
-        var displayCreateButtons = function () {
-            var $parent = $('#buttons');
-            var options = [];
-            var $container = $('<div>', {'class': 'dropdown-bar'}).appendTo($parent);
-            Config.availablePadTypes.forEach(function (el) {
-                if (el === 'drive') { return; }
-                if (!Cryptpad.isLoggedIn() && Config.registeredOnlyTypes &&
-                    Config.registeredOnlyTypes.indexOf(el) !== -1) { return; }
-                options.push({
-                    tag: 'a',
-                    attributes: {
-                        'class': 'newdoc',
-                        'href': '/' + el + '/',
-                        'target': '_blank'
-                    },
-                    content: Messages['button_new' + el] // Pretty name of the language value
-                });
-            });
-            var dropdownConfig = {
-                text: Messages.login_makeAPad, // Button initial text
-                options: options, // Entries displayed in the menu
-                container: $container
-            };
-            var $block = Cryptpad.createDropdown(dropdownConfig);
-            $block.find('button').addClass('btn').addClass('btn-primary');
-            $block.appendTo($parent);
-        };
-
-        /* Log in UI */
-        var Login;
-        // deferred execution to avoid unnecessary asset loading
-        var loginReady = function (cb) {
-            if (Login) {
-                if (typeof(cb) === 'function') { cb(); }
-                return;
-            }
-            require([
-                '/common/login.js',
-            ], function (_Login) {
-                Login = Login || _Login;
-                if (typeof(cb) === 'function') { cb(); }
-            });
-        };
-
-        var $uname = $('#name').on('focus', loginReady);
-
-        var $passwd = $('#password')
-        // background loading of login assets
-        .on('focus', loginReady)
-        // enter key while on password field clicks signup
-        .on('keyup', function (e) {
-            if (e.which !== 13) { return; } // enter
-            $('button.login').click();
+        $(window).click(function () {
+            $('.cp-dropdown-content').hide();
         });
-
-        $('button.login').click(function () {
-            // setTimeout 100ms to remove the keyboard on mobile devices before the loading screen pops up
-            window.setTimeout(function () {
-                Cryptpad.addLoadingScreen(Messages.login_hashing);
-                // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed after hashing the password
-                window.setTimeout(function () {
-                    loginReady(function () {
-                        var uname = $uname.val();
-                        var passwd = $passwd.val();
-                        Login.loginOrRegister(uname, passwd, false, function (err, result) {
-                            if (!err) {
-                                var proxy = result.proxy;
-
-                                // successful validation and user already exists
-                                // set user hash in localStorage and redirect to drive
-                                if (proxy && !proxy.login_name) {
-                                    proxy.login_name = result.userName;
-                                }
-
-                                proxy.edPrivate = result.edPrivate;
-                                proxy.edPublic = result.edPublic;
-
-                                Cryptpad.whenRealtimeSyncs(result.realtime, function () {
-                                    Cryptpad.login(result.userHash, result.userName, function () {
-                                        document.location.href = '/drive/';
-                                    });
-                                });
-                                return;
-                            }
-                            switch (err) {
-                                case 'NO_SUCH_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
-                                        Cryptpad.alert(Messages.login_noSuchUser);
-                                    });
-                                    break;
-                                case 'INVAL_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
-                                        Cryptpad.alert(Messages.login_invalUser);
-                                    });
-                                    break;
-                                case 'INVAL_PASS':
-                                    Cryptpad.removeLoadingScreen(function () {
-                                        Cryptpad.alert(Messages.login_invalPass);
-                                    });
-                                    break;
-                                default: // UNHANDLED ERROR
-                                    Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
-                            }
-                        });
-                    });
-                }, 0);
-            }, 100);
-        });
-        /* End Log in UI */
-
-        var addButtonHandlers = function () {
-            $('button.register').click(function () {
-                var username = $('#name').val();
-                var passwd = $('#password').val();
-                sessionStorage.login_user = username;
-                sessionStorage.login_pass = passwd;
-                document.location.href = '/register/';
-            });
-            $('button.gotodrive').click(function () {
-                document.location.href = '/drive/';
-            });
-
-            $('button#loggedInLogout').click(function () {
-                $('#user-menu .logout').click();
-            });
-        };
-
-        displayCreateButtons();
-
-        addButtonHandlers();
-        console.log("ready");
     });
 });

customize.dist/messages.js

@@ -1,6 +1,4 @@
 (function () {
-var LS_LANG = "CRYPTPAD_LANG";
-
 // add your module to this map so it gets used
 var map = {
     'fr': 'Français',
@@ -10,39 +8,34 @@ var map = {
     'pt-br': 'Português do Brasil',
     'ro': 'Română',
     'zh': '繁體中文',
+    'el': 'Ελληνικά',
 };
 
-var getStoredLanguage = function () { return localStorage.getItem(LS_LANG); };
-var getBrowserLanguage = function () { return navigator.language || navigator.userLanguage; };
-var getLanguage = function () {
+var messages = {};
+var LS_LANG = "CRYPTPAD_LANG";
+var getStoredLanguage = function () { return localStorage && localStorage.getItem(LS_LANG); };
+var getBrowserLanguage = function () { return navigator.language || navigator.userLanguage || ''; };
+var getLanguage = messages._getLanguage = function () {
+    if (window.cryptpadLanguage) { return window.cryptpadLanguage; }
     if (getStoredLanguage()) { return getStoredLanguage(); }
-    var l = getBrowserLanguage() || '';
-    if (Object.keys(map).indexOf(l) !== -1) {
-        return l;
-    }
+    var l = getBrowserLanguage();
     // Edge returns 'fr-FR' --> transform it to 'fr' and check again
-    return Object.keys(map).indexOf(l.split('-')[0]) !== -1 ? l.split('-')[0] : 'en';
+    return map[l] ? l :
+            (map[l.split('-')[0]] ? l.split('-')[0] : 'en');
 };
 var language = getLanguage();
 
-var req = ['jquery', '/customize/translations/messages.js'];
+var req = ['/common/common-util.js', '/customize/translations/messages.js'];
 if (language && map[language]) { req.push('/customize/translations/messages.' + language + '.js'); }
 
-define(req, function($, Default, Language) {
-
-    var externalMap = JSON.parse(JSON.stringify(map));
-
+define(req, function(Util, Default, Language) {
     map.en = 'English';
     var defaultLanguage = 'en';
 
-    var messages;
-
-    if (!Language || !language || language === defaultLanguage || language === 'default' || !map[language]) {
-        messages = Default;
-    }
-    else {
+    Util.extend(messages, Default);
+    if (Language && language !== defaultLanguage) {
         // Add the translated keys to the returned object
-        messages = $.extend(true, {}, Default, Language);
+        Util.extend(messages, Language);
     }
 
     messages._languages = map;
@@ -50,46 +43,71 @@ define(req, function($, Default, Language) {
 
     messages._checkTranslationState = function (cb) {
         if (typeof(cb) !== "function") { return; }
-        var missing = [];
+        var allMissing = [];
         var reqs = [];
-        Object.keys(externalMap).forEach(function (code) {
+        Object.keys(map).forEach(function (code) {
+            if (code === defaultLanguage) { return; }
             reqs.push('/customize/translations/messages.' + code + '.js');
         });
         require(reqs, function () {
             var langs = arguments;
-            Object.keys(externalMap).forEach(function (code, i) {
+            Object.keys(map).forEach(function (code, i) {
+                if (code === defaultLanguage) { return; }
                 var translation = langs[i];
-                var updated = {};
-                Object.keys(Default).forEach(function (k) {
-                    if (/^updated_[0-9]+_/.test(k) && !translation[k]) {
-                        var key = k.split('_').slice(2).join('_');
-                        // Make sure we don't already have an update for that key. It should not happen
-                        // but if it does, keep the latest version
-                        if (updated[key]) {
-                            var ek = updated[key];
-                            if (parseInt(ek.split('_')[1]) > parseInt(k.split('_')[1])) { return; }
+                var missing = [];
+                var checkInObject = function (ref, translated, path) {
+                    var updated = {};
+                    Object.keys(ref).forEach(function (k) {
+                        if (/^updated_[0-9]+_/.test(k) && !translated[k]) {
+                            var key = k.split('_').slice(2).join('_');
+                            // Make sure we don't already have an update for that key. It should not happen
+                            // but if it does, keep the latest version
+                            if (updated[key]) {
+                                var ek = updated[key];
+                                if (parseInt(ek.split('_')[1]) > parseInt(k.split('_')[1])) { return; }
+                            }
+                            updated[key] = k;
                         }
-                        updated[key] = k;
-                    }
-                });
-                Object.keys(Default).forEach(function (k) {
-                    if (/^_/.test(k) || k === 'driveReadme') { return; }
-                    if (!translation[k] || updated[k]) {
-                        if (updated[k]) {
-                            missing.push([code, k, 2, 'out.' + updated[k]]);
-                            return;
+                    });
+                    Object.keys(ref).forEach(function (k) {
+                        if (/^_/.test(k) || k === 'driveReadme') { return; }
+                        var nPath = path.slice();
+                        nPath.push(k);
+                        if (!translated[k] || updated[k]) {
+                            if (updated[k]) {
+                                var uPath = path.slice();
+                                uPath.unshift('out');
+                                missing.push([code, nPath, 2, uPath.join('.') + '.' + updated[k]]);
+                                return;
+                            }
+                            return void missing.push([code, nPath, 1]);
                         }
-                        missing.push([code, k, 1]);
-                    }
-                });
-                Object.keys(translation).forEach(function (k) {
-                    if (/^_/.test(k) || k === 'driveReadme') { return; }
-                    if (!Default[k]) {
-                        missing.push([code, k, 0]);
-                    }
+                        if (typeof ref[k] !== typeof translated[k]) {
+                            return void missing.push([code, nPath, 3]);
+                        }
+                        if (typeof ref[k] === "object" && !Array.isArray(ref[k])) {
+                            checkInObject(ref[k], translated[k], nPath);
+                        }
+                    });
+                    Object.keys(translated).forEach(function (k) {
+                        if (/^_/.test(k) || k === 'driveReadme') { return; }
+                        var nPath = path.slice();
+                        nPath.push(k);
+                        if (typeof ref[k] === "undefined") {
+                            missing.push([code, nPath, 0]);
+                        }
+                    });
+                };
+                checkInObject(Default, translation, []);
+                // Push the removals at the end
+                missing.sort(function (a, b) {
+                    if (a[2] === 0 && b[2] !== 0) { return 1; }
+                    if (a[2] !== 0 && b[2] === 0) { return -1; }
+                    return 0;
                 });
+                Array.prototype.push.apply(allMissing, missing); // Destructive concat
             });
-            cb(missing);
+            cb(allMissing);
         });
     };
 
@@ -99,66 +117,17 @@ define(req, function($, Default, Language) {
         var text = messages[key];
         if (typeof(text) === 'string') {
             return text.replace(/\{(\d+)\}/g, function (str, p1) {
-                return argArray[p1] || null;
+                if (typeof(argArray[p1]) === 'string' || typeof(argArray[p1]) === "number") {
+                    return argArray[p1];
+                }
+                console.error("Only strings and numbers can be used in _getKey params!");
+                return '';
             });
         } else {
             return text;
         }
     };
 
-    // Add handler to the language selector
-    var storeLanguage = function (l) {
-        localStorage.setItem(LS_LANG, l);
-    };
-    messages._initSelector = function ($select) {
-        var selector = $select || $('#language-selector');
-
-        if (!selector.length) { return; }
-
-        // Select the current language in the list
-        selector.setValue(language || 'English');
-
-        // Listen for language change
-        $(selector).find('a.languageValue').on('click', function () {
-            var newLanguage = $(this).attr('data-value');
-            storeLanguage(newLanguage);
-            if (newLanguage !== language) {
-                window.location.reload();
-            }
-        });
-    };
-
-    var translateText = function (i, e) {
-        var $el = $(e);
-        var key = $el.data('localization');
-        $el.html(messages[key]);
-    };
-    var translateAppend = function (i, e) {
-        var $el = $(e);
-        var key = $el.data('localization-append');
-        $el.append(messages[key]);
-    };
-    var translateTitle = function () {
-        var $el = $(this);
-        var key = $el.data('localization-title');
-        $el.attr('title', messages[key]);
-    };
-    var translatePlaceholder = function () {
-        var $el = $(this);
-        var key = $el.data('localization-placeholder');
-        $el.attr('placeholder', messages[key]);
-    };
-    messages._applyTranslation = function () {
-        $('[data-localization]').each(translateText);
-        $('[data-localization-append]').each(translateAppend);
-        $('[data-localization-title]').each(translateTitle);
-        $('[data-localization-placeholder]').each(translatePlaceholder);
-        $('#pad-iframe').contents().find('[data-localization]').each(translateText);
-        $('#pad-iframe').contents().find('[data-localization-append]').each(translateAppend);
-        $('#pad-iframe').contents().find('[data-localization-title]').each(translateTitle);
-        $('#pad-iframe').contents().find('[data-localization-placeholder]').each(translatePlaceholder);
-    };
-
     messages.driveReadme = '["BODY",{"class":"cke_editable cke_editable_themed cke_contents_ltr cke_show_borders","contenteditable":"true","spellcheck":"false","style":"color: rgb(51, 51, 51);"},' +
         '[["H1",{},["'+messages.readme_welcome+'"]],["P",{},["'+messages.readme_p1+'"]],["P",{},["'+messages.readme_p2+'"]],["HR",{},[]],["H2",{},["'+messages.readme_cat1+'",["BR",{},[]]]],["UL",{},[["LI",{},["'+messages._getKey("readme_cat1_l1", ['",["STRONG",{},["'+messages.newButton+'"]],"', '",["STRONG",{},["'+messages.type.pad+'"]],"'])+'"]],["LI",{},["'+messages.readme_cat1_l2+'"]],["LI",{},["'+messages._getKey("readme_cat1_l3", ['",["STRONG",{},["'+messages.fm_unsortedName+'"]],"'])+'",["UL",{},[["LI",{},["'+messages._getKey("readme_cat1_l3_l1", ['",["STRONG",{},["'+messages.fm_rootName+'"]],"'])+'"]],["LI",{},["'+messages.readme_cat1_l3_l2+'"]]]]]],["LI",{},["'+messages._getKey("readme_cat1_l4", ['",["STRONG",{},["'+messages.fm_trashName+'"]],"'])+'",["BR",{},[]]]]]],["P",{},[["BR",{},[]]]],["H2",{},["'+messages.readme_cat2+'",["BR",{},[]]]],["UL",{},[["LI",{},["'+messages._getKey("readme_cat2_l1", ['",["STRONG",{},["'+messages.shareButton+'"]],"', '",["STRONG",{},["'+messages.edit+'"]],"', '",["STRONG",{},["'+messages.view+'"]],"'])+'"]],["LI",{},["'+messages.readme_cat2_l2+'"]]]],["P",{},[["BR",{},[]]]],["H2",{},["'+messages.readme_cat3+'"]],["UL",{},[["LI",{},["'+messages.readme_cat3_l1+'"]],["LI",{},["'+messages.readme_cat3_l2+'"]],["LI",{},["'+messages.readme_cat3_l3+'",["BR",{},[]]]]]]],' +
         '{"metadata":{"defaultTitle":"' + messages.driveReadmeTitle + '","title":"' + messages.driveReadmeTitle + '"}}]';

customize.dist/pages.js

@@ -1,11 +1,11 @@
 define([
     '/api/config',
     '/common/hyperscript.js',
-    '/common/cryptpad-common.js',
-    'jquery'
-], function (Config, h, Cryptpad, $) {
+    '/customize/messages.js',
+    'jquery',
+    '/customize/application_config.js',
+], function (Config, h, Msg, $, AppConfig) {
     var Pages = {};
-    var Msg = Cryptpad.Messages;
     var urlArgs = Config.requireConf.urlArgs;
 
     var setHTML = function (e, html) {
@@ -50,11 +50,6 @@ define([
                             h('p', Msg.main_footerText)
                         ])
                     ], ''),
-                   /* footerCol(null, [
-                        footLink('/about.html', 'about'),
-                        footLink('/terms.html', 'terms'),
-                        footLink('/privacy.html', 'privacy'),
-                    ], 'CryptPad'),*/
                     footerCol('footer_applications', [
                         footLink('/drive/', 'main_drive'),
                         footLink('/pad/', 'main_richText'),
@@ -77,7 +72,7 @@ define([
                     ])
                 ])
             ]),
-            h('div.cp-version-footer', "CryptPad v1.14.0 (Ouroboros)")
+            h('div.cp-version-footer', "CryptPad v1.29.0 (toSource)")
         ]);
     };
 
@@ -97,17 +92,34 @@ define([
             ]);
         }
 
-        return h('nav.navbar.navbar-toggleable-md',
-                     h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
-                    [h('i.fa.fa-bars ')
-                    ]),
-                    h('a.navbar-brand', { href: '/index.html'}),
-                h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [  
-                    h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
-                    h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
-                    h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
-                    h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
-                ].concat(rightLinks))
+        var button = h('button.navbar-toggler', {
+            'type':'button',
+            /*'data-toggle':'collapse',
+            'data-target':'#menuCollapse',
+            'aria-controls': 'menuCollapse',
+            'aria-expanded':'false',
+            'aria-label':'Toggle navigation'*/
+        }, h('i.fa.fa-bars '));
+
+        $(button).click(function () {
+            if ($('#menuCollapse').is(':visible')) {
+                return void $('#menuCollapse').slideUp();
+            }
+            $('#menuCollapse').slideDown();
+        });
+
+        return h('nav.navbar.navbar-expand-lg',
+            h('a.navbar-brand', { href: '/index.html'}),
+            button,
+            h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [
+                //h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad), // Moved the FAQ
+                h('a.nav-item.nav-link', { href: '/faq.html'}, Msg.faq_link),
+                h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
+                h('a.nav-item.nav-link', { href: '/features.html'}, Msg.features),
+                h('a.nav-item.nav-link', { href: '/privacy.html'}, Msg.privacy),
+                h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
+                h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
+            ].concat(rightLinks))
         );
     };
 
@@ -146,10 +158,10 @@ define([
                     ]),
                 ]),
                 h('div.row.align-items-center',[
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2.cp-bio-avatar.cp-bio-avatar-right', [
                             h('img.img-fluid', {'src': '/customize/images/AaronMacSween.jpg'})
                     ]),
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1.cp-profile-det',[
                         h('h3', "Aaron MacSween"),
                         h('hr'),
                         setHTML(h('div#bioAaron'), '<p>Aaron transitioned into distributed systems development from a background in jazz and live stage performance. <br/> He appreciates the elegance of biological systems and functional programming, and focused on both as a student at the University of Toronto, where he studied cognitive and computer sciences.<br/>He moved to Paris in 2015 to work as a research engineer at XWiki SAS, after having dedicated significant time to various cryptography-related software projects.<br/>He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.</p>'),
@@ -197,10 +209,10 @@ define([
                     ]),
                 ]),
                 h('div.row.align-items-center',[
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2.cp-bio-avatar.cp-bio-avatar-right', [
                             h('img.img-fluid', {'src': '/customize/images/Catalin.jpg'})
                     ]),
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1.cp-profile-det',[
                         h('h3', "Catalin Scripcariu"),
                         h('hr'),
                         setHTML(h('div#bioCatalin'), '<p> Catalin is a Maths majour and has worked in B2B sales for 12 years. Design was always his passion and 3 years ago he started to dedicate himself to web design and front-end.<br/>At the beginning of 2017 he joined the XWiki, where he worked both on the business and the community side of XWiki, including the research team and CryptPad. </p>'),
@@ -233,13 +245,128 @@ define([
         ]);
     };
 
+    Pages['/features.html'] = function () {
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('center', h('h1', Msg.features_title)),
+                h('table#cp-features-table', [
+                    h('thead', h('tr', [
+                        h('th', Msg.features_feature),
+                        h('th', Msg.features_anon),
+                        h('th', Msg.features_registered),
+                        h('th', Msg.features_notes)
+                    ])),
+                    h('tbody', [
+                        h('tr', [
+                            h('td', Msg.features_f_pad),
+                            h('td.yes', '✔'),// u2714, u2715
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_pad_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_history),
+                            h('td.yes', '✔'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_history_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_export),
+                            h('td.yes', '✔'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_export_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_todo),
+                            h('td.yes', '✔'),
+                            h('td.yes', '✔'),
+                            h('td')
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_viewFiles),
+                            h('td.yes', '✔'),
+                            h('td.yes', '✔'),
+                            h('td')
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_drive),
+                            h('td.part', '~'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_drive_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_uploadFiles),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td')
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_embedFiles),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td')
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_multiple),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_multiple_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_logoutEverywhere),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_logoutEverywhere_notes || '')
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_templates),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_templates_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_profile),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_profile_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_tags),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_tags_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_contacts),
+                            h('td.no', '✕'),
+                            h('td.yes', '✔'),
+                            h('td', Msg.features_f_contacts_notes)
+                        ]),
+                        h('tr', [
+                            h('td', Msg.features_f_storage),
+                            h('td.no', Msg.features_f_storage_anon),
+                            setHTML(h('td.yes.left'), Msg.features_f_storage_registered),
+                            h('td')
+                        ]),
+                    ])
+                ]),
+                h('div#cp-features-register', [
+                    h('a', {
+                        href: '/register/'
+                    }, h('button.cp-features-register-button', 'Register for free'))
+                ])
+            ]),
+            infopageFooter()
+        ]);
+    };
+
     Pages['/privacy.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
             h('div.container.cp-container', [
                 h('center', h('h1', Msg.policy_title)),
                 h('h2', Msg.policy_whatweknow),
-                h('p', Msg.policywhatweknow_p1),
+                setHTML(h('p'), Msg.policy_whatweknow_p1),
 
                 h('h2', Msg.policy_howweuse),
                 h('p', Msg.policy_howweuse_p1),
@@ -262,6 +389,50 @@ define([
         ]);
     };
 
+    Pages['/faq.html'] = function () {
+        var categories = [];
+        var faq = Msg.faq;
+        Object.keys(faq).forEach(function (c) {
+            var questions = [];
+            Object.keys(faq[c]).forEach(function (q) {
+                var item = faq[c][q];
+                if (typeof item !== "object") { return; }
+                var answer = h('p.cp-faq-questions-a');
+                var hash = c + '-' + q;
+                var question = h('p.cp-faq-questions-q#' + hash);
+                $(question).click(function () {
+                    if ($(answer).is(':visible')) {
+                        return void $(answer).slideUp();
+                    }
+                    $(answer).slideDown();
+                });
+                questions.push(h('div.cp-faq-questions-items', [
+                    setHTML(question, item.q),
+                    setHTML(answer, item.a)
+                ]));
+            });
+            categories.push(h('div.cp-faq-category', [
+                h('h3', faq[c].title),
+                h('div.cp-faq-category-questions', questions)
+            ]));
+        });
+        var hash = window.location.hash;
+        if (hash) {
+            $(categories).find(hash).click();
+        }
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('center', h('h1', Msg.faq_title)),
+                h('p.cp-faq-header', h('a.nav-item.nav-link', {
+                    href: '/what-is-cryptpad.html'
+                }, Msg.faq_whatis)),
+                h('div.cp-faq-container', categories)
+            ]),
+            infopageFooter()
+        ]);
+    };
+
     Pages['/terms.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
@@ -280,9 +451,45 @@ define([
     Pages['/contact.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
+            h('div.container-fluid.cp-contdet', [
+                h('row.col-12.col-sm-12',
+                    h('h1.text-center', Msg.contact )
+                )
+            ]),
             h('div.container.cp-container', [
-                h('center', h('h1', Msg.contact)),
-                setHTML(h('p'), Msg.main_about_p2)
+                h('div.row.cp-iconCont.align-items-center', [
+                    h('div.col-12',
+                        setHTML(h('h4.text-center'), Msg.main_about_p26)
+                    ),
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://twitter.com/cryptpad"}, 
+                            h('div.card-body', 
+                                setHTML(h('p'), Msg.main_about_p22)
+                            )
+                        )
+                    ),
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
+                            h('div.card-body', 
+                                setHTML(h('p'), Msg.main_about_p23)
+                            )
+                        )
+                    ),
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "https://riot.im/app/#/room/#cryptpad:matrix.org"},
+                            h('div.card-body', 
+                                setHTML(h('p'), Msg.main_about_p24)
+                            )
+                        )
+                    ),
+                    h('div.col-6.col-sm-3.col-md-3.col-lg-3',
+                        h('a.card', {href : "mailto:research@xwiki.com"},
+                            h('div.card-body', 
+                                setHTML(h('p'), Msg.main_about_p25)
+                            )
+                        )
+                    ),
+                ]),
             ]),
             infopageFooter(),
         ]);
@@ -311,13 +518,13 @@ define([
                     ]),
                 ]),
                 h('div.row.align-items-center', [
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-2', [
                         setHTML(h('h2'), Msg.whatis_zeroknowledge),
                         setHTML(h('p'), Msg.whatis_zeroknowledge_p1),
                         setHTML(h('p'), Msg.whatis_zeroknowledge_p2),
                         setHTML(h('p'), Msg.whatis_zeroknowledge_p3),
                     ]),
-                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.order-1', [
                         h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }),
                     ]),
                 ]),
@@ -344,8 +551,61 @@ define([
         ]);
     };
 
+    var isAvailableType = function (x) {
+        if (!Array.isArray(AppConfig.availablePadTypes)) { return true; }
+        return AppConfig.availablePadTypes.some(function (type) {
+            return x.indexOf(type) > -1;
+        });
+    };
+
     Pages['/'] = Pages['/index.html'] = function () {
         var showingMore = false;
+
+        var icons = [
+                [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ],
+                [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ],
+                [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
+                [ 'poll', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
+                [ 'whiteboard', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
+                [ 'recent', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
+            ].filter(function (x) {
+                return isAvailableType(x[1]);
+            })
+            .map(function (x, i) {
+                var s = 'div.bs-callout.cp-callout-' + x[0];
+                if (i > 2) { s += '.cp-more.cp-hidden'; }
+                return h('a', [
+                    { href: x[1] },
+                    h(s, [
+                        h('i.fa.' + x[3]),
+                        h('div.pad-button-text', [ h('h4', x[2]) ])
+                    ])
+                ]);
+            });
+
+        var more = icons.length < 4? undefined: h('div.bs-callout.cp-callout-more', [
+                h('div.cp-callout-more-lessmsg.cp-hidden', [
+                    "see less ",
+                    h('i.fa.fa-caret-up')
+                ]),
+                h('div.cp-callout-more-moremsg', [
+                    "see more ",
+                    h('i.fa.fa-caret-down')
+                ]),
+                {
+                    onclick: function () {
+                        if (showingMore) {
+                            $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
+                            $('.cp-callout-more-moremsg').removeClass('cp-hidden');
+                        } else {
+                            $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
+                            $('.cp-callout-more-moremsg').addClass('cp-hidden');
+                        }
+                        showingMore = !showingMore;
+                    }
+                }
+            ]);
+
         return [
             h('div#cp-main', [
                 infopageTopbar(),
@@ -357,44 +617,8 @@ define([
                             h('p', Msg.main_catch_phrase)
                         ]),
                         h('div.col-12.col-sm-6', [
-                            [
-                                [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ],
-                                [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ],
-                                [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
-                                [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
-                                [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
-                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
-                            ].map(function (x) {
-                                return h('a', [
-                                    { href: x[1] },
-                                    h('div.bs-callout.cp-callout-' + x[0], [
-                                        h('i.fa.' + x[3]),
-                                        h('div.pad-button-text', [ h('h4', x[2]) ])
-                                    ])
-                                ]);
-                            }),
-                            h('div.bs-callout.cp-callout-more', [
-                                h('div.cp-callout-more-lessmsg.cp-hidden', [
-                                    "see less ",
-                                    h('i.fa.fa-caret-up')
-                                ]), 
-                                h('div.cp-callout-more-moremsg', [
-                                    "see more ",
-                                    h('i.fa.fa-caret-down')
-                                ]),
-                                {
-                                    onclick: function () {
-                                        if (showingMore) {
-                                            $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
-                                            $('.cp-callout-more-moremsg').removeClass('cp-hidden');
-                                        } else {
-                                            $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
-                                            $('.cp-callout-more-moremsg').addClass('cp-hidden');
-                                        }
-                                        showingMore = !showingMore;
-                                    }
-                                }
-                            ])
+                            icons,
+                            more
                         ])
                     ])
                 ]),
@@ -402,19 +626,25 @@ define([
         ];
     };
 
-    var loadingScreen = function () {
-        return h('div#loading', 
-            h('div.loadingContainer', [
-                h('img.cryptofist', {
+    var loadingScreen = Pages.loadingScreen = function () {
+        return h('div#cp-loading', 
+            h('div.cp-loading-container', [
+                h('img.cp-loading-cryptofist', {
                     src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
                 }),
-                h('div.spinnerContainer',
+                h('div.cp-loading-spinner-container',
                     h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')),
                 h('p'),
             ])
         );
     };
 
+    var hiddenLoader = function () {
+        var loader = loadingScreen();
+        loader.style.display = 'none';
+        return loader;
+    };
+
     Pages['/user/'] = Pages['/user/index.html'] = function () {
         return h('div#container');
     };
@@ -437,6 +667,9 @@ define([
                     setHTML(h('p.register-explanation'), Msg.register_explanation)
                 ]),
                 h('div#userForm.form-group.hidden.col-md-6', [
+                    h('a', {
+                        href: '/features.html'
+                    }, Msg.register_whyRegister),
                     h('input.form-control#username', {
                         type: 'text',
                         autocomplete: 'off',
@@ -483,13 +716,14 @@ define([
                 h('div.row.cp-register-test',[
                     h('hr'),
                     h('div.col-12', [
-                        setHTML(h('p.test-details'), Msg.register_testimonial),
-                        h('a.cp-test-source.pull-right', { href : 'http://boingboing.net/2016/09/26/cryptpad-a-freeopen-end-to.html'}, Msg.register_testimonial_name)
+                        setHTML(h('p.test-details'), " \"Tools like Etherpad and Google Docs [...] all share a weakness, which is that whomever owns the document server can see everything you're typing. Cryptpad is a free/open project that uses some of the ideas behind blockchain to implement a \"zero-knowledge\" version of a collaborative document editor, ensuring that only the people working on a document can see it.\" "),
+                        h('a.cp-test-source.pull-right', { href : 'http://boingboing.net/2016/09/26/cryptpad-a-freeopen-end-to.html'}, "Cory Doctorow")
                     ])
                 ])
             ]),
 
             infopageFooter(),
+            hiddenLoader(),
         ])];
     };
 
@@ -515,185 +749,147 @@ define([
                             'name': 'password',
                             placeholder: Msg.login_password,
                         }),
+                        h('div.checkbox-container', [
+                            h('input#import-recent', {
+                                name: 'import-recent',
+                                type: 'checkbox',
+                                checked: true
+                            }),
+                            // hscript doesn't generate for on label for some
+                            // reason... use jquery as a temporary fallback
+                            setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
+                            /*h('label', {
+                                'for': 'import-recent',
+                            }, Msg.register_importRecent),*/
+                        ]),
                         h('div.extra', [
-                            h('button.login.first.btn', Msg.login_login),
-                            h('button#register.btn.register.cp-login-register', Msg.login_register)
+                            h('button.login.first.btn', Msg.login_login)
                         ])
                     ])
                 ]),
             ]),
             infopageFooter(),
+            hiddenLoader(),
         ])];
     };
 
     var appToolbar = function () {
-        return h('div#toolbar.toolbar-container');
+        return h('div#cp-toolbar.cp-toolbar-container');
     };
 
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
             appToolbar(),
-            h('div#canvas-area', h('canvas#canvas', {
-                width: 600,
-                height: 600
-            })),
-            h('div#controls', {
+            h('div#cp-app-whiteboard-canvas-area',
+                h('div#cp-app-whiteboard-container',
+                    h('canvas#cp-app-whiteboard-canvas', {
+                        width: 600,
+                        height: 600
+                    })
+                )
+            ),
+            h('div#cp-app-whiteboard-controls', {
                 style: {
                     display: 'block',
                 }
             }, [
-                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
-                h('button#delete.btn.btn-secondary', {
+                h('button#cp-app-whiteboard-clear.btn.btn-danger', Msg.canvas_clear), ' ',
+                h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Msg.canvas_disable),
+                h('button#cp-app-whiteboard-delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
                 }, Msg.canvas_delete),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'width'
+                        'for': 'cp-app-whiteboard-width'
                     }, Msg.canvas_width),
-                    h('input#width', {
+                    h('input#cp-app-whiteboard-width', {
                         type: 'range',
-                        value: "5",
                         min: "1",
                         max: "100"
                     }),
-                    h('span#width-val', '5px')
+                    h('span#cp-app-whiteboard-width-val', '5px')
                 ]),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'opacity',
+                        'for': 'cp-app-whiteboard-opacity',
                     }, Msg.canvas_opacity),
-                    h('input#opacity', {
+                    h('input#cp-app-whiteboard-opacity', {
                         type: 'range',
-                        value: "1",
                         min: "0.1",
                         max: "1",
                         step: "0.1"
                     }),
-                    h('span#opacity-val', '100%')
+                    h('span#cp-app-whiteboard-opacity-val', '100%')
                 ]),
-                h('span.selected', [
+                h('span.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
                     h('img', {
                         title: Msg.canvas_currentBrush
                     })
                 ])
             ]),
-            setHTML(h('div#colors'), '&nbsp;'),
-            loadingScreen(),
-            h('div#cursors', {
+            setHTML(h('div#cp-app-whiteboard-colors'), '&nbsp;'),
+            h('div#cp-app-whiteboard-cursors', {
                 style: {
                     display: 'none',
                     background: 'white',
                     'text-align': 'center',
                 }
             }),
-            h('div#pickers'),
+            h('div#cp-app-whiteboard-pickers'),
+            h('div#cp-app-whiteboard-media-hidden')
         ];
     };
 
     Pages['/poll/'] = Pages['/poll/index.html'] = function () {
         return [
             appToolbar(),
-            h('div#content', [
-                h('div#poll', [
-                    h('div#howItWorks', [
-                        h('h1', 'CryptPoll'),
-                        setHTML(h('h2'), Msg.poll_subtitle),
-                        h('p', Msg.poll_p_save),
-                        h('p', Msg.poll_p_encryption)
-                    ]),
-                    h('div.upper', [
-                        h('button#publish.btn.btn-success', {
-                            style: { display: 'none' }
-                        }, Msg.poll_publish_button),
-                        h('button#admin.btn.btn-primary', {
-                            style: { display: 'none' },
-                            title: Msg.poll_admin_button
-                        }, Msg.poll_admin_button),
-                        h('button#help.btn.btn-secondary', {
-                            title: Msg.poll_show_help_button
-                        }, Msg.poll_show_help_button)
-                    ]),
-                    h('div.realtime', [
+            h('div#cp-app-poll-content', [
+                h('div#cp-app-poll-form', [
+                    h('div.cp-app-poll-realtime', [
                         h('br'),
-                        h('center', [
-                            h('textarea#description', {
+                        h('div', [
+                            h('textarea#cp-app-poll-description', {
                                 rows: "5",
                                 cols: "50",
+                                placeholder: Msg.poll_descriptionHint,
                                 disabled: true
                             }),
+                            h('div#cp-app-poll-description-published'),
                             h('br')
                         ]),
-                        h('div#tableContainer', [
-                            h('div#tableScroll'),
-                            h('button#create-user.btn.btn-secondary', {
+                        h('div#cp-app-poll-table-container', [
+                            h('div#cp-app-poll-table-scroll', [h('table')]),
+                            h('button#cp-app-poll-create-user.btn.btn-secondary', {
                                 title: Msg.poll_create_user
-                            }, h('span.fa.fa-plus')),
-                            h('button#create-option.btn.btn-secondary', {
+                            }, Msg.poll_commit),
+                            h('button#cp-app-poll-create-option.btn.btn-secondary', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
-                            h('button#commit.btn.btn-secondary', {
-                                title: Msg.poll_commit
-                            }, h('span.fa.fa-check'))
-                        ])
+                        ]),
+                        h('div#cp-app-poll-comments', [
+                            h('h2#cp-app-poll-comments-add-title', Msg.poll_comment_add),
+                            h('div#cp-app-poll-comments-add', [
+                                h('input.cp-app-poll-comments-add-name', {
+                                    type: 'text',
+                                    placeholder: Msg.anonymous
+                                }),
+                                h('textarea.cp-app-poll-comments-add-msg', {
+                                    placeholder: Msg.poll_comment_placeholder
+                                }),
+                                h('button.cp-app-poll-comments-add-submit.btn.btn-secondary',
+                                    Msg.poll_comment_submit),
+                                h('button.cp-app-poll-comments-add-cancel.btn.btn-secondary',
+                                    Msg.cancel)
+                            ]),
+                            h('h2#cp-app-poll-comments-list-title', Msg.poll_comment_list),
+                            h('div#cp-app-poll-comments-list')
+                        ]),
+                        h('div#cp-app-poll-nocomments', Msg.poll_comment_disabled)
                     ])
                 ])
-            ]),
-            loadingScreen()
-        ];
-    };
-
-    Pages['/drive/'] = Pages['/drive/index.html'] = function () {
-        return loadingScreen();
-    };
-
-    Pages['/file/'] = Pages['/file/index.html'] = function () {
-        return loadingScreen();
-    };
-
-    Pages['/contacts/'] = Pages['/contacts/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();
-    };
-
-    Pages['/invite/'] = Pages['/invite/index.html'] = function () {
-        return loadingScreen();
-    };
-
-    Pages['/settings/'] = Pages['/settings/index.html'] = function () {
-        return [
-            h('div#toolbar'),
-            h('div#container'),
-            loadingScreen()
-        ];
-    };
-
-    Pages['/profile/'] = Pages['/profile/index.html'] = function () {
-        return [
-            h('div#toolbar'),
-            h('div#container'),
-            loadingScreen()
-        ];
-    };
-
-    Pages['/todo/'] = Pages['/todo/index.html'] = function () {
-        return [
-            h('div#toolbar'),
-            h('div#container'),
-            loadingScreen()
+            ])
         ];
     };
 

customize.dist/src/less/bar.less

@@ -1,92 +0,0 @@
-/* Bottom Bar */
-@import (once) "../less2/include/colortheme.less";
-
-.top-bar, .bottom-bar {
-    position:fixed;
-    height:4%;
-    height: 2.5em;
-
-    display: inline-block;
-    width: 100%;
-    background: @base;
-    border-top: 1px solid @cp-outline;
-
-    a {
-        color: @cp-green;
-        text-decoration: none;
-    }
-    p {
-        margin: -1px;
-        font-family: @colortheme_font;
-
-        font-size: 20px;
-        display:block;
-        margin-left: 10px;
-        padding-top:3px;
-        color: @fore;
-    }
-    img {
-        margin-right: 4px;
-        position: relative;
-    }
-
-    .big {
-        @media screen and (max-width: @media-not-big) {
-            display: none;
-        }
-        @media screen and (min-width: @media-not-small) {
-            display: inline-block;
-        }
-    }
-    .small {
-        @media screen and (max-width: @media-not-big) {
-            display: inline-block;
-        }
-        @media screen and (min-width: @media-not-small) {
-            display: none;
-        }
-        img {
-            height: 1.25em;
-        }
-    }
-
-}
-.bottom-bar {
-    bottom: 0px;
-    right: 0px;
-}
-.top-bar {
-    top: 0px;
-    right: 0px;
-}
-
-.bottom-bar-left {
-    display:block;
-    float:left;
-    padding-left:10px;
-}
-.bottom-bar-left p {
-    float: right;
-}
-.bottom-bar-right {
-    display:block;
-    float:right;
-    padding-right:20px
-}
-.bottom-bar-center {
-    width: 20%;
-    position: absolute;
-    left: 40%;
-    text-align: center;
-}
-.bottom-bar-heart {
-    top: 2px;
-}
-.bottom-bar-xwiki {
-    top: 3px;
-}
-.bottom-bar-openpaas {
-    top: 3px;
-    max-width: 100px;
-}
-

customize.dist/src/less/cryptpad.less

@@ -1,689 +0,0 @@
-@import "./variables.less";
-@import "./mixins.less";
-
-@import "../less2/include/alertify.less";
-@import "../less2/include/colortheme.less";
-@import "../less2/include/modal.less";
-@import "../less2/include/font.less";
-@import "./bar.less";
-@import "./loading.less";
-@import "./dropdown.less";
-@import "./topbar.less";
-@import "./footer.less";
-
-@toolbar-green: #5cb85c;
-
-.font_open-sans();
-
-.alertify_main();
-
-html.cp, .cp body {
-    font-size: .875em;
-    background-color: @page-white; //@base;
-    color: @fore;
-
-    height: 100%;
-}
-.fa {
-    cursor: default; // Fix for Edge displaying the text cursor on every icon
-}
-
-.cp {
-
-// add font for tooltips
-.tippy-popper {
-    font: 16px @colortheme_font;
-}
-
-// override bootstrap colors
-.btn-primary {
-    background-color: @cp-blue;
-    &:hover {
-        color: #fff;
-        background-color: #025aa5;
-        border-color: #01549b;
-    }
-}
-
-body {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 2rem;
-    margin: 0;
-}
-
-a.github-corner > svg {
-    fill: @cp-blue;
-    color: @old-base;
-}
-
-.lato {
-    font-family: lato, Helvetica, sans-serif;
-    font-size: 1.02em;
-}
-
-.unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-h1,h2,h3,h4,h5,h6 {
-    color: @fore;
-
-    font-family: @colortheme_font;
-    -webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
-    -moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
-    font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
-    font-style: normal;
-    font-weight: 600;
-    margin-top: 0;
-}
-
-h1 {
-    line-height: 3rem;
-    font-size: 2.05714rem;
-    margin-bottom: .21999rem;
-    padding-top: .78001rem;
-}
-
-h2 {
-    font-size: 1.95312rem;
-    margin-bottom: .18358rem;
-    padding-top: .81642rem;
-}
-
-h2,h3 {
-    line-height: 3rem;
-}
-
-h3 {
-    font-size: 1.64571rem;
-    margin-bottom: .07599rem;
-    padding-top: .92401rem;
-}
-
-h4 {
-    font-size: 1.5625rem;
-    margin-bottom: .54686rem;
-    padding-top: .45314rem;
-}
-
-h5 {
-   font-size: 1.25rem;
-    margin-bottom: -.56251rem;
-    padding-top: .56251rem;
-}
-
-h6 {
-    font-size: 1rem;
-    margin-bottom: -.65001rem;
-    padding-top: .65001rem;
-}
-
-p {
-    a:not(.btn) {
-        cursor: pointer;
-        color: @cp-link;
-
-        text-decoration: none;
-
-        &:hover {
-            color: @cp-link-hover;
-        }
-        &:visited {
-            color: @cp-link-visited;
-        }
-    }
-}
-a.btn {
-    font-family: sans-serif;
-}
-
-img {
-    height: auto;
-    max-width: 100%;
-}
-
-p {
-    padding-top: .66001rem;
-    margin-top: 0;
-}
-
-p,pre {
-    margin-bottom: 1.33999rem;
-}
-
-p, pre, td, a, table, tr {
-    .lato;
-}
-
-body.html {
-    display:flex;
-    flex-flow: column;
-}
-
-// Main page
-.page {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    background: @page-white;
-    padding: 10px 0;//@main-border-width;
-    position: relative;
-
-    .info-container {
-        color: #121212;
-        width: 800px;
-        max-width: 100%;
-        margin: 0 auto;
-        &>div{
-            padding: 10px;
-            width: 400px;
-            max-width: 100%;
-            position: relative;
-            display: inline-block;
-            vertical-align: middle;
-            &:not(.image) {
-                @media screen and (max-width: @media-not-big) {
-                    width: 100%;
-                    left: 0;
-                }
-            }
-            &.image {
-                width:300px;
-                text-align: center;
-                @media screen and (max-width: @media-not-big) {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    &.first {
-        //margin-top: ~"min(calc(100vh - 150px), 650px)";
-        @media screen and (max-width: @media-not-big) {
-            //margin-top: 0;
-        }
-    }
-    &.even {
-        //background: darken(@base, 1%);
-    }
-    &.category {
-        background: @category-bg;
-    }
-
-    .app {
-        display: inline-block;
-        width: 300px;
-        vertical-align: middle;
-        margin: 0px 25px;
-        white-space: normal;
-        max-width: ~"calc(50% - 50px)";
-        @media screen and (max-width: 500px) {
-            display: block;
-            max-width: 100%;
-            margin: 0 auto;
-        }
-    }
-    .app-container {
-        width: 1400px;
-        max-width: 100%;
-        margin: 0 auto;
-    }
-    .app-row {
-        display: flex;
-        justify-content: center;
-        flex-flow: row wrap;
-        max-width: 100%;
-        margin: 0 auto;
-        @media screen and (max-width: 1399px) {
-            display: flex;
-        }
-        img {
-            @media screen and (max-width: @media-not-big) {
-                display: none;
-            }
-        }
-    }
-
-    .left {
-        //left: 10%; //@main-border-width;
-    }
-    .right {
-        left: 100px; //@main-border-width;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        padding: 0;
-    }
-
-    @media screen and (max-width: @media-not-big) {
-        padding: 10px 5vh;
-    }
-
-    p {
-        font-size: 18px;
-        //text-align: justify;
-    }
-}
-
-.btn-default {
-    &:hover {
-        background-color: #d8d8d8;
-    }
-}
-
-#main {
-    .mainOverlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #000;
-        opacity: 0.35;
-    }
-}
-noscript {
-    #noscriptContainer {
-        color: black;
-        position: absolute;
-        top: @topbar-height;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 2;
-        #noscript {
-            width: 1000px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            margin-left: auto;
-            margin-right: auto;
-            position: relative;
-            font-size: 25px;
-            text-align: center;
-            color: @main-color;
-        }
-    }
-}
-#main {
-    background: @main-bg;
-    background-size: cover;
-    background-attachment: fixed;
-    background-position: center;
-    height: ~"calc(100vh - 115px)";
-    min-height: 450px;
-    .hidden {
-        display: none !important;
-    }
-}
-#main_other {
-    padding: 0 @main-border-width;
-    background-color: @page-white;
-}
-
-.category {
-    margin-top: 5px;
-}
-
-#mainBlock {
-    flex: 1;
-}
-
-#main, #main_other {
-    position: relative;
-    left: 0;
-    right: 0;
-    margin: auto;
-    z-index: 1;
-
-    font-size: medium;
-
-    #align-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        width: 1000px;
-        max-width: 90%;
-        position: relative;
-    }
-
-    #main-container {
-        display: inline-block;
-    }
-
-    #userForm .extra {
-        p {
-            font-size: 28px;
-            padding: 15px;
-            text-align: center;
-        }
-    }
-
-    #data {
-        p {
-            margin: 0;
-            padding: 0;
-            font-size: 28px;
-            line-height: 1.5em;
-            &.register-explanation {
-                font-size: 18px;
-            }
-        }
-        h1, h2 {
-            font-weight: normal;
-            font-size: 48px;
-            line-height: 1.2em;
-            color: @main-color;
-            padding: 0;
-        }
-
-        h5 {
-            font-size: 1em;
-            color: @main-color;
-        }
-        width: 600px;
-        max-width: 60%;
-        color: @main-color;
-        padding: 0 15px;
-        box-sizing: border-box;
-        display: inline-block;
-
-        #tryit {
-            margin-top: 20px;
-            margin-bottom: 5px;
-        }
-    }
-
-    #loggedIn {
-        float: right;
-        color: @main-color;
-        display: inline-block;
-        width: 350px;
-        max-width: 35%;
-        text-align: center;
-        font-weight: bold;
-        button {
-            font-weight: bold;
-            cursor: pointer;
-        }
-        p {
-            margin: 20px;
-            padding: 0;
-            font-size: 20px;
-            line-height: 1.5em;
-        }
-
-    }
-
-    #userForm {
-        float: right;
-        display: inline-block;
-        width: 400px;
-        max-width: 40%;
-        padding: 10px;
-        box-sizing: border-box;
-        font-family: @colortheme_font;
-        color: @main-color;
-
-        label {
-            margin-bottom: 0;
-            margin-left: 5px;
-            vertical-align: middle;
-        }
-
-        button {
-            font-weight: bold;
-            width: 100%;
-            cursor: pointer;
-            &.half {
-                width: ~"calc(50% - 10px)";
-                &:not(.first) {
-                    float: right;
-                }
-            }
-        }
-
-        p {
-            margin: 0;
-            padding: 0;
-            &.buttons {
-                margin-bottom: 10px;
-                .dropdown-bar {
-                    button {
-                        white-space: normal;
-                        text-align: left;
-                        .fa {
-                            float: right;
-                        }
-                    }
-                    a {
-                        color: black;
-                        &:hover, :visited {
-                            color: black !important;
-                        }
-                    }
-                    display: block;
-                }
-            }
-            &.separator {
-                margin: 5px 0 15px 0;
-                text-align: center;
-                font-weight: bold;
-                font-size: 1.1em;
-            }
-            a {
-                color: @main-color;
-                font-weight:bold;
-                font-size: 14px;
-                &:hover, :visited {
-                    color: @main-color !important;
-                }
-            }
-        }
-
-        .driveLink {
-            padding-left: 1rem; //Bootstrap padding in buttons
-            font-size: 1em;
-        }
-
-        &> * {
-            margin-bottom: 10px;
-        }
-    }
-    @media screen and (max-width: @media-not-big) {
-        #align-container {
-            transform: initial;
-            position: relative;
-            display: block;
-            width: 90%;
-            left: 0;
-        }
-        #main-container {
-            position: relative;
-            transform: unset;
-            top:0;
-
-        }
-        #data {
-            text-align: center;
-        }
-        #userForm, #loggedIn, #data {
-            transform: initial;
-            position: relative;
-            display: block;
-            width: 100%;
-            max-width: 100%;
-            margin: 10px 0;
-            box-sizing: border-box;
-            float: none;
-        }
-        #userForm, #loggedIn {
-            //border: 1px solid #888;
-        }
-        position: relative;
-        height: auto;
-    }
-
-    .buttons {
-        margin-top: 15px;
-    }
-}
-
-/* buttons */
-
-.create, .action {
-    display: inline-block;
-    @thick: 2px;
-    border: 0;
-    background-color: @cp-darkblue;
-    color: @topbar-button-color;
-
-    font-weight: bold;
-    font-size: large;
-    margin-right: 5px;
-    margin-left: 5px;
-    &:hover {
-        color: darken(@topbar-button-color, 20%);
-    }
-}
-
-// currently only used in /user/
-.panel {
-    background-color: @dark-base;
-}
-
-/*  Tables
- *  Currently only used by /poll/
- */
-
-// form things
-.bottom-left {
-    .bottom-left;
-}
-
-.top-left {
-    .top-left;
-}
-
-.remove {
-    color: @cp-red;
-    cursor: pointer !important;
-}
-}
-
-/* Pin limit */
-.limit-container {
-    display: inline-flex;
-    flex-flow: column-reverse;
-    width: 100%;
-    margin-top: 20px;
-    .cryptpad-limit-bar {
-        display: inline-block;
-        max-width: 100%;
-        margin: 3px;
-        box-sizing: border-box;
-        border: 1px solid #999;
-        background: white;
-        position: relative;
-        text-align: center;
-        vertical-align: middle;
-        width: ~"calc(100% - 6px)";
-        height: 25px;
-        line-height: 25px;
-        overflow: hidden;
-        .usage {
-            height: 100%;
-            display: inline-block;
-            background: blue;
-            position: absolute;
-            left: 0;
-            z-index:1;
-            &.normal {
-                background: @toolbar-green;
-            }
-            &.warning {
-                background: orange;
-            }
-            &.above {
-                background: red;
-            }
-        }
-        .usageText {
-            position: relative;
-            color: black;
-            text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
-            z-index: 2;
-            font-size: @main-font-size;
-            font-weight: bold;
-        }
-    }
-    .upgrade {
-        padding: 0;
-        line-height: 25px;
-        height: 25px;
-        margin: 0 3px;
-        border-radius: 0;
-    }
-}
-
-/* Upload status table */
-#uploadStatusContainer {
-    .modal_base();
-    position: absolute;
-    left: 10vw; right: 10vw;
-    bottom: 10vh;
-    opacity: 0.9;
-    box-sizing: border-box;
-    z-index: 10000;
-    display: none;
-    #uploadStatus {
-        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;
-        }
-        .upProgress {
-            width: 200px;
-            position: relative;
-            text-align: center;
-            box-sizing: border-box;
-        }
-        .progressContainer {
-            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;
-        }
-        .upCancel { text-align: center; }
-        .fa.cancel {
-            color: rgb(255, 0, 115);
-        }
-    }
-}
-
-// hack for our cross-origin iframe
-#cors-store {
-    display: none;
-}

customize.dist/src/less/dropdown.less

@@ -1,115 +0,0 @@
-@import (once) "../less2/include/colortheme.less";
-
-/* The container <div> - needed to position the dropdown content */
-.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/footer.less

@@ -1,30 +0,0 @@
-@import "./variables.less";
-@import (once) "../less2/include/colortheme.less";
-
-footer {
-    background: @category-bg;
-    font-family: @colortheme_font;
-    padding-top: 1em;
-    font-size: 1.2em;
-    a {
-        color: @cp-link;
-        &:visited {
-            color: @cp-link-visited;
-        }
-        &:hover {
-            color: @cp-link-hover;
-        }
-    }
-    li.title {
-        font-size: 1.2em;
-        font-weight: bold;
-    }
-    div.version-footer {
-        background-color: @old-base;
-        color: @old-fore;
-        text-align: center;
-        width: 100%;
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-}

customize.dist/src/less/loading.less

@@ -1,60 +0,0 @@
-@import "./variables.less";
-@import (once) "../less2/include/colortheme.less";
-
-.cp #loading {
-    position: fixed;
-    z-index: 9999;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background: @bg-loading;
-    color: @color-loading;
-    text-align: center;
-    font-size: 1.5em;
-    .loadingContainer {
-        margin-top: 50vh;
-        transform: translateY(-50%);
-    }
-    .cryptofist {
-        margin-left: auto;
-        margin-right: auto;
-        height: 300px;
-        margin-bottom: 2em;
-        @media screen and (max-height: @media-short-screen) {
-            display: none;
-        }
-    }
-    .spinnerContainer {
-        position: relative;
-        height: 100px;
-        > div {
-            height: 100px;
-        }
-    }
-}
-.cp #loadingTip {
-    position: fixed;
-    z-index: 99999;
-    top: 80%;
-    left: 0;
-    right: 0;
-    text-align: center;
-
-    transition: opacity 750ms;
-    transition-delay: 3000ms;
-    @media screen and (max-height: @media-medium-screen) {
-        display: none;
-    }
-    span {
-        background-color: @bg-loading;
-        color: @color-loading;
-        text-align: center;
-        font-size: 1.5em;
-        opacity: 0.7;
-        font-family: @colortheme_font;
-        padding: 15px;
-        max-width: 60%;
-        display: inline-block;
-    }
-}

customize.dist/src/less/mixins.less

@@ -1,212 +0,0 @@
-@import "/customize/src/less/variables.less";
-
-.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
-    @font-face {
-        font-family: @family;
-        src: url(@src) format(@fmt);
-        font-weight: @weight;
-        font-style: @style;
-    }
-}
-
-.transform(...) {
-    -webkit-transform: @arguments;
-    -moz-transform: @arguments;
-    -o-transform: @arguments;
-    -ms-transform: @arguments;
-    transform: @arguments;
-}
-
-.translate(@x:0, @y:0) {
-    .transform(translate(@x, @y));
-}
-
-.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
-.top-left(@s: 5px) { border-top-left-radius: @s; }
-
-.size (@n) {
-    // font-size: @n * 1vmin;
-    // line-height: @n * 1.1vmin;
-    font-size: @n * 10%;
-    // line-height: @n * 11%;
-    line-height: 110%;
-}
-
-.two-part-gradient (@start, @end) {
-    background: -webkit-linear-gradient(@start, @end); /* For Safari 5.1 to 6.0 */
-    background: -o-linear-gradient(@start, @end); /* For Opera 11.1 to 12.0 */
-    background: -moz-linear-gradient(@start, @end); /* For Firefox 3.6 to 15 */
-    background: linear-gradient(@start, @end); /* Standard syntax */
-}
-
-.placeholderColor (@color) {
-    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-        color: @color;;
-    }
-    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-        color: @color;
-        opacity: 1;
-    }
-    &::-moz-placeholder { /* Mozilla Firefox 19+ */
-        color: @color;
-        opacity: 1;
-    }
-    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-        color: @color;
-    }
-    &::-ms-input-placeholder { /* Microsoft Edge */
-        color: @color;
-    }
-}
-
-.avatar (@width) {
-    &.avatar {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    &.clickable {
-        cursor: pointer;
-        &:hover {
-            background-color: rgba(0,0,0,0.3);
-        }
-    }
-    .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;
-    }
-    .default {
-        .unselectable();
-        background: white;
-        color: black;
-        font-size: @width/1.2;
-    }
-    .right-col {
-        order: 10;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: flex;
-        flex-flow: column;
-        .name {
-            flex: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-        .friend {
-            padding: 0;
-        }
-    }
-    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
-        }
-    }
-    }
-}
-
-.leftsideCategory {
-    .unselectable();
-    padding: 5px 20px;
-    margin: 15px 0;
-    cursor: pointer;
-    height: @toolbar-line-height;
-    line-height: @toolbar-line-height - 10px;
-    .fa {
-        width: 25px;
-    }
-    &:hover {
-        background: rgba(0,0,0,0.05);
-    }
-    &.active {
-        background: white;
-    }
-}
-
-.fileIcon {
-    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;
-
-        &:not(.selected):not(.selectedTmp) {
-            border: 1px solid #CCC;
-        }
-        .name {
-            width: 100%;
-            height: 48px;
-            margin: 8px 0;
-            display: inline-block;
-            //align-items: center;
-            //justify-content: center;
-            overflow: hidden;
-            //text-overflow: ellipsis;
-            word-wrap: break-word;
-        }
-        .truncated {
-            display: block;
-            position: absolute;
-            bottom: 0px;
-            left: 0; right: 0;
-            text-align: center;
-        }
-        img.icon {
-            height: 48px;
-            max-height: none;
-            max-width: none;
-            margin: 8px 0;
-        }
-        .fa {
-            display: block;
-            margin: auto;
-            font-size: 48px;
-            margin: 8px 0;
-            text-align: center;
-            &.listonly {
-                display: none;
-            }
-        }
-    }
-}
-
-.sidebarButton {
-    button.btn {
-        background-color: @button-bg;
-        border-color: darken(@button-bg, 10%);
-        color: white;
-        &:hover {
-            background-color: darken(@button-bg, 10%);
-        }
-        &.btn-danger {
-            background-color: @button-red-bg;
-            border-color: darken(@button-red-bg, 10%);
-            color: white;
-            &:hover {
-                background-color: darken(@button-red-bg, 10%);
-            }
-        }
-    }
-}

customize.dist/src/less/sidebar-layout.less

@@ -1,79 +0,0 @@
-@import '/customize/src/less/variables.less';
-@import '/customize/src/less/mixins.less';
-
-@leftside-bg: #eee;
-@leftside-color: #000;
-@rightside-color: #000;
-@description-color: #777;
-
-@button-width: 400px;
-
-
-.cp {
-    input[type="text"] {
-        padding-left: 10px;
-    }
-    #container {
-        font-size: 16px;
-        display: flex;
-        flex: 1;
-        min-height: 0;
-        #leftSide {
-            color: @leftside-color;
-            width: 250px;
-            background: @leftside-bg;
-            display: flex;
-            flex-flow: column;
-            .categories {
-                flex: 1;
-                .category {
-                    .leftsideCategory();
-                }
-            }
-        }
-        #rightSide {
-            flex: 1;
-            padding: 5px 20px;
-            color: @rightside-color;
-            overflow: auto;
-            .element {
-                label:not(.noTitle), .label {
-                    display: block;
-                    font-weight: bold;
-                    margin-bottom: 0;
-                }
-                .description {
-                    display: block;
-                    color: @description-color;
-                    margin-bottom: 5px;
-                }
-                margin-bottom: 20px;
-            }
-            [type="text"], button {
-                vertical-align: middle;
-                height: 40px;
-                box-sizing: border-box;
-            }
-            .inputBlock {
-                display: inline-flex;
-                width: @button-width;
-                input {
-                    flex: 1;
-                    border-radius: 0.25em 0 0 0.25em;
-                    border: 1px solid #adadad;
-                    border-right: 0px;
-                }
-                button {
-                    border-radius: 0 0.25em 0.25em 0;
-                    //border: 1px solid #adadad;
-                    border-left: 0px;
-                }
-            }
-            &>div {
-                margin: 10px 0;
-            }
-            .sidebarButton;
-        }
-    }
-}
-

customize.dist/src/less/topbar.less

@@ -1,96 +0,0 @@
-@import "./variables.less";
-@import (once) "../less2/include/colortheme.less";
-
-#cryptpadTopBar {
-    background: @topbar-back;
-    position: relative;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: @topbar-height;
-    color: @topbar-color;
-    font-family: @colortheme_font;
-    padding: 5px;
-    box-sizing: border-box;
-    font-size: 30px;
-
-    border-bottom: 1px solid darken(@topbar-back, 15%);
-
-    &> span {
-        vertical-align: middle;
-        display: inline-block;
-        height: 100%;
-    }
-    .cryptpad-logo {
-        height: 40px;
-        vertical-align: middle;
-    }
-
-    .slogan {
-        font-size: 20px;
-        color: @topbar-color;
-        line-height: 40px;
-    }
-
-    .gotoMain {
-        color: @topbar-color;
-        height: 40px;
-        line-height: 40px;
-        &:hover {
-            text-decoration: none;
-            color: @cp-purple;
-        }
-    }
-
-    .right {
-        float: right;
-        font-size: 20px;
-        margin: 0px 10px;
-        line-height: 40px;
-
-        .buttonSuccess {
-            // Bootstrap 4 colors
-            color: #fff;
-            background: @toolbar-green;
-            border-color: @toolbar-green;
-            &:hover {
-                color: #fff;
-                background: #449d44;
-                border: 1px solid #419641;
-            }
-            span {
-                color: #fff;
-            }
-            .large {
-                margin-left: 5px;
-            }
-        }
-
-        button {
-            .buttonTitle {
-                .fa-user {
-                    margin-right: 5px;
-                }
-            }
-        }
-        &.link a {
-            font-weight: 500;
-            font-size: 0.75em;
-            color: @cp-link;
-
-            &:hover {
-                color: @cp-link-hover;
-                text-decoration: underline;
-            }
-            &:visited {
-                color: @cp-link-visited;
-            }
-        }
-
-        &.link {
-            @media screen and (max-width: @media-not-big) {
-                display: none;
-            }
-        }
-    }
-}

customize.dist/src/less/variables.less

@@ -1,118 +0,0 @@
-@import (once) '../less2/include/colortheme.less';
-@import (once) '../less2/include/browser.less';
-
-@base: @colortheme_base;
-@dark-base: darken(@base, 20%);
-@less-dark-base: darken(@base, 10%);
-@light-base: @colortheme_light-base;
-@less-light-base: lighten(@base, 10%);
-@fore: #555;
-@old-base: @colortheme_old-base;
-@old-fore: @colortheme_old-fore;
-
-@main-font-size: 16px;
-
-@cp-green: @colortheme_cp-green;
-@cp-accent: lighten(@cp-green, 20%);
-
-@cp-red: @colortheme_cp-red;
-@cp-outline: #444;
-
-@cp-orange: #FE9A2E;
-
-@cp-blue: #00CFC1;
-@cp-blue: #00ADEE;
-@cp-light-blue: #41b7d8; // lighten(@cp-blue, 20%);
-
-@cp-purple: #558;
-
-@page-white: #fafafa;
-
-// links
-@cp-link: @cp-light-blue;
-@cp-link-visited: @cp-light-blue;
-@cp-link-hover: darken(@cp-light-blue, 10%);
-
-
-@slide-default-bg: #000;
-
-@bg-loading: #222;
-@color-loading: @old-fore;
-
-@media-not-big: @browser_media-not-big;
-@media-not-small: @browser_media-not-small;
-
-@media-short-screen: @browser_media-short-screen;
-@media-narrow-screen: @browser_media-narrow-screen;
-@media-medium-screen: @browser_media-medium-screen;
-
-
-// Dropdown
-
-@dropdown-font: @main-font-size @colortheme_font;
-@dropdown-bg: #f9f9f9;
-@dropdown-color: black;
-@dropdown-bg-hover: #f1f1f1;
-@dropdown-bg-active: #e8e8e8;
-
-// Toolbar
-
-@toolbar-button-font: @dropdown-font;
-
-@toolbar-pad-bg: @colortheme_pad-bg;
-@toolbar-pad-color: @colortheme_pad-color;
-@toolbar-slide-bg: @colortheme_slide-bg;
-@toolbar-slide-color: @colortheme_slide-color;
-@toolbar-code-bg: @colortheme_code-bg;
-@toolbar-code-color: @colortheme_code-color;
-@toolbar-poll-bg: @colortheme_poll-bg;
-@toolbar-poll-color: @colortheme_poll-color;
-@toolbar-whiteboard-bg: @colortheme_whiteboard-bg;
-@toolbar-whiteboard-color: @colortheme_whiteboard-color;
-@toolbar-drive-bg: @colortheme_drive-bg;
-@toolbar-drive-color: @colortheme_drive-color;
-@toolbar-file-bg: @colortheme_file-bg;
-@toolbar-file-color: @colortheme_file-color;
-@toolbar-friends-bg: @colortheme_friends-bg;
-@toolbar-friends-color: @colortheme_friends-color;
-@toolbar-default-bg: @colortheme_default-bg;
-@toolbar-default-color: @colortheme_default-color;
-@toolbar-settings-bg: @colortheme_settings-bg;
-@toolbar-settings-color: @colortheme_settings-color;
-@toolbar-profile-bg: @colortheme_profile-bg;
-@toolbar-profile-color: @colortheme_profile-color;
-@toolbar-todo-bg: #7bccd1;
-@toolbar-todo-color: #000;
-
-@topbar-back: #fff;
-@topbar-color: #000;
-@topbar-button-bg: #2E9AFE;
-@topbar-button-color: #fff;
-@topbar-height: 50px;
-
-@toolbar-top-height: 64px;
-
-@main-border-width: 15vw;
-@cp-darkblue: #3333ff;
-@cp-accent2: darken(@cp-darkblue, 20%);
-
-@main-block-bg: rgba(200, 200, 200, 0.3);
-@main-color: #fff;
-@main-bg: url('/customize/bg4.jpg') no-repeat center center;
-
-@category-bg: #f4f4f4;
-
-@button-bg: #3066e5;
-@button-alt-bg: #fff;
-@button-red-bg: #e54e4e;
-
-.unselectable () {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-@toolbar-line-height: 32px;

customize.dist/src/less2/404.less

@@ -0,0 +1,40 @@
+@import (once) './include/font.less';
+.font_neuropolitical();
+.font_open-sans();
+
+body.cp-page-index { @import "./pages/page-index.less"; }
+body.cp-page-contact { @import "./pages/page-contact.less"; }
+body.cp-page-login { @import "./pages/page-login.less"; }
+body.cp-page-register { @import "./pages/page-register.less"; }
+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";
+    .app-noscroll_main();
+}
+// Set the HTML style for printing slides
+html.cp-app-print {
+    @import "./include/app-print.less";
+    .app-print_main();
+}
+
+body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
+
+body.cp-app-drive { @import "../../../drive/app-drive.less"; }
+body.cp-app-pad { @import "../../../pad/app-pad.less"; }
+body.cp-app-code { @import "../../../code/app-code.less"; }
+body.cp-app-slide { @import "../../../slide/app-slide.less"; }
+body.cp-app-file { @import "../../../file/app-file.less"; }
+body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
+body.cp-app-contacts {   @import "../../../contacts/app-contacts.less";    }
+body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
+body.cp-app-todo { @import "../../../todo/app-todo.less"; }
+body.cp-app-profile { @import "../../../profile/app-profile.less"; }
+body.cp-app-settings { @import "../../../settings/app-settings.less"; }
+body.cp-app-debug { @import "../../../debug/app-debug.less"; }
+

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

@@ -1,7 +1,9 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 @import (once) "./browser.less";
+@import (once) "./variables.less";
 
 .alertify_main () {
+    @max-z-index: 2147483647;
     @alertify-fore: @colortheme_modal-fg;
     @alertify-base: @colortheme_modal-bg;
 
@@ -19,13 +21,14 @@
     @alertify-input-bg: @colortheme_modal-input;
     @alertify-input-fg: @colortheme_modal-fg;
 
-    @alertify_padding-base: @colortheme_modal-padding;
-    @alertify_box-shadow: @colortheme_modal-shadow;
+    @alertify_padding-base: @variables_padding;
+    @alertify_box-shadow: @variables_shadow;
 
     // Logs to show that something has happened
     // These show only once
 
     .alertify-logs {
+        z-index: 10000; // alertify logs
         @media print {
             visibility: hidden;
         }
@@ -61,7 +64,16 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        z-index: 99999;
+        z-index: 100000; // alertify container
+        &.forefront {
+            z-index: @max-z-index; // alertify max forefront
+        }
+
+        .message {
+            h1, h2, h3, h4, h5, h6 {
+                color: @alertify-fg;
+            }
+        }
 
         h1, h2, h3 {
             margin-top: 0;
@@ -83,6 +95,20 @@
 
         .dialog {
             padding: 12px;
+/*
+            div.tokenfield {
+                .token {
+                    //border: 1px solid red;
+                    //color: red;
+                }
+
+                color: @colortheme_light-base;
+                background-color: @alertify-dialog-bg;
+
+                input[id$="tokenfield"][type="text"].token-input {
+                    background-color: @alertify-dialog-bg !important;
+                }
+            }*/
         }
 
         .dialog, .alert {
@@ -99,6 +125,8 @@
                         width: 100%;
                     }
                 }
+                display: flex;
+                flex-flow: column;
             }
 
             width: 100%;
@@ -106,10 +134,12 @@
             position: relative;
             top: 50%;
             transform: translateY(-50%);
+            max-height: 100%;
+            display: flex;
 
             > * {
                 width: 100%;
-                min-width: 300px;
+                min-width: 260px;
                 max-width: 500px;
                 margin: 0 auto;
                 text-align: left;
@@ -122,26 +152,73 @@
                 padding: @alertify_padding-base;
                 margin-bottom: @alertify_padding-base;
                 margin: 0;
+                overflow: auto;
+            }
+            .alertify-tabs {
+                max-height: 100%;
+                display: flex;
+                flex-flow: column;
+                .alertify-tabs-titles {
+                    height: 30px;
+                    display: flex;
+                    border-bottom: 1px solid @alertify-fore;
+                    margin-bottom: 20px;
+                    box-sizing: content-box;
+                    span {
+                        font-size: 20px;
+                        height: 30px;
+                        line-height: 30px;
+                        box-sizing: border-box;
+                        padding: 0 15px;
+                        border-left: 1px solid lighten(@alertify-base, 10%);
+                        border-right: 1px solid lighten(@alertify-base, 10%);
+                        cursor: pointer;
+                    }
+                    span.alertify-tabs-active {
+                        background-color: @alertify-fore;
+                        border-left: 1px solid @alertify-fore;
+                        border-right: 1px solid @alertify-fore;
+                        color: @alertify-base;
+                        font-weight: bold;
+                        cursor: default;
+                    }
+                }
+                .alertify-tabs-contents {
+                    flex: 1 1 auto;
+                    min-height: 0;
+                    & > div {
+                        max-height: 100%;
+                        display: none;
+                        overflow: auto;
+                    }
+                    & > div.alertify-tabs-content-active {
+                        display: block;
+                    }
+                }
             }
 
             input:not(.form-control), textarea {
                 background-color: @alertify-input-bg;
-                color: @alertify-input-fg; 
+                color: @alertify-input-fg;
                 border: 0px;
 
                 margin-bottom: 15px;
                 width: 100%;
                 font-size: 100%;
                 padding: @alertify_padding-base;
-                &:focus {
-                    //outline-offset: -2px;
-                }
             }
 
-            input[type="checkbox"] {
+            input[type="checkbox"], input[type="radio"] {
+                width: auto;
                 padding: 0;
-                margin: 0;
                 margin-right: 0.5em;
+                margin-top: 1px;
+                margin-bottom: 5px;
+                vertical-align: middle;
+                & + label {
+                    margin-bottom: 0;
+                    margin-right: 2em;
+                }
             }
 
             nav {
@@ -154,7 +231,6 @@
                     box-sizing: border-box;
                     position: relative;
                     outline: 0;
-                    border: 0;
                     display: inline-block;
                     align-items: center;
                     padding: 0 6px;
@@ -192,6 +268,14 @@
                         }
                     }
 
+                    &.primary {
+                        background-color: @colortheme_alertify-primary;
+                        color: @colortheme_alertify-primary-text;
+                        &:hover, &:active {
+                            background-color: darken(@colortheme_alertify-primary, 10%);
+                        }
+                    }
+
                     &:hover, &:active {
                         background-color: @alertify-btn-bg-hover;
                     }
@@ -200,7 +284,7 @@
                         border: 1px dotted @alertify-base;
                     }
                     &::-moz-focus-inner {
-                        border:0;
+                        border: 0;
                     }
                 }
 
@@ -214,11 +298,11 @@
     .alertify-logs {
 
         position: fixed;
-        z-index: 99999;
+        z-index: 99999; // alertify logs
 
         &.bottom, &:not(.top) {
             bottom: 16px;
-            // Bottom left placement. Default. Use for transitions.
+            /* // Bottom left placement. Default. Use for transitions.
             &.left, &:not(.right) {
                 > * {
 
@@ -229,7 +313,7 @@
                 > * {
 
                 }
-            }
+            }*/
         }
 
         // All left positions.
@@ -267,7 +351,7 @@
 
         &.top {
             top: 0;
-            // Top left placement, use for transitions.
+            /* // Top left placement, use for transitions.
             &.left, &:not(.right) {
                 > * {
 
@@ -278,7 +362,7 @@
                 > * {
 
                 }
-            }
+            }*/
         }
 
         > * {
@@ -306,6 +390,5 @@
                 pointer-events: auto;
             }
         }
-
     }
 }

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

@@ -0,0 +1,20 @@
+// html
+.app-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/app-print.less

@@ -0,0 +1,46 @@
+.app-print_main () {
+    // Current scope is <html>
+    @media print {
+        height: auto;
+        max-height: none;
+        overflow: visible;
+        display: block;
+        @page {
+            margin: 0;
+            size: landscape;
+        }
+        // Slide app
+        body.cp-app-slide {
+            display: block;
+            .CodeMirror, #cme_toolbox {
+                display: none;
+            }
+            * {
+                visibility: hidden;
+                height: auto;
+                max-height: none;
+            }
+            .cp-app-slide-viewer #cp-app-slide-print {
+                display: block;
+                visibility: visible;
+                * {
+                    visibility: visible;
+                }
+            }
+            .cp-app-slide-viewer #cp-app-slide-modal {
+                display: none !important;
+            }
+            .cp-app-slide-viewer {
+                flex: 1 !important;
+                overflow: visible !important;
+            }
+            .cp-toolbar-userlist-drawer {
+                display: none !important;
+            }
+            #cp-app-slide-editor {
+                height: auto;
+                display: block;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+@import (once) "./tools.less";
+
+.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 {
+        .tools_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/checkmark.less

@@ -0,0 +1,67 @@
+@import (once) "./colortheme-all.less";
+
+.checkmark_main(@size) {
+
+    @width: round(@size / 8);
+    @dim1: round(@size / 3);
+    @dim2: round(2 * @size / 3);
+    @top: round(@size / 12);
+    // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
+    .cp-checkmark {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.cp-checkmark-secondary {
+            .cp-checkmark-mark {
+                &:after {
+                    border-color: @colortheme_checkmark-col2;
+                }
+            }
+            input {
+                &:checked ~ .cp-checkmark-mark {
+                    background-color: @colortheme_checkmark-back2;
+                }
+            }
+        }
+        &:hover .cp-checkmark-mark {
+            background-color: @colortheme_checkmark-back0-active;
+        }
+
+        input {
+            display: none;
+            &:checked ~ .cp-checkmark-mark {
+                background-color: @colortheme_checkmark-back1;
+                &:after {
+                    display: block;
+                }
+            }
+        }
+
+        .cp-checkmark-mark {
+            margin-right: 10px;
+            position: relative;
+            height: @size;
+            width: @size;
+            background-color: @colortheme_checkmark-back0;
+            display: flex;
+            justify-content: center;
+            &:after {
+                content: "";
+                display: none;
+                margin-top: @top;
+                width: @dim1;
+                height: @dim2;
+                transform: rotate(45deg);
+                border: solid @colortheme_checkmark-col1;
+                border-width: 0 @width @width 0;
+            }
+        }
+
+    }
+}

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

@@ -0,0 +1,15 @@
+.ckeditor_fix () {
+
+    .cke_reset_all * {
+        color: inherit;
+    }
+    .cke_toolbox_main {
+        display: inline-block;
+    }
+    .cke_toolbox .cp-toolbar-history {
+        input.gotoInput { // TODO
+            padding: 3px 3px;
+        }
+    }
+
+}

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

@@ -0,0 +1,6 @@
+// Don't override/edit this file directly, you can create
+// create a file: customize/src/less2/include/colortheme.less
+// override whatever colors you want. When you update, the new colors will be
+// added ok because the original file is pulled in first.
+@import (once) "/customize.dist/src/less2/include/colortheme.less";
+@import (once) "/customize/src/less2/include/colortheme.less";

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,53 +20,99 @@
 @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_loading-bg: #222;
+@colortheme_loading-color: @colortheme_old-fore;
 
 @colortheme_modal-input: #111;
 
 @colortheme_alertify-red: #E55236;
 @colortheme_alertify-green: #77C825;
+@colortheme_alertify-primary: #fff;
+@colortheme_alertify-primary-text: #000;
 
 @colortheme_notification-log: rgba(0, 0, 0, 0.8);
 @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
 
-// Apps
+@colortheme_dropdown-bg: #f9f9f9;
+@colortheme_dropdown-color: black;
+@colortheme_dropdown-bg-hover: #f1f1f1;
+@colortheme_dropdown-bg-active: #e8e8e8;
+
+// Apps, these colors are used for customizing the toolbar for the apps.
 
 @colortheme_pad-bg: #1c4fa0;
 @colortheme_pad-color: #fff;
+@colortheme_pad-toolbar-bg: #c1e7ff;
+@colortheme_pad-warn: #ffae00;
 
 @colortheme_slide-bg: #e57614;
 @colortheme_slide-color: #fff;
+@colortheme_slide-warn: #005868;
 
 @colortheme_code-bg: #ffae00;
 @colortheme_code-color: #000;
+@colortheme_code-warn: #9A37F7;
 
 @colortheme_poll-bg: #006304;
 @colortheme_poll-color: #fff;
+@colortheme_poll-help-bg: #bbffbb;
+@colortheme_poll-th-bg: #005bef;
+@colortheme_poll-th-fg: #fff;
+@colortheme_poll-warn: #ffade3;
 
 @colortheme_whiteboard-bg: #800080;
 @colortheme_whiteboard-color: #fff;
+@colortheme_whiteboard-warn: #ffae00;
 
 @colortheme_drive-bg: #0087ff;
 @colortheme_drive-color: #fff;
+@colortheme_drive-warn: #cd2532;
 
 @colortheme_file-bg: #cd2532;
 @colortheme_file-color: #fff;
+@colortheme_file-warn: #ffae00;
 
-@colortheme_friends-bg: #607B8D;
+@colortheme_friends-bg: #607b8d;
 @colortheme_friends-color: #fff;
+@colortheme_friends-warn: #cd2532;
 
 @colortheme_default-bg: #ddd;
 @colortheme_default-color: #000;
+@colortheme_default-warn: #cd2532;
 
 @colortheme_settings-bg: #0087ff;
 @colortheme_settings-color: #fff;
+@colortheme_settings-warn: #cd2532;
 
 @colortheme_profile-bg: #0087ff;
 @colortheme_profile-color: #fff;
+@colortheme_profile-warn: #cd2532;
 
-@cryptpad_color_blue: #4591C4; 
+@colortheme_todo-bg: #7bccd1;
+@colortheme_todo-color: #000;
+@colortheme_todo-warn: #cd2532;
+
+// Sidebar layout (profile / settings)
+@colortheme_sidebar-active: #fff;
+@colortheme_sidebar-left-bg: #eee;
+@colortheme_sidebar-left-fg: #000;
+@colortheme_sidebar-left-branch: #888;
+@colortheme_sidebar-right-bg: #fff;
+@colortheme_sidebar-right-fg: #000;
+@colortheme_sidebar-description: #777;
+@colortheme_sidebar-button-bg: #3066e5;
+@colortheme_sidebar-button-red-bg: #e54e4e;
+@colortheme_sidebar-button-alt-bg: #fff;
+
+@cryptpad_color_blue: #4591C4;
 @cryptpad_color_grey: #999999;
 @cryptpad_header_col: #1E1F1F;
-@cryptpad_text_col: #3F4141;
+@cryptpad_text_col: #3F4141;
+
+@colortheme_checkmark-back0: #ffffff;
+@colortheme_checkmark-back0-active: #bbbbbb;
+@colortheme_checkmark-back1: #FF0073;
+@colortheme_checkmark-col1: #ffffff;
+@colortheme_checkmark-back2: #FFFFFF;
+@colortheme_checkmark-col2: #000000;

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

@@ -0,0 +1,261 @@
+@import (once) "./colortheme-all.less";
+@import (once) "./tools.less";
+@import (once) "./checkmark.less";
+@import (once) './icon-colors.less';
+
+.creation_main() {
+    .tippy-popper {
+        z-index: 100000001 !important;
+    }
+    #cp-creation-container {
+        position: absolute;
+        z-index: 100000000; // #loading * 10
+        top: 0px;
+        background: @colortheme_loading-bg;
+        color: @colortheme_loading-color;
+        display: flex;
+        flex-flow: column; /* we need column so that the child can shrink vertically */
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+    #cp-creation {
+        flex: 0 1 auto; /* allows shrink */
+        min-height: 0;
+        overflow: auto;
+        text-align: center;
+        font: @colortheme_app-font;
+        width: 100%;
+        outline: none;
+        & > div {
+            width: 60vw;
+            max-width: 100%;
+            margin: 40px auto;
+            text-align: left;
+        }
+
+        .cp-creation-create, .cp-creation-settings {
+            margin-top: 0px;
+            @creation-button: #30B239;
+            button {
+                .tools_unselectable();
+                padding: 15px;
+                background: @creation-button;
+                color: #FFF;
+                font-weight: bold;
+                margin: 3px 10px;
+                border: none;
+                cursor: pointer;
+                outline: none;
+                width: 100%;
+                &:hover {
+                    //background: darken(@creation-button, 5%);
+                    background: lighten(@creation-button, 5%);
+                }
+            }
+        }
+        .cp-creation-create {
+            text-align: center;
+            margin: auto;
+            margin-top: 20px;
+            width: 400px;
+            max-width: 100%;
+            button {
+                margin: 0;
+            }
+        }
+
+        #cp-creation-form {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            & > div {
+                width: 400px;
+                max-width: 100%;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                font-size: 16px;
+                margin: 10px 0;
+                label {
+                    flex: 1;
+                }
+                input[type="checkbox"] {
+                    &+ label {
+                        margin-bottom: 0;
+                        flex: 1;
+                        padding: 0 10px;
+                    }
+                }
+                .cp-creation-help {
+                    font-size: 18px;
+                    color: white;
+                    &:hover {
+                        color: #AAA;
+                        text-decoration: none;
+                    }
+                }
+            }
+            .cp-creation-slider {
+                display: block;
+                overflow: hidden;
+                max-height: 0px;
+                transition: max-height 0.5s ease-in-out;
+                width: 100%;
+                margin-top: 10px;
+                &.active {
+                    max-height: 40px;
+                }
+            }
+            .cp-creation-expire {
+                .cp-creation-expire-picker {
+                    text-align: center;
+                    input {
+                        width: 100px;
+                    }
+                }
+            }
+            .cp-creation-settings {
+                button {
+                    margin: 0;
+                    padding: 0;
+                }
+                .cp-filler { flex: 1; }
+            }
+
+            div.cp-creation-remember {
+                margin-top: 30px;
+                .cp-creation-remember-help {
+                    font-style: italic;
+                }
+            }
+            div.cp-creation-template {
+                width: 100%;
+                background-color: darken(@colortheme_modal-bg, 3%);
+                padding: 20px;
+                margin: 30px 0;
+                .cp-creation-title {
+                    padding: 0 0 10px 10px;
+                    margin: auto;
+                }
+            }
+            .cp-creation-template-container {
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                overflow-y: auto;
+                align-items: center;
+                .cp-creation-template-element {
+                    @darker: darken(@colortheme_modal-fg, 30%);
+
+                    width: 135px;
+                    padding: 5px;
+                    margin: 5px;
+                    display: inline-flex;
+                    flex-flow: column;
+
+                    box-sizing: content-box;
+
+                    text-align: left;
+                    line-height: 1em;
+                    cursor: pointer;
+
+                    background-color: #111;
+                    color: @darker;
+                    border: 1px solid transparent;
+
+                    &.cp-creation-template-selected {
+                        border: 1px solid white;
+                        background-color: #222;
+                    }
+
+                    transition: all 0.1s;
+
+                    &:hover {
+                        color: @colortheme_modal-fg;
+                    }
+
+                    align-items: center;
+
+                    img {
+                        max-width: 100px;
+                        max-height: 100px;
+                        background: #fff;
+                    }
+
+                    .cp-creation-template-element-name {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        height: 20px;
+                        line-height: 20px;
+                        margin-top: 5px;
+                        max-width: 100%;
+                    }
+                    .fa {
+                        cursor: pointer;
+                        width: 100px;
+                        height: 100px;
+                        font-size: 70px;
+                        text-align: center;
+                        line-height: 100px;
+                    }
+                }
+            }
+        }
+
+        .cp-creation-deleted-container {
+            text-align: center;
+            .cp-creation-deleted {
+                background: #111;
+                padding: 10px;
+                text-align: center;
+                font-weight: bold;
+                display: inline-block;
+            }
+        }
+
+        .checkmark_main(30px);
+
+        @media screen and (max-width: @browser_media-narrow-screen) {
+            & > div {
+                width: 95%;
+                margin: 10px auto;
+            }
+        }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            #cp-creation-form {
+                div.cp-creation-template {
+                    margin: 0;
+                    padding: 5px;
+                    .cp-creation-template-container {
+                        .cp-creation-template-element {
+                            flex-flow: row;
+                            margin: 1px;
+                            padding: 5px;
+                            width: 155px;
+                            img {
+                                display: none;
+                            }
+                            .fa {
+                                font-size: 18px;
+                                width: 20px;
+                                height: 20px;
+                                line-height: 20px;
+                                display: inline !important;
+                            }
+                            .cp-creation-template-element-name {
+                                margin: 0;
+                                margin-left: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+}

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

@@ -0,0 +1,149 @@
+@import (once) "./colortheme-all.less";
+@import (once) "./tools.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;
+            }
+            * {
+                .tools_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; //Z dropdown content
+            max-height: 300px;
+            overflow-y: auto;
+            font: @dropdown_font;
+            line-height: 1em;
+
+            &.cp-dropdown-left {
+                right: 0;
+            }
+
+            &:hover {
+                display: block;
+            }
+
+            & > a, & > span {
+                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;
+                line-height: 1em;
+                align-items: center;
+
+                &:not(.fa) {
+                    font: @dropdown_font;
+                }
+                &.fa {
+                    font-size: 18px;
+                    &::before {
+                        width: 40px;
+                        margin-left: -10px;
+                        text-align: center;
+                    }
+                    * {
+                        font: @dropdown_font;
+                    }
+                }
+
+                .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;
+                }
+            }
+            &> span {
+                box-sizing: border-box;
+                height: 26px;
+                border-radius: 0;
+                border: 0;
+                padding: 0 16px;
+                .cp-dropdown-content {
+                    margin-top: 26px;
+                    left: 0;
+                }
+                button {
+                    padding: 0;
+                    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;
+                    }
+                }
+            }
+
+            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,57 @@
+@import (once) './colortheme-all.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: 1000000; //Z file upload table container
+        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-link {
+                .fa {
+                    margin-right: 5px;
+                }
+            }
+            .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; //Z file upload progress container
+            }
+            .cp-fileupload-table-cancel { text-align: center; }
+            .fa.cancel {
+                color: rgb(255, 0, 115);
+            }
+        }
+    }
+}
+

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

@@ -1,7 +1,7 @@
 .font_neuropolitical () {
     @font-face {
         font-family: Neuropolitical;
-        src: url(./customize/fonts/neuropolitical.ttf)
+        src: url("/customize/fonts/neuropolitical.ttf");
     }
 }
 .font_open-sans () {

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

@@ -0,0 +1,18 @@
+@import (once) "./toolbar.less";
+@import (once) './fileupload.less';
+@import (once) './alertify.less';
+@import (once) './tokenfield.less';
+@import (once) './creation.less';
+
+.framework_main(@bg-color, @warn-color, @color) {
+    .toolbar_main(
+        @bg-color: @bg-color,
+        @warn-color: @warn-color,
+        @color: @color
+    );
+    .fileupload_main();
+    .alertify_main();
+    .tokenfield_main();
+    .creation_main();
+}
+

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

@@ -0,0 +1,38 @@
+@import (once) "./colortheme-all.less";
+
+.help_main (@color, @bg-color) {
+    .cp-help-container {
+        position: relative;
+        background-color: lighten(@bg-color, 15%);
+        &.cp-help-hidden {
+            display: none;
+        }
+
+        .cp-help-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        .cp-help-text {
+            color: @color;
+            margin: 0;
+            padding: 15px;
+            a {
+                //color: darken(@colortheme_link-color, 30%);
+                @spin: spin(lighten(@bg-color, 15%), 180);
+                color: contrast(lighten(@bg-color, 15%), lighten(@spin, 10%), darken(@spin, 10%));
+                //color: darken(spin(lighten(@bg-color, 15%), 180), 10%);
+            }
+            h1 {
+                font-size: 20px;
+            }
+            h2 {
+                font-size: 18px;
+            }
+            h3 {
+                font-size: 16px;
+            }
+            ul, ol, p { margin: 0; }
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+@import (once) "./colortheme-all.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-contacts { 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; }
+
+    .cp-border-color-pad { border-color: @colortheme_pad-bg !important; }
+    .cp-border-color-code { border-color: @colortheme_code-bg !important; }
+    .cp-border-color-slide { border-color: @colortheme_slide-bg !important; }
+    .cp-border-color-poll { border-color: @colortheme_poll-bg !important; }
+    .cp-border-color-file { border-color: @colortheme_file-bg !important; }
+    .cp-border-color-contacts { border-color: @colortheme_friends-bg !important; }
+    .cp-border-color-whiteboard { border-color: @colortheme_whiteboard-bg !important; }
+    .cp-border-color-drive { border-color: @colortheme_drive-bg !important; }
+    .cp-border-color-settings { border-color: @colortheme_settings-bg !important; }
+    .cp-border-color-profile { border-color: @colortheme_settings-bg !important; }
+    .cp-border-color-default { border-color: @colortheme_default-bg !important; }
+    .cp-border-color-todo { border-color: @colortheme_todo-bg !important; }
+}
+

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

@@ -0,0 +1,43 @@
+.icons_main() {
+    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;
+        border: 1px solid white;
+
+        .cp-icons-name {
+            width: 100%;
+            height: 24px;
+            margin: 0;
+            display: inline-block;
+            font-size: 14px;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        &.cp-icons-element-selected {
+            background-color: white;
+            color: #666;
+        }
+        .fa {
+            display: block;
+            font-size: 64px;
+            margin: 18px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+

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

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 
 @infopages_infobar-height: 64px;
 @infopages_padding: 32px;
@@ -89,7 +89,6 @@
                 color: #fff;
                 padding-top: 30%;
                 margin-bottom: 0;
-                
             }
 
         }
@@ -117,7 +116,7 @@
 .infopages_topbar () {
     .cp-topbar {
         background: #fff;
-        z-index: 9001;
+        z-index: 10000; //Z infopage toolbar
         position: fixed;
         top: 0;
         display: flex;
@@ -152,8 +151,8 @@
     }
 }
 
-// navigation top bar 
-.navbar  {
+// navigation top bar
+.navbar {
     background: #fff;
     .navbar-brand {
         display: block;
@@ -165,6 +164,7 @@
     }
     a {
         border: 2px solid transparent;
+        white-space: nowrap;
     }
     .nav-link {
         padding: 0.5em 0.7em;
@@ -173,7 +173,8 @@
         };
     }
     .cp-register-btn {
-            border: 2px solid #4591C4;
+        border: 2px solid #4591C4;
+        display: inline-block;
     }
     button:focus {
         outline: none;
@@ -192,21 +193,9 @@
     }
     .cp-register-btn {
         margin-right: 13px;
-        margin-left: 83vw;
         text-align: center;
      }
 }
-@media (max-width: 687px) {
-    .cp-register-btn {
-         margin-left: 75vw;
-    }
-}
-@media (max-width: 467px) {
-    .cp-register-btn {
-         margin-left: 63vw;
-    }
-}
-
 
 //footer general styles
 

customize.dist/src/less2/include/leftside-menu.less

@@ -0,0 +1,23 @@
+@import (once) "./unselectable.less";
+@import (once) "./variables.less";
+@import (once) "./colortheme-all.less";
+
+.leftside-menu_main() {
+}
+.leftside-menu-category_main() {
+    .unselectable_make();
+    padding: 5px 20px;
+    margin: 15px 0;
+    cursor: pointer;
+    height: @variables_bar-height;
+    line-height: @variables_bar-height - 10px;
+    .fa {
+        width: 25px;
+    }
+    &:hover {
+        background: rgba(0,0,0,0.05);
+    }
+    &.cp-leftside-active {
+        background: @colortheme_sidebar-active;
+    }
+}

customize.dist/src/less2/include/limit-bar.less

@@ -0,0 +1,61 @@
+@import (once) "./colortheme-all.less";
+
+.limit-bar_main () {
+    .cp-limit-container {
+        @colortheme_green: #5cb85c;
+        display: inline-flex;
+        flex-flow: column-reverse;
+        width: 100%;
+        margin-top: 20px;
+        .cp-limit-bar {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+
+            max-width: 100%;
+            margin: 3px;
+            box-sizing: border-box;
+            border-top: 1px solid #999;
+            background: white;
+            position: relative;
+            text-align: center;
+            width: ~"calc(100% - 6px)";
+            height: 35px;
+            line-height: 25px;
+            overflow: hidden;
+            .cp-limit-usage {
+                height: 100%;
+                display: inline-block;
+                background: blue;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 1; // .usage
+                &.cp-limit-usage-normal {
+                    background: @colortheme_green;
+                }
+                &.cp-limit-usage-warning {
+                    background: orange;
+                }
+                &.cp-limit-usage-above {
+                    background: red;
+                }
+            }
+            .cp-limit-usage-text {
+                position: relative;
+                color: grey;
+                text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
+                z-index: 2; // .usageText
+                font-size: @colortheme_app-font-size;
+                font-weight: bold;
+            }
+        }
+        .cp-limit-upgrade {
+            padding: 0;
+            line-height: 25px;
+            height: 25px;
+            margin: 0 3px;
+            border-radius: 0;
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+@import (once) "./colortheme-all.less";
+
+.markdownToolbar_main (@color, @bg-color) {
+    .cp-markdown-toolbar {
+        height: @toolbar_line-height;
+        background-color: lighten(@bg-color, 20%);
+        display: none;
+        button {
+            height: @toolbar_line-height !important;
+            outline: 0;
+            color: @color;
+            .toolbar_button;
+            font: normal normal normal 14px/1 FontAwesome;
+            &:hover {
+                background-color: lighten(@bg-color, 8%);
+            }
+            &.cp-markdown-help { float: right; }
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+.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;
+            }
+        }
+    }
+}
+
+.markdown_main() {
+    blockquote {
+        background: #e5e5e5;
+        padding: 10px;
+        border-left: 3px solid #999;
+        padding-right: 0;
+        p { margin: 0; }
+        blockquote { margin: 0; }
+    }
+}
+// todo ul, ol
+

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

@@ -1,11 +1,12 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
+@import (once) "./variables.less";
 
 .modal_base() {
     font-family: @colortheme_font;
 
     background-color: @colortheme_modal-bg;
     color: @colortheme_modal-fg;
-    box-shadow: @colortheme_modal-shadow;
+    box-shadow: @variables_shadow;
 
     a {
         color: @colortheme_modal-link;
@@ -19,7 +20,7 @@
 .cp-modal-container {
     display: none;
 
-    z-index: 100000;
+    z-index: 100000; //Z modal container
     position: absolute;
     top: 0;
     bottom: 0;
@@ -30,9 +31,9 @@
     .cp-modal {
         background-color: @colortheme_modal-bg;
         color: @colortheme_modal-fg;
-        box-shadow: @colortheme_modal-shadow;
+        box-shadow: @variables_shadow;
 
-        padding: @colortheme_modal-padding;
+        padding: @variables_padding;
 
         position: absolute;
         top: 15vh; bottom: 15vh;
@@ -70,7 +71,7 @@
             position: absolute;
             top: 0;
             right: 0;
-            margin: @colortheme_modal-padding;
+            margin: @variables_padding;
             cursor: pointer;
         }
     }

customize.dist/src/less2/include/sidebar-layout.less

@@ -0,0 +1,102 @@
+@import (once) "/customize/src/less2/include/colortheme-all.less";
+@import (once) "/customize/src/less2/include/leftside-menu.less";
+
+@leftside-bg: @colortheme_sidebar-left-bg;
+@leftside-color: @colortheme_sidebar-left-fg;
+@rightside-color: @colortheme_sidebar-right-fg;
+@description-color: @colortheme_sidebar-description;
+
+@sidebar_button-width: 400px;
+
+
+.sidebar-layout_main() {
+    input[type="text"] {
+        padding-left: 10px;
+    }
+    #cp-sidebarlayout-container {
+        font-size: 16px;
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        #cp-sidebarlayout-leftside {
+            color: @leftside-color;
+            width: 250px;
+            background: @leftside-bg;
+            display: flex;
+            flex-flow: column;
+            .cp-sidebarlayout-categories {
+                flex: 1;
+                .cp-sidebarlayout-category {
+                    .leftside-menu-category_main();
+                }
+            }
+        }
+        #cp-sidebarlayout-rightside {
+            flex: 1;
+            padding: 5px 20px;
+            color: @rightside-color;
+            overflow: auto;
+
+            // Following rules are only in settings
+            .cp-sidebarlayout-element {
+                label:not(.noTitle), .label {
+                    display: block;
+                    font-weight: bold;
+                    margin-bottom: 0;
+                }
+                .cp-sidebarlayout-description {
+                    display: block;
+                    color: @description-color;
+                    margin-bottom: 5px;
+                    p {
+                        margin-bottom: 0;
+                    }
+                }
+                margin-bottom: 20px;
+            }
+            [type="text"], button {
+                vertical-align: middle;
+                height: 40px;
+                box-sizing: border-box;
+            }
+            .cp-sidebarlayout-input-block {
+                display: inline-flex;
+                width: @sidebar_button-width;
+                input {
+                    flex: 1;
+                    border-radius: 0.25em 0 0 0.25em;
+                    border: 1px solid #adadad;
+                    border-right: 0px;
+                }
+                button {
+                    border-radius: 0 0.25em 0.25em 0;
+                    //border: 1px solid #adadad;
+                    border-left: 0px;
+                }
+            }
+            &>div {
+                margin: 10px 0;
+            }
+            button.btn {
+                @button-bg: @colortheme_sidebar-button-bg;
+                @button-red-bg: @colortheme_sidebar-button-red-bg;
+                background-color: @button-bg;
+                border-color: darken(@button-bg, 10%);
+                color: white;
+                &:hover {
+                    background-color: darken(@button-bg, 10%);
+                }
+                &.btn-danger {
+                    background-color: @button-red-bg;
+                    border-color: darken(@button-red-bg, 10%);
+                    color: white;
+                    &:hover {
+                        background-color: darken(@button-red-bg, 10%);
+                    }
+                }
+            }
+        }
+    }
+}
+
+

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

@@ -0,0 +1,83 @@
+@import (once) "./tools.less";
+
+.tokenfield_main () {
+    .tokenfield {
+        .tools_unselectable();
+        height: auto;
+        min-height: 34px;
+        padding-bottom: 0px;
+        background-color: unset;
+        border: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0 10px;
+        .token {
+            box-sizing: border-box;
+            border-radius: 3px;
+            display: inline-block;
+            border: 1px solid #d9d9d9;
+            background-color: #ededed;
+            white-space: nowrap;
+            margin: 10px 5px;
+            height: 24px;
+            vertical-align: middle;
+            cursor: default;
+
+            color: #222;
+
+            &:hover {
+                border-color: #b9b9b9;
+            }
+            &.invalid {
+                background: none;
+                border: 1px solid transparent;
+                border-radius: 0;
+                border-bottom: 1px dotted #d9534f;
+            }
+            &.invalid.active {
+                background: #ededed;
+                border: 1px solid #ededed;
+                border-radius: 3px;
+            }
+            .token-label {
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-left: 4px;
+                vertical-align: middle;
+            }
+            .close {
+                font-family: Arial;
+                display: inline-block;
+                line-height: 24px;
+                font-size: 1.1em;
+                margin-left: 5px;
+                float: none;
+                height: 100%;
+                vertical-align: middle;
+                padding-right: 4px;
+            }
+            &.active {
+                border-color: rgba(82, 168, 236, 0.8);
+            }
+            &.duplicate {
+                border-color: #ebccd1;
+            }
+        }
+        .token-input {
+            background: none;
+            flex: 1;
+            border: 0;
+            padding: 0;
+            margin: 0 !important; // Override alertify
+            box-shadow: none;
+            max-width: 100%;
+            &:focus {
+                border-color: transparent;
+                outline: 0;
+                box-shadow: none;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+@import (once) "./colortheme-all.less";
+
+.history_main () {
+    .cp-toolbar-history {
+        display: none;
+        text-align: center;
+        width: 100%;
+        * {
+            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,999 @@
+@import (once) "./dropdown.less";
+@import (once) "./colortheme-all.less";
+@import (once) "./browser.less";
+@import (once) "./ckeditor-fix.less";
+@import (once) "./avatar.less";
+@import (once) "./toolbar-history.less";
+@import (once) "./icon-colors.less";
+@import (once) "./tools.less";
+@import (once) "./icons.less";
+@import (once) "./modal.less";
+@import (once) "./markdown-toolbar.less";
+@import (once) "./help.less";
+
+.toolbar_main (
+    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_default-bg, // color of the toolbar background
+    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
+    @barWidth: 600px // width of the toolbar
+) {
+
+    @toolbar_line-height: 32px;
+    @toolbar_top-height: 64px;
+    @toolbar_button-font: @colortheme_app-font;
+
+    .dropdown_main();
+    .ckeditor_fix();
+    .history_main();
+    .iconColors_main();
+    .markdownToolbar_main(@color, @bg-color);
+    .help_main(@color, @bg-color);
+
+    .cp-toolbar-container {
+        display: flex;
+    }
+
+    .toolbar_button {
+        height: @toolbar_line-height;
+        box-sizing: border-box;
+        padding: 3px 10px;
+        margin: 0;
+        transition: all 0.15s;
+        .tools_unselectable();
+        &.cp-toolbar-hidden {
+            display: none;
+        }
+        .cp-toolbar-drawer-element {
+            display: none;
+        }
+        // Bootstrap 4 colors (btn-secondary)
+        border: 1px solid transparent;
+        color: inherit;
+        font: @toolbar_button-font;
+        * {
+            color: inherit;
+            font: @toolbar_button-font;
+        }
+        background: transparent;
+        &:hover {
+            background-color: rgba(50,50,50,0.3);
+        }
+    }
+
+    .cp-toolbar-userlist-drawer {
+        background-color: @bg-color;
+        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 {
+                height: 48px;
+                padding: 5px;
+                margin: 2px 0;
+                background: rgba(0,0,0,0.1);
+                .avatar_main(30px);
+                .cp-avatar-default, media-tag {
+                    margin-right: 5px;
+                }
+                &.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;
+                    height: 100%;
+                    .cp-toolbar-userlist-name {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+                    .cp-toolbar-userlist-name-input {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        display: none;
+                        border: none;
+                    }
+                    .cp-toolbar-userlist-name-value {
+                        overflow: hidden;
+                        flex: 1;
+                        min-width: 0;
+                        min-height: 0;
+                        text-overflow: ellipsis;
+                    }
+                    .cp-toolbar-userlist-name-edit {
+                        width: 20px;
+                        font-size: 16px;
+                        padding: 0;
+                        border: none;
+                        height: 20px;
+                        cursor: pointer;
+                    }
+                    .cp-toolbar-userlist-friend {
+                        padding: 0;
+                    }
+                }
+            }
+        }
+        .cp-toolbar-userlist-friend {
+            display: inline-block;
+            width: 20px;
+        }
+    }
+
+    #cp-app-toolbar-creation-dialog.cp-modal-container {
+        .icons_main();
+
+        li:hover {
+            border: 1px solid white;
+        }
+        .cp-modal {
+            display: flex;
+            flex-flow: column;
+            li, li .fa {
+                cursor: pointer;
+            }
+            &> p {
+                margin: 50px;
+            }
+            &> div {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                align-content: center;
+                overflow-y: auto;
+            }
+        }
+
+        .cp-creation-icons-name {
+            white-space: nowrap;
+        }
+
+        #cp-app-toolbar-creation-advanced {
+            width: auto;
+            margin: 0;
+            padding: 0;
+            outline: none;
+        }
+        label[for="cp-app-toolbar-creation-advanced"] {
+            margin: 0;
+            margin-left: 5px;
+        }
+
+        @media screen and (max-height: @browser_media-not-big) {
+            .cp-modal {
+                & > p {
+                    display: none;
+                }
+                & > div {
+                    align-content: unset;
+                    li {
+                        height: 40px;
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        .fa {
+                            font-size: 32px;
+                        }
+                        .cp-icons-name {
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .cp-toolbar-userlist-drawer {
+        background-color: @bg-color;
+        color: @color;
+        .cp-toolbar-userlist-drawer-close {
+            color: @color;
+        }
+        h2 {
+            background-color: darken(@bg-color, 10%);
+            color: @color;
+        }
+        .cp-toolbar-userlist-name-input {
+            background-color: darken(@bg-color, 10%);
+            color: @color;
+        }
+        .cp-toolbar-userlist-name-edit {
+            color: contrast(@color,
+                            lighten(@color, 20%),
+                            darken(@color, 20%));
+            background: transparent;
+            &:hover {
+                color: @color;
+            }
+        }
+        .cp-toolbar-userlist-friend {
+            &:hover {
+                color: darken(@color, 15%);
+            }
+        }
+    }
+
+    .cp-toolbar {
+        * {
+            outline-width: 0;
+            &:focus {
+                outline-width: 0;
+            }
+        }
+
+        @toolbar-green: #5cb85c;
+
+        box-sizing: border-box;
+        padding: 0px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        background-color: @bg-color;
+        color: @color;
+
+        .fa {
+            font: normal normal normal 14px/1 FontAwesome;
+            font-family: FontAwesome;
+        }
+
+        .tools_unselectable();
+
+        font: @toolbar_button-font;
+        width: 100%;
+        z-index: 10000; // cp-toolbar
+
+        .cp-dropdown-container {
+            //height: 100%;
+            //display: inline-block;
+            button {
+                height: 100%;
+                border-radius: 0;
+                margin: 0;
+                background: transparent;
+            }
+        }
+
+        button {
+            .toolbar_button;
+        }
+
+        .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 {
+                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;
+        }*/
+
+        select {
+            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;
+            }
+        }
+        .cp-toolbar-top {
+            @media screen and (max-width: @browser_media-medium-screen) {
+                flex-wrap: wrap;
+                height: @toolbar_line-height;
+                .cp-pad-not-pinned {
+                    line-height: 32px;
+                    flex: unset;
+                    padding: 0;
+                    align-self: auto;
+                    margin: 0 5px;
+                }
+                .cp-toolbar-top-filler {
+                    height: 32px;
+                }
+                .cp-toolbar-title {
+                    height: @toolbar_line-height;
+                    line-height: initial;
+                    margin: 0;
+                    .cp-toolbar-title-hoverable {
+                        width: 100%;
+                    }
+                    .cp-toolbar-title-value-page {
+                        padding: 5px;
+                        line-height: unset;
+                        border: 0;
+                    }
+                    .cp-toolbar-title-editable, .cp-toolbar-title-value-page {
+                        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;
+                        line-height: calc(@toolbar_line-height - 12px); // padding + border
+                    }
+                }
+                .cp-toolbar-link {
+                    height: @toolbar_line-height;
+                    width: @toolbar_line-height;
+                    .cp-toolbar-link-logo {
+                        padding: 5px;
+                    }
+                }
+                .cp-toolbar-user {
+                    height: @toolbar_line-height;
+                    .cp-toolbar-new {
+                        height: @toolbar_line-height;
+                        width: @toolbar_line-height;
+                        margin-left: 0;
+                        button {
+                            height: @toolbar_line-height;
+                            width: @toolbar_line-height;
+                            font-size: 20px;
+                            margin-top: -1px;
+                        }
+                    }
+                    .cp-toolbar-user-dropdown {
+                        height: @toolbar_line-height;
+                        width: @toolbar_line-height;
+                        &> button {
+                            height: @toolbar_line-height;
+                            width: @toolbar_line-height;
+                            span { font-size: unset; }
+                        }
+                        &> button.cp-avatar.cp-avatar {
+                            media-tag {
+                                margin: 4px;
+                                max-width: 24px;
+                                min-width: 24px;
+                                max-height: 24px;
+                                min-height: 24px;
+                            }
+                        }
+                    }
+                    .cp-toolbar-limit {
+                        line-height: 32px;
+                        margin: 0;
+                    }
+                }
+                /*
+                .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;
+                        line-height: calc(@toolbar_line-height - 12px); // padding + border
+                    }
+                }
+                */
+            }
+        }
+
+        .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;
+            color: @warn-color;
+        }
+        .cp-toolbar-leftside, .cp-toolbar-rightside {
+            background-color: lighten(@bg-color, 8%);
+            button:hover, button.cp-toolbar-button-active {
+                background-color: @bg-color;
+            }
+        }
+        .cp-toolbar-title-hoverable:hover {
+            .cp-toolbar-title-editable, .cp-toolbar-title-edit {
+                cursor: text;
+                border: 1px solid darken(@bg-color, 15%);
+                background: darken(@bg-color, 10%);
+                transition: all 0.15s;
+                color: @color;
+            }
+            .cp-toolbar-title-editable {
+                cursor: text;
+            }
+        }
+        .cp-toolbar-title-save {
+            border: 1px solid darken(@bg-color, 15%);
+            background: darken(@bg-color, 10%);
+            color: @color;
+            &:hover {
+                background: darken(@bg-color, 5%);
+            }
+        }
+        input {
+            border: 1px solid darken(@bg-color, 15%);
+            background: darken(@bg-color, 10%);
+            color: @color;
+        }
+        .cp-dropdown-content.cp-dropdown-left a {
+            color: black;
+        }
+    }
+
+    .cp-toolbar-top {
+        display: flex;
+        flex-flow: row;
+        height: @toolbar_top-height;
+        position: relative;
+        width: 100%;
+
+        .cp-pad-not-pinned {
+            order: 4;
+            flex: 1;
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            line-height: @toolbar_top-height;
+            padding: 0;
+            margin: 0 5px;
+            font-size: @colortheme_app-font-size;
+            color: @warn-color;
+            .cp-pnp-msg {
+                padding-left: 5px;
+                font-family: @colortheme_font;
+                font-size: @colortheme_app-font-size;
+                a {
+                    font-size: @colortheme_app-font-size;
+                    font-family: @colortheme_font;
+                    font-weight: bold;
+                    color: @warn-color;
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+                @media screen and (max-width: (@browser_media-not-big)) {
+                    display: none;
+                }
+            }
+            @media screen and (max-width: (@browser_media-not-big)) {
+                overflow: visible;
+                max-width: 20px;
+            }
+        }
+        .cp-toolbar-top-filler {
+            height: @toolbar_top-height;
+            display: inline-block;
+            order: 5;
+            //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 {
+                border: 1px solid transparent;
+                padding: 5px;
+                font-size: 25px;
+                vertical-align: middle;
+                line-height: 25px;
+                white-space: nowrap;
+            }
+            .cp-toolbar-title-value-page {
+                border: 1px solid transparent;
+                padding: 0 5px;
+                line-height: 48px;
+            }
+            .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-collapse: collapse;
+            }
+            input {
+                max-width: ~"calc(100% - 40px)";
+                //flex: 1;
+                vertical-align: middle;
+                box-sizing: border-box;
+                cursor: auto;
+                width: 300px;
+                font-size: 20px;
+                padding: 5px 5px;
+                height: 40px;
+                line-height: 28px; // padding + border
+            }
+        }
+        .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;
+                font-size: 1em;
+                color: inherit;
+                height: 64px;
+                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: @toolbar_top-height;
+            display: inline-flex;
+            order: 6;
+            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; //Z cp-toolbar-user-dropdown
+                //margin-left: 20px;
+                height: 64px;
+                width: 64px;
+                padding: 0px;
+                box-sizing: border-box;
+                text-align: center;
+                background-color: rgba(0,0,0,0.3);
+                transition: all 0.15s;
+                &:hover {
+                    background-color: rgba(0,0,0,0.4);
+                }
+                .cp-dropdown-content {
+                    margin: 0;
+                    overflow: visible;
+                }
+                & > 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);
+                        media-tag {
+                            margin: 8px;
+                        }
+                        border: 0;
+                    }
+                }
+            }
+            p.cp-toolbar-account {
+                &> span {
+                    font-weight: bold;
+                    span {
+                        font-weight: normal;
+                    }
+                }
+            }
+            .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;
+        }
+        display: inline-flex;
+        align-items: center;
+        max-width: 100%;
+        flex: 1 1 auto;
+        //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 {
+            width: 50px;
+            text-align: center;
+        }
+    }
+    .cp-toolbar-rightside {
+        display: flex;
+        min-height: @toolbar_line-height;
+        overflow: hidden;
+        @media screen and (max-width: @barWidth) { // 450px
+            flex-wrap: wrap;
+            height: auto;
+            width: 100%;
+        }
+        &:empty {
+            min-height: 0;
+            height: 0;
+        }
+
+        .cp-toolbar-rightside-button {
+            cursor: pointer;
+            // UI actions
+            &.cp-toolbar-icon-toggle { order: 1; }
+            &.cp-toolbar-icon-preview { order: 2; }
+            &.cp-toolbar-icon-present { order: 3; }
+            // Content actions
+            &.cp-toolbar-icon-mediatag { order: 10; }
+            order: 11;
+            // Storage actions
+            &.cp-toolbar-icon-hashtag { order: 20; }
+            &.cp-toolbar-icon-template { order: 21; }
+            &.cp-toolbar-icon-forget { order: 22; }
+            // Drawer
+            &.cp-toolbar-drawer-button { order: 30; }
+
+        }
+
+        .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; //Z cp-toolbar-drawer-content
+            color: black;
+            .fa {
+                font-size: 17px;
+            }
+            &> span {
+                order: 8;
+                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-button-active {
+                    background-color: inherit;
+                }
+                .cp-toolbar-drawer-element {
+                    margin-left: 10px;
+                    display: inline;
+                    vertical-align: baseline;
+                }
+                &.fa-info-circle, &.fa-history, &.fa-cog {
+                    .cp-toolbar-drawer-element {
+                        margin-left: 11px;
+                    }
+                }
+                &.fa-question {
+                    .cp-toolbar-drawer-element {
+                        margin-left: 16px;
+                    }
+                }
+                &:hover {
+                    background-color: @colortheme_dropdown-bg-hover !important;
+                    color: @colortheme_dropdown-color;
+                }
+                order: 8;
+                &.fa-history { order: 1; }
+                &.fa-download { order: 2; }
+                &.fa-upload { order: 3; }
+                &.fa-print { order: 4; }
+                &.fa-cog { order: 5; }
+                &.fa-info-circle { order: 6; }
+                &.fa-help { order: 7; }
+            }
+        }
+    }
+    .cp-toolbar-spinner {
+        line-height: @toolbar_line-height;
+        padding: 0 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 200px;
+        box-sizing: border-box;
+        &> 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/include/tools.less

@@ -0,0 +1,27 @@
+.tools_placeholder-color (@color) {
+    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+        color: @color;;
+    }
+    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: @color;
+        opacity: 1;
+    }
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: @color;
+        opacity: 1;
+    }
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: @color;
+    }
+    &::-ms-input-placeholder { /* Microsoft Edge */
+        color: @color;
+    }
+}
+
+.tools_unselectable () {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}

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

@@ -0,0 +1,13 @@
+.unselectable_make() {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.unselectable_main() {
+    .cp-unselectable {
+        .unselectable_make();
+    }
+}

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

@@ -0,0 +1,9 @@
+// This is a file for generic constants which we didn't want to hardcode everywhere.
+// However, unlike colortheme, customizing these variables will cause breakage.
+
+// Elements size
+@variables_bar-height: 32px;
+
+// Used in modal.less and alertify.less
+@variables_padding: 12px;
+@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4);

customize.dist/src/less2/loading.less

@@ -0,0 +1,73 @@
+/*
+WARNING: THIS FILE DOES NOTHING
+It exists only as a proposal of what CSS you should use in loading.js
+The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen.
+*/
+@import (once) "./include/colortheme-all.less";
+@import (once) "./include/browser.less";
+
+#cp-loading {
+    transition: opacity 0.75s, visibility 0s 0.75s;
+    visibility: visible;
+    opacity: 1;
+    position: fixed;
+    z-index: 10000000; // #loading
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background: @colortheme_loading-bg;
+    color: @colortheme_loading-color;
+    text-align: center;
+    font-size: 1.5em;
+    .cp-loading-container {
+        margin-top: 50vh;
+        transform: translateY(-50%);
+    }
+    .cp-loading-cryptofist {
+        margin-left: auto;
+        margin-right: auto;
+        height: 300px;
+        margin-bottom: 2em;
+        @media screen and (max-height: @browser_media-short-screen) {
+            display: none;
+        }
+    }
+    .cp-loading-spinner-container {
+        position: relative;
+        height: 100px;
+        > div {
+            height: 100px;
+        }
+    }
+    &.cp-loading-hidden {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+#cp-loading-tip {
+    position: fixed;
+    z-index: 10000000; // loading tip
+    top: 80%;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    transition: opacity 750ms;
+    transition-delay: 3000ms;
+    @media screen and (max-height: @browser_media-medium-screen) {
+        display: none;
+    }
+    span {
+        background: @colortheme_loading-bg;
+        color: @colortheme_loading-color;
+        text-align: center;
+        font-size: 1.5em;
+        opacity: 0.7;
+        font-family: @colortheme_font;
+        padding: 15px;
+        max-width: 60%;
+        display: inline-block;
+    }
+}
+

customize.dist/src/less2/main.less

@@ -9,4 +9,35 @@ body.cp-page-register { @import "./pages/page-register.less"; }
 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-features { @import "./pages/page-features.less"; }
+body.cp-page-faq { @import "./pages/page-faq.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";
+    .app-noscroll_main();
+}
+// Set the HTML style for printing slides
+html.cp-app-print {
+    @import "./include/app-print.less";
+    .app-print_main();
+}
+
+body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
+
+body.cp-app-drive { @import "../../../drive/app-drive.less"; }
+body.cp-app-pad { @import "../../../pad/app-pad.less"; }
+body.cp-app-code { @import "../../../code/app-code.less"; }
+body.cp-app-slide { @import "../../../slide/app-slide.less"; }
+body.cp-app-file { @import "../../../file/app-file.less"; }
+body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
+body.cp-app-contacts {   @import "../../../contacts/app-contacts.less";    }
+body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
+body.cp-app-todo { @import "../../../todo/app-todo.less"; }
+body.cp-app-profile { @import "../../../profile/app-profile.less"; }
+body.cp-app-settings { @import "../../../settings/app-settings.less"; }
+body.cp-app-debug { @import "../../../debug/app-debug.less"; }
+body.cp-app-worker { @import "../../../worker/app-worker.less"; }
+

customize.dist/src/less2/pages/page-404.less

@@ -0,0 +1,37 @@
+@import (once) "../include/colortheme-all.less";
+@import (once) "../include/font.less";
+.font_neuropolitical();
+.font_open-sans();
+
+html, body {
+    margin: 0px;
+    padding: 0px;
+    #cp-main {
+
+        height: 100vh;
+        margin: 0px;
+        width: 100%;
+        padding-top: 5%;
+        text-align: center;
+        #cp-logo {
+            display: block;
+            max-width: 15%;
+            margin: auto;
+        }
+        #cp-brand {
+            font-family: neuropolitical;
+            font-size: 40px;
+        }
+        #cp-title {
+            font-size: 30px;
+        }
+        #cp-scramble, #cp-link {
+            font-size: 20px;
+        }
+        #cp-title, #cp-scramble, #cp-link {
+            //font-family: 'Open Sans';
+            font-family: monospace;
+        }
+    }
+}
+