Use less2 in sframe drive

customize.dist/src/less/mixins.less

@@ -1,4 +1,5 @@
 @import "/customize/src/less/variables.less";
+@import (once) "/customize/src/less2/include/tools.less";
 
 .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
     @font-face {
@@ -39,26 +40,6 @@
     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;
@@ -83,7 +64,7 @@
         box-sizing: content-box;
     }
     .default {
-        .unselectable();
+        .tools_unselectable();
         background: white;
         color: black;
         font-size: @width/1.2;
@@ -122,7 +103,7 @@
 }
 
 .leftsideCategory {
-    .unselectable();
+    .tools_unselectable();
     padding: 5px 20px;
     margin: 15px 0;
     cursor: pointer;

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

@@ -1,10 +1,11 @@
 @import '/customize/src/less/variables.less';
 @import '/customize/src/less/mixins.less';
+@import (once) "/customize/src/less2/include/colortheme.less";
 
-@leftside-bg: #eee;
+@leftside-bg: @colortheme_sidebar-left-bg;
-@leftside-color: #000;
+@leftside-color: @colortheme_sidebar-left-fg;
-@rightside-color: #000;
+@rightside-color: @colortheme_sidebar-right-fg;
-@description-color: #777;
+@description-color: @colortheme_sidebar-description;
 
 @button-width: 400px;
 

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

@@ -1,3 +1,5 @@
+@import (once) "./tools.less";
+
 .avatar_main (@width) {
     &.cp-avatar {
     overflow: hidden;
@@ -16,7 +18,7 @@
         box-sizing: content-box;
     }
     .cp-avatar-default {
-        .unselectable();
+        .tools_unselectable();
         background: white;
         color: black;
         font-size: @width/1.2;

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

@@ -75,6 +75,16 @@
 @colortheme_todo-bg: #7bccd1;
 @colortheme_todo-color: #000;
 
+// Sidebar layout
+@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;
+
+
 @cryptpad_color_blue: #4591C4; 
 @cryptpad_color_grey: #999999;
 @cryptpad_header_col: #1E1F1F;

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

@@ -1,4 +1,5 @@
 @import (once) "./colortheme.less";
+@import (once) "./tools.less";
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown_main () {
@@ -17,7 +18,7 @@
                 margin-left: 5px;
             }
             * {
-                .unselectable();
+                .tools_unselectable();
                 cursor: default;
             }
         }

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

@@ -0,0 +1,23 @@
+@import (once) "./unselectable.less";
+@import (once) "./variables.less";
+@import (once) "./colortheme.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,58 @@
+@import (once) "./colortheme.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-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;
+            .cp-limit-usage {
+                height: 100%;
+                display: inline-block;
+                background: blue;
+                position: absolute;
+                left: 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: black;
+                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/tokenfield.less

@@ -1,15 +1,8 @@
+@import (once) "./tools.less";
+
 .tokenfield_main () {
     .tokenfield {
-        .unselectable () {
+        .tools_unselectable();
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        .unselectable();
         height: auto;
         min-height: 34px;
         padding-bottom: 0px;

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

@@ -5,6 +5,7 @@
 @import (once) "./avatar.less";
 @import (once) "./toolbar-history.less";
 @import (once) "./icon-colors.less";
+@import (once) "./tools.less";
 
 
 .toolbar_main () {
@@ -13,15 +14,6 @@
     @toolbar_top-height: 64px;
     @toolbar_button-font: @colortheme_app-font;
 
-    .unselectable () {
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
     .dropdown_main();
     .ckeditor_fix();
     .history_main();
@@ -270,7 +262,7 @@
             font-family: FontAwesome;
         }
 
-        .unselectable();
+        .tools_unselectable();
 
         font: @toolbar_button-font;
         width: 100%;
@@ -289,7 +281,7 @@
 
         button {
             transition: all 0.15s;
-            .unselectable();
+            .tools_unselectable();
             &.cp-toolbar-hidden {
                 display: none;
             }

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,3 @@
+// Elements size
+@variables_bar-height: 32px;
+

www/common/sframe-common-interface.js

@@ -306,7 +306,7 @@ define([
         if (!common.isLoggedIn()) { return cb("NOT_LOGGED_IN"); }
         // getPinnedUsage updates common.account.usage, and other values
         // so we can just use those and only check for errors
-        var $container = $('<span>', {'class':'limit-container'});
+        var $container = $('<span>', {'class':'cp-limit-container'});
         var todo;
         var updateUsage = Cryptpad.notAgainForAnother(function () {
             common.getPinUsage(todo);
@@ -326,13 +326,13 @@ define([
             var limit = unit === 'GB'? Util.bytesToGigabytes(limit):
                 Util.bytesToMegabytes(limit);
 
-            var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
+            var $limit = $('<span>', {'class': 'cp-limit-bar'}).appendTo($container);
             var quota = usage/limit;
-            var $usage = $('<span>', {'class': 'usage'}).css('width', quota*100+'%');
+            var $usage = $('<span>', {'class': 'cp-limit-usage'}).css('width', quota*100+'%');
 
             var makeDonateButton = function () {
                 $('<a>', {
-                    'class': 'upgrade btn btn-success',
+                    'class': 'cp-limit-upgrade btn btn-success',
                     href: Cryptpad.donateURL,
                     rel: "noreferrer noopener",
                     target: "_blank",
@@ -341,7 +341,7 @@ define([
 
             var makeUpgradeButton = function () {
                 $('<a>', {
-                    'class': 'upgrade btn btn-success',
+                    'class': 'cp-limit-upgrade btn btn-success',
                     href: Cryptpad.upgradeURL,
                     rel: "noreferrer noopener",
                     target: "_blank",
@@ -372,10 +372,10 @@ define([
                 prettyLimit = Messages._getKey('formattedMB', [limit]);
             }
 
-            if (quota < 0.8) { $usage.addClass('normal'); }
+            if (quota < 0.8) { $usage.addClass('cp-limit-usage-normal'); }
-            else if (quota < 1) { $usage.addClass('warning'); }
+            else if (quota < 1) { $usage.addClass('cp-limit-usage-warning'); }
-            else { $usage.addClass('above'); }
+            else { $usage.addClass('cp-limit-usage-above'); }
-            var $text = $('<span>', {'class': 'usageText'});
+            var $text = $('<span>', {'class': 'cp-limit-usage-text'});
             $text.text(usage + ' / ' + prettyLimit);
             $limit.append($usage).append($text);
         };

www/newdrive/app-drive.less

@@ -3,39 +3,27 @@
 @import (once) "../../customize/src/less2/include/markdown.less";
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/leftside-menu.less';
+@import (once) "../../customize/src/less2/include/tools.less";
+@import (once) "../../customize/src/less2/include/limit-bar.less";
 
 .toolbar_main();
 .fileupload_main();
 .alertify_main();
-@import (once) "../../customize/src/less/variables.less";
+.limit-bar_main();
-@import (once) "../../customize/src/less/mixins.less";
 
-@tree-bg: #eee;
+@drive_hover: #eee;
-@tree-fg: #000;
+@drive_hover-light: lighten(@drive_hover, 20%);
-@tree-lines-col: #888;
+@drive_info-box-bg: #d2e1f2;
+@drive_info-box-border: #bbb;
+@drive_table-header-fg: #555;
+@drive_table-header-bg: #e8e8e8;
+@drive_mobile-tree-border-col: #ccc;
 
-@drive-hover: #eee;
+@drive_content-fg: @colortheme_sidebar-right-fg;
-@drive-hover-light: lighten(@drive-hover, 20%);
+@drive_content-bg: @colortheme_sidebar-right-bg;
+@drive_content-bg-ro: darken(@drive_content-bg, 10%);
 
-@content-bg: #fff;
-@content-bg-ro: darken(@content-bg, 10%);
-@content-fg: @tree-fg;
-@info-box-bg: #d2e1f2;
-@info-box-border: #bbb;
-@table-header-fg: #555;
-@table-header-bg: #e8e8e8;
-
-@toolbar-bg: #ddd;
-@toolbar-fg: #555;
-@toolbar-border-col: #ccc;
-@toolbar-button-bg: #888;
-@toolbar-button-border: #888;
-@toolbar-button-bg-hover: #777;
-@toolbar-button-fg: #eee;
-@toolbar-path-bg: #fff;
-@toolbar-path-border: #888;
-
-@size-mobile: 600px;
 
 /* PAGE */
 
@@ -44,65 +32,12 @@ flex-flow: column;
 max-height: 100%;
 min-height: auto;
 
-// TODO: pin limit in a separate file, less2
+.cp-unselectable {
-/* Pin limit */
+    .tools_unselectable();
-.limit-container {
-    @toolbar-green: #5cb85c;
-    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; // .usage
-            &.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; // .usageText
-            font-size: @main-font-size;
-            font-weight: bold;
-        }
-    }
-    .upgrade {
-        padding: 0;
-        line-height: 25px;
-        height: 25px;
-        margin: 0 3px;
-        border-radius: 0;
-    }
 }
 
 /* local mixins */
-.fileIcon {
+.drive_fileIcon {
     li {
         display: inline-block;
         margin: 10px 10px;
@@ -160,22 +95,13 @@ img.cp-app-drive-icon {
     max-height: 16px;
 }
 
-.cp-unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 .cp-app-drive-container {
     flex: 1;
     overflow: auto;
     width: 100%;
     display: flex;
     flex-flow: row;
-    @media screen and (max-width: @size-mobile) {
+    @media screen and (max-width: @browser_media-medium-screen) {
         display: block;
         #cp-app-drive-toolbar {
             .path .element {
@@ -187,7 +113,7 @@ img.cp-app-drive-icon {
             width: 100%;
             max-width: unset;
             max-height: unset;
-            border-bottom: 1px solid @toolbar-border-col;
+            border-bottom: 1px solid @drive_mobile-tree-border-col;
             .cp-app-drive-tree-category {
                 margin-top: 0.5em;
             }
@@ -195,15 +121,6 @@ img.cp-app-drive-icon {
     }
 }
 
-.padColor { color: @toolbar-pad-bg; }
-.codeColor { color: @toolbar-code-bg; }
-.slideColor { color: @toolbar-slide-bg; }
-.pollColor { color: @toolbar-poll-bg; }
-.fileColor { color: @toolbar-file-bg; }
-.whiteboardColor { color: @toolbar-whiteboard-bg; }
-.driveColor { color: @toolbar-drive-bg; }
-.defaultColor { color: @toolbar-default-bg; }
-
 div:focus {
     outline: none;
 }
@@ -231,7 +148,7 @@ li {
     z-index: 500;
     li {
         padding: 0;
-        font-size: @main-font-size;
+        font-size: @colortheme_app-font-size;
         a {
             cursor: pointer;
         }
@@ -248,7 +165,7 @@ li {
     color: #eee;
     margin: -1px;
     .fa-minus-square-o, .fa-plus-square-o {
-        color: @tree-fg;
+        color: @colortheme_sidebar-left-fg;
     }
 }
 
@@ -258,7 +175,7 @@ li {
     color: #ddd;
     margin: -1px;
     .fa-minus-square-o, .fa-plus-square-o {
-        color: @tree-fg;
+        color: @colortheme_sidebar-left-fg;
     }
 }
 
@@ -273,10 +190,10 @@ span {
 
 
 #cp-app-drive-tree {
-    font-size: @main-font-size;
+    font-size: @colortheme_app-font-size;
     //border-right: 1px solid #ccc;
     box-sizing: border-box;
-    background: @tree-bg;
+    background: @colortheme_sidebar-left-bg;
     overflow: auto;
     resize: horizontal;
     width: auto;
@@ -284,7 +201,7 @@ span {
     max-width: 500px;
     min-width: 200px;
     padding: 0px;
-    color: @tree-fg;
+    color: @colortheme_sidebar-left-fg;
     display: flex;
     flex-flow: column;
     max-height: 100%;
@@ -311,13 +228,13 @@ span {
                 width: ~"calc(100% - 30px)";
                 padding: 0 10px;
                 border: 0;
-                color: lighten(@tree-fg, 40%);
+                color: lighten(@colortheme_sidebar-left-fg, 40%);
             }
             & > span.cp-app-drive-element-row {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 //min-width: ~"calc(100% + 5px)";
-                .leftsideCategory();
+                .leftside-menu-category_main();
                 width: ~"calc(100% + 5px)";
                 margin: 0;
                 margin-bottom: -6px;
@@ -327,18 +244,12 @@ span {
                 padding-left: 5px;
             }
             & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover {
-                //background-color: @drive-hover;
             }
         }
     }
     span.cp-app-drive-element {
         cursor: pointer;
     }
-    /*.cp-app-drive-element-active {
-        &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-droppable) {
-            background-color: darken(@drive-hover, 15%);
-        }
-    }*/
     .cp-app-drive-tree-category {
         margin: 0;
         margin-top: 15px;
@@ -353,7 +264,7 @@ span {
             .cp-app-drive-element-row {
                 display: block;
                 padding-left: 20px;
-                .leftsideCategory();
+                .leftside-menu-category_main();
                 margin: 0;
                 .fa {
                     width: 25px;
@@ -372,17 +283,17 @@ span {
         padding: 0;
         position: relative;
         input {
-            background: lighten(@toolbar-drive-bg, 8%);
+            background: lighten(@colortheme_drive-bg, 8%);
-            color: @toolbar-drive-color;
+            color: @colortheme_drive-color;
-            .placeholderColor(@toolbar-drive-color);
+            .tools_placeholder-color(@colortheme_drive-color);
             outline-width: 0px;
             border-radius: 0;
             width: 100%;
             //border: 1px solid #ccc;
             border: 0;
-            border-right: 1px solid lighten(@toolbar-drive-bg, 16%);
+            border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
             //border-right: 0;
-            height: @toolbar-line-height;
+            height: @variables_bar-height;
             padding: 0 5px;
             padding-left: 45px;
             &:focus {
@@ -390,7 +301,7 @@ span {
             }
         }
         .cp-app-drive-tree-search-con {
-            color: @toolbar-drive-color;
+            color: @colortheme_drive-color;
             position: absolute;
             left: 20px; // TODO align with drive categories
             top: 8px;
@@ -446,9 +357,9 @@ span {
                 top: -11px;
                 content: '';
                 display: block;
-                border-left: 1px solid @tree-lines-col;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
                 height: ~"calc(1em + 11px)";
-                border-bottom: 1px solid @tree-lines-col;
+                border-bottom: 1px solid @colortheme_sidebar-left-branch;
                 width: 15px;
             }
             &:after {
@@ -457,7 +368,7 @@ span {
                 bottom: -7px;
                 content: '';
                 display: block;
-                border-left: 1px solid @tree-lines-col;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
                 height: 100%;
             }
             &.cp-app-drive-tree-root {
@@ -487,8 +398,8 @@ span {
 }
 #cp-app-drive-content {
     box-sizing: border-box;
-    background: @content-bg;
+    background: @drive_content-bg;
-    color: @content-fg;
+    color: @drive_content-fg;
     overflow: auto;
     flex: 1;
     display: flex;
@@ -501,7 +412,7 @@ span {
         z-index: 50;
     }
     &.cp-app-drive-readonly {
-        background: @content-bg-ro;
+        background: @drive_content-bg-ro;
     }
     h1 {
         padding-left: 10px;
@@ -511,7 +422,7 @@ span {
         line-height: 2em;
         padding: 0.25em 0.75em;
         margin: 1em;
-        background: @info-box-bg;
+        background: @drive_info-box-bg;
         span {
             cursor: pointer;
             float: right;
@@ -521,15 +432,9 @@ span {
     li {
         cursor: default;
         &:not(.cp-app-drive-element-header) {
-            *:not(input) {
-                /*pointer-events: none;*/
-            }
             &:hover {
                 &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
-                    background-color: @drive-hover;
+                    background-color: @drive_hover;
-                }
-                .cp-app-drive-element-name {
-                    /*text-decoration: underline;*/
                 }
             }
         }
@@ -537,7 +442,7 @@ span {
     #cp-app-drive-content-folder {
         li {
             &.cp-app-drive-search-result {
-                border-bottom: 1px solid @info-box-border;
+                border-bottom: 1px solid @drive_info-box-border;
                 display: block;
                 &:hover {
                     background-color: initial;
@@ -572,7 +477,7 @@ span {
                         font-weight: bold;
                         cursor: pointer;
                         &:hover {
-                            background-color: @drive-hover;
+                            background-color: @drive_hover;
                         }
                     }
                     .cp-app-drive-search-col2 {
@@ -591,7 +496,7 @@ span {
     }
     div.cp-app-drive-content-grid {
         padding: 20px;
-        .fileIcon;
+        .drive_fileIcon;
         li {
             &.cp-app-drive-element {
                 position: relative;
@@ -647,12 +552,12 @@ span {
                 display: table-cell;
             }
             &:not(.cp-app-drive-element-header) {
-                height: @toolbar-line-height;
+                height: @variables_bar-height;
-                line-height: @toolbar-line-height;
+                line-height: @variables_bar-height;
             }
             &.cp-app-drive-element-header {
                 cursor: default;
-                color: @table-header-fg;
+                color: @drive_table-header-fg;
                 span {
                     &:not(.fa) {
                         text-align: left;
@@ -669,7 +574,7 @@ span {
                     &.cp-app-drive-sort-clickable {
                         cursor: pointer;
                         &:hover {
-                            background: @table-header-bg;
+                            background: @drive_table-header-bg;
                         }
                     }
                 }
@@ -711,7 +616,7 @@ span {
 }
 
 #cp-app-drive-new-ghost-dialog.cp-modal-container {
-    .fileIcon;
+    .drive_fileIcon;
 
     li:not(.cp-app-drive-element-selected):hover {
         border: 1px solid white;
@@ -766,14 +671,14 @@ span {
 /* Toolbar */
 
 #cp-app-drive-toolbar {
-    background: lighten(@toolbar-drive-bg, 8%);
+    background: lighten(@colortheme_drive-bg, 8%);
-    color: @toolbar-drive-color;
+    color: @colortheme_drive-color;
     //height: 30px;
     //display: flex;
     //flex-flow: row;
     z-index: 100;
     box-sizing: border-box;
-    height: @toolbar-line-height;
+    height: @variables_bar-height;
     padding: 0;
     display: flex;
     flex-flow: row;
@@ -800,23 +705,23 @@ span {
             margin: 0;
         }
         button {
-            height: @toolbar-line-height;
+            height: @variables_bar-height;
             padding: 0 10px;
             border: none;
             border-radius: 0;
             box-sizing: border-box;
             background: transparent;
-            font-size: @main-font-size;
+            font-size: @colortheme_app-font-size;
-            color: @toolbar-drive-color;
+            color: @colortheme_drive-color;
             transition: all 0.15s;
             .drawer {
                 display: none;
             }
             .fa, span {
-                font-size: @main-font-size;
+                font-size: @colortheme_app-font-size;
             }
             &:hover {
-                background: @toolbar-drive-bg;
+                background: @colortheme_drive-bg;
             }
             &.cp-app-drive-toolbar-active {
                 display: none;
@@ -846,7 +751,7 @@ span {
             }
             .cp-dropdown-button-title {
                 display: inline-flex;
-                height: @toolbar-line-height;
+                height: @variables_bar-height;
                 align-items: center;
                 span:not(.fa) {
                     line-height: 23px;
@@ -856,9 +761,9 @@ span {
     }
 
     button {
-        font: @toolbar-button-font;
+        font: @colortheme_app-font;
         span {
-            font: @toolbar-button-font;
+            font: @colortheme_app-font;
         }
         .fa, &.fa {
             font-family: FontAwesome;
@@ -878,8 +783,8 @@ span {
     .cp-app-drive-path {
         flex: 1;
         width: 100%;
-        height: @toolbar-line-height;
+        height: @variables_bar-height;
-        line-height: @toolbar-line-height;
+        line-height: @variables_bar-height;
         cursor: default;
         width: auto;
         overflow: hidden;
@@ -889,13 +794,13 @@ span {
         text-align: left;
         .cp-app-drive-path-element {
             display: inline-block;
-            height: @toolbar-line-height;
+            height: @variables_bar-height;
-            line-height: @toolbar-line-height;
+            line-height: @variables_bar-height;
-            font-size: @main-font-size;
+            font-size: @colortheme_app-font-size;
             padding: 0 5px;
             border: 0;
-            background: darken(@toolbar-drive-bg, 10%);
+            background: darken(@colortheme_drive-bg, 10%);
-            color: @toolbar-drive-color;
+            color: @colortheme_drive-color;
             box-sizing: border-box;
             transition: all 0.15s;
             &.cp-app-drive-path-separator {
@@ -904,7 +809,7 @@ span {
             &.cp-app-drive-path-lickable {
                 cursor: pointer;
                 &:hover {
-                    background: darken(@toolbar-drive-bg, 15%);
+                    background: darken(@colortheme_drive-bg, 15%);
                 }
             }
         }

www/newdrive/inner.js

@@ -2246,7 +2246,7 @@ define([
             $elementRow.data('path', path);
             addDragAndDropHandlers($elementRow, path, true, droppable);
             if (active) {
-                $elementRow.addClass('cp-app-drive-element-active');
+                $elementRow.addClass('cp-app-drive-element-active cp-leftside-active');
             }
             return $element;
         };

www/whiteboard/app-whiteboard.less

@@ -3,6 +3,7 @@
 @import (once) "../../customize/src/less2/include/markdown.less";
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tools.less';
 
 .toolbar_main();
 .fileupload_main();
@@ -37,12 +38,7 @@
     }
 
     .cp-app-whiteboard-unselectable {
-        -webkit-touch-callout: none;
+        .tools_unselectable();
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
     }
 
     // contains user tools