Add fallback for browsers which do not support CSS variables

bower.json

@@ -36,7 +36,7 @@
     "alertifyjs": "1.0.11",
     "scrypt-async": "1.2.0",
     "require-css": "0.1.10",
-    "less": "^2.7.2",
+    "less": "^3.7.1",
     "bootstrap": "^v4.0.0",
     "diff-dom": "2.1.1",
     "nthen": "^0.1.5",

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

@@ -1,11 +1,18 @@
 @import (reference) "./tools.less";
+.avatar_vars(
+    @width: 30px
+) {
+    @avatar-width: @width;
+    @avatar-font-size: @width / 1.2;
+}
 .avatar_main(@width) {
     --LessLoader_require: LessLoader_currentFile();
-
-    --avatar-width: @width;
-    --avatar-font-size: @width / 1.2;
+    .avatar_vars(@width);
+    --avatar-width: @avatar-width;
+    --avatar-font-size: @avatar-font-size;
 }
 & {
+    .avatar_vars();
     &.cp-avatar {
         overflow: hidden;
         text-overflow: ellipsis;

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

@@ -1,17 +1,28 @@
 @import (reference) "./colortheme-all.less";
 
+.checkmark_vars(
+    @size: 20px
+) {
+    @checkmark-size: @size;
+    @checkmark-width: round(@size / 8);
+    @checkmark-dim1: round(@size / 3);
+    @checkmark-dim2: round(2 * @size / 3);
+    @checkmark-top: round(@size / 12) - 1;
+    @checkmark-radio-size: @checkmark-dim1 * 3;
+}
+
 .checkmark_main(@size) {
     --LessLoader_require: LessLoader_currentFile();
-
-    --checkmark-size: @size;
-    --checkmark-width: round(@size / 8);
-    @dim1: round(@size / 3);
-    --checkmark-dim1: round(@size / 3);
-    --checkmark-dim2: round(2 * @size / 3);
-    --checkmark-top: round(@size / 12) - 1;
-    --checkmark-radio-size: @dim1 * 3;
+    .checkmark_vars(@size);
+    --checkmark-size: @checkmark-size;
+    --checkmark-width: @checkmark-width;
+    --checkmark-dim1: @checkmark-dim1;
+    --checkmark-dim2: @checkmark-dim2;
+    --checkmark-top: @checkmark-top;
+    --checkmark-radio-size: @checkmark-radio-size;
 }
 & {
+    .checkmark_vars();
     // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
     .cp-checkmark {
         margin: 0;
@@ -64,7 +75,9 @@
         .cp-checkmark-mark {
             margin-right: 10px;
             position: relative;
+            height: @checkmark-size;
             height: var(--checkmark-size);
+            width: @checkmark-size;
             width: var(--checkmark-size);
             background-color: @colortheme_checkmark-back0;
             display: flex;
@@ -74,11 +87,15 @@
             &:after {
                 content: "";
                 display: none;
+                margin-top: @checkmark-top;
                 margin-top: var(--checkmark-top);
+                width: @checkmark-dim1;
                 width: var(--checkmark-dim1);
+                height: @checkmark-dim2;
                 height: var(--checkmark-dim2);
                 transform: rotate(45deg);
                 border: solid @colortheme_checkmark-col1;
+                border-width: 0 @checkmark-width @checkmark-width 0;
                 border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
                 position: absolute;
             }
@@ -139,7 +156,9 @@
         .cp-radio-mark {
             margin-right: 10px;
             position: relative;
+            height: @checkmark-radio-size;
             height: var(--checkmark-radio-size);
+            width: @checkmark-radio-size;
             width: var(--checkmark-radio-size);
             background-color: @colortheme_checkmark-back0;
             border-radius: 50%;
@@ -153,7 +172,9 @@
                 content: "";
                 border-radius: 50%;
                 background: white;
+                width: @checkmark-dim1;
                 width: var(--checkmark-dim1);
+                height: @checkmark-dim1;
                 height: var(--checkmark-dim1);
 
                 //transform: rotate(45deg);

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

@@ -3,18 +3,25 @@
 @import (reference) "./tools.less";
 @import (reference) './icon-colors.less';
 
+.creation_vars(
+    @color: @colortheme_default-color,
+    @bg-color: @colortheme_default-bg
+) {
+    @creation-color: @color;
+    @creation-bg-color: @bg-color;
+};
+
 .creation_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
+    @color,
+    @bg-color
 ) {
     --LessLoader_require: LessLoader_currentFile();
-
+    .creation_vars(@color, @bg-color);
     --creation-color: @color;
     --creation-bg-color: @bg-color;
-    // --creation-warn-color: @warn-color; // unused
 }
 & {
+    .creation_vars();
     @colortheme_creation-modal-bg: #fff;
     @colortheme_creation-modal: #666;
     @colortheme_creation-modal-title: @colortheme_loading-bg;
@@ -267,9 +274,12 @@
                     border: 1px solid transparent;
 
                     &.cp-creation-template-selected {
+                        color: @creation-color !important;
                         color: var(--creation-color) !important;
+                        background-color: @creation-bg-color !important;
                         background-color: var(--creation-bg-color) !important;
                         .fa {
+                            color: @creation-color;
                             color: var(--creation-color);
                         }
                     }
@@ -301,6 +311,7 @@
                         max-width: 100%;
                     }
                     .fa {
+                        color: @creation-bg-color;
                         color: var(--creation-bg-color);
                         cursor: pointer;
                         width: 100px;

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

@@ -34,7 +34,6 @@
     .password_main();
     .creation_main(
         @bg-color: @bg-color,
-        @warn-color: @warn-color,
         @color: @color
     );
     font: @colortheme_app-font;

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

@@ -1,16 +1,26 @@
 @import (reference) "./colortheme-all.less";
 
+.help_vars (
+    @color: @colortheme_default-color,
+    @bg-color: @colortheme_default-bg
+) {
+    @help-bg-color-l15: lighten(@bg-color, 15%);
+    @help-text-color: contrast(@help-bg-color-l15, #fff, #000); //@color;
+    @help-link-color: contrast(@help-bg-color-l15, lighten(spin(@bg-color, 180), 10%), darken(spin(@bg-color, 180), 10%));
+}
 .help_main (@color, @bg-color) {
     --LessLoader_require: LessLoader_currentFile();
-
-    --help-bg-color-l15: lighten(@bg-color, 15%);
-    --help-bg-color-spin: spin(@bg-color, 180);
-    --help-bg-color-spin-d10: darken(spin(@bg-color, 180), 10%);
-    --help-bg-color-spin-l10: lighten(spin(@bg-color, 180), 10%);
-}
+    .help_vars(@color, @bg-color);
+    --help-bg-color-l15: @help-bg-color-l15;
+    --help-text-color: @help-text-color;
+    --help-link-color: @help-link-color;
+};
 & {
+    .help_vars();
     .cp-help-container {
+
         position: relative;
+        background-color: @help-bg-color-l15;
         background-color: var(--help-bg-color-l15);
         &.cp-help-hidden {
             display: none;
@@ -22,13 +32,13 @@
             right: 5px;
         }
         .cp-help-text {
-            color: contrast(var(--help-bg-color-l15), #fff, #000); //@color;
+            color: @help-text-color;
+            color: var(--help-text-color);
             margin: 0;
             padding: 15px;
             a {
-                //color: darken(@colortheme_link-color, 30%);
-                color: contrast(var(--help-bg-color-l15), var(--help-bg-color-spin-l10), var(--help-bg-color-spin-d10));
-                //color: darken(spin(var(--help-bg-color-l15), 180), 10%);
+                color: @help-link-color;
+                color: var(--help-link-color);
             }
             h1 {
                 font-size: 20px;

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

@@ -10,27 +10,52 @@
 @import (reference) "./modal.less";
 @import (reference) "./help.less";
 
-.toolbar_main (
+.toolbar_vars (
     @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
+    @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
+) {
+    @toolbar-color: @color;
+    @toolbar-color-l20: lighten(@color, 20%);
+    @toolbar-color-d20: darken(@color, 20%);
+    @toolbar-color-d15: darken(@color, 15%);
+
+    @toolbar-bg-color: @bg-color;
+    @toolbar-bg-color-l8: lighten(@bg-color, 8%);
+    @toolbar-bg-color-l20: lighten(@bg-color, 20%);
+    @toolbar-bg-color-d5: darken(@bg-color, 5%);
+    @toolbar-bg-color-d10: darken(@bg-color, 10%);
+    @toolbar-bg-color-d15: darken(@bg-color, 15%);
+
+    @toolbar-warn-color: @warn-color;
+
+    @toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20);
+};
+
+.toolbar_main (
+    @color, // Color of the text for the toolbar
+    @bg-color, // color of the toolbar background
+    @warn-color, // color of the warning text in the toolbar
     @barWidth: 600px // width of the toolbar
 ) {
     --LessLoader_require: LessLoader_currentFile();
+    .toolbar_vars(@color, @bg-color, @warn-color);
 
-    --toolbar-color: @color;
-    --toolbar-color-l20: lighten(@color, 20%);
-    --toolbar-color-d20: darken(@color, 20%);
-    --toolbar-color-d15: darken(@color, 15%);
+    --toolbar-color: @toolbar-color;
+    --toolbar-color-l20: @toolbar-color-l20;
+    --toolbar-color-d20: @toolbar-color-d20;
+    --toolbar-color-d15: @toolbar-color-d15;
 
-    --toolbar-bg-color: @bg-color;
-    --toolbar-bg-color-l8: lighten(@bg-color, 8%);
-    --toolbar-bg-color-l20: lighten(@bg-color, 20%);
-    --toolbar-bg-color-d5: darken(@bg-color, 5%);
-    --toolbar-bg-color-d10: darken(@bg-color, 10%);
-    --toolbar-bg-color-d15: darken(@bg-color, 15%);
+    --toolbar-bg-color: @toolbar-bg-color;
+    --toolbar-bg-color-l8: @toolbar-bg-color-l8;
+    --toolbar-bg-color-l20: @toolbar-bg-color-l20;
+    --toolbar-bg-color-d5: @toolbar-bg-color-d5;
+    --toolbar-bg-color-d10: @toolbar-bg-color-d10;
+    --toolbar-bg-color-d15: @toolbar-bg-color-d15;
 
-    --toolbar-warn-color: @warn-color;
+    --toolbar-warn-color: @toolbar-warn-color;
+
+    --toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
 
     @media screen and (max-width: @barWidth) {
         .cp-toolbar-rightside {
@@ -47,6 +72,7 @@
     .modal_main();
 };
 & {
+    .toolbar_vars();
     @toolbar_line-height: 32px;
     @toolbar_top-height: 64px;
     @toolbar_button-font: @colortheme_app-font;
@@ -59,15 +85,18 @@
 
     .cp-markdown-toolbar {
         height: @toolbar_line-height;
+        background-color: @toolbar-bg-color-l20;
         background-color: var(--toolbar-bg-color-l20);
         display: none;
         button {
             height: @toolbar_line-height !important;
             outline: 0;
+            color: @toolbar-color;
             color: var(--toolbar-color);
             .toolbar_button;
             font: normal normal normal 14px/1 FontAwesome;
             &:hover {
+                background-color: @toolbar-bg-color-l8;
                 background-color: var(--toolbar-bg-color-l8);
             }
             &.cp-markdown-help { float: right; }
@@ -106,6 +135,7 @@
     }
 
     .cp-toolbar-userlist-drawer {
+        background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
         font: @colortheme_app-font-size @colortheme_font;
         min-width: 175px;
@@ -294,30 +324,38 @@
     }
 
     .cp-toolbar-userlist-drawer {
+        background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
+        color: @toolbar-color;
         color: var(--toolbar-color);
         .cp-toolbar-userlist-drawer-close {
+            color: @toolbar-color;
             color: var(--toolbar-color);
         }
         h2 {
+            background-color: @toolbar-bg-color-d10;
             background-color: var(--toolbar-bg-color-d10);
+            color: @toolbar-color;
             color: var(--toolbar-color);
         }
         .cp-toolbar-userlist-name-input {
+            background-color: @toolbar-bg-color-d10;
             background-color: var(--toolbar-bg-color-d10);
+            color: @toolbar-color;
             color: var(--toolbar-color);
         }
         .cp-toolbar-userlist-name-edit {
-            color: contrast(var(--toolbar-color),
-                            var(--toolbar-color-l20),
-                            var(--toolbar-color-d20));
+            color: @toolbar-userlist-name-edit;
+            color: var(--toolbar-userlist-name-edit);
             background: transparent;
             &:hover {
+                color: @toolbar-color;
                 color: var(--toolbar-color);
             }
         }
         .cp-toolbar-userlist-friend {
             &:hover {
+                color: @toolbar-color-d15;
                 color: var(--toolbar-color-d15);
             }
         }
@@ -338,7 +376,9 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
+        background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
+        color: @toolbar-color;
         color: var(--toolbar-color);
 
         .fa {
@@ -557,24 +597,32 @@
 
         .cp-toolbar-spinner {
             font-size: @colortheme_app-font-size;
+            color: @toolbar-color;
             color: var(--toolbar-color);
         }
         .cp-toolbar-limit {
+            text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
             text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
+            color: @toolbar-warn-color;
             color: var(--toolbar-warn-color);
         }
         .cp-toolbar-leftside, .cp-toolbar-rightside {
+            background-color: @toolbar-bg-color-l8;
             background-color: var(--toolbar-bg-color-l8);
             button:hover, button.cp-toolbar-button-active {
+                background-color: @toolbar-bg-color;
                 background-color: var(--toolbar-bg-color);
             }
         }
         .cp-toolbar-title-hoverable:hover {
             .cp-toolbar-title-editable, .cp-toolbar-title-edit {
                 cursor: text;
+                border: 1px solid @toolbar-bg-color-d15;
                 border: 1px solid var(--toolbar-bg-color-d15);
+                background: @toolbar-bg-color-d10;
                 background: var(--toolbar-bg-color-d10);
                 transition: all 0.15s;
+                color: @toolbar-color;
                 color: var(--toolbar-color);
             }
             .cp-toolbar-title-editable {
@@ -582,16 +630,23 @@
             }
         }
         .cp-toolbar-title-save {
+            border: 1px solid @toolbar-bg-color-d15;
             border: 1px solid var(--toolbar-bg-color-d15);
+            background: @toolbar-bg-color-d10;
             background: var(--toolbar-bg-color-d10);
+            color: @toolbar-color;
             color: var(--toolbar-color);
             &:hover {
+                background: @toolbar-bg-color-d5;
                 background: var(--toolbar-bg-color-d5);
             }
         }
         input {
+            border: 1px solid @toolbar-bg-color-d15;
             border: 1px solid var(--toolbar-bg-color-d15);
+            background: @toolbar-bg-color-d10;
             background: var(--toolbar-bg-color-d10);
+            color: @toolbar-color;
             color: var(--toolbar-color);
         }
         .cp-dropdown-content.cp-dropdown-left a {
@@ -618,6 +673,7 @@
             padding: 0;
             margin: 0 5px;
             font-size: @colortheme_app-font-size;
+            color: @toolbar-warn-color;
             color: var(--toolbar-warn-color);
             .cp-pnp-msg {
                 padding-left: 5px;
@@ -627,6 +683,7 @@
                     font-size: @colortheme_app-font-size;
                     font-family: @colortheme_font;
                     font-weight: bold;
+                    color: @toolbar-warn-color;
                     color: var(--toolbar-warn-color);
                     &:hover {
                         text-decoration: underline;
@@ -921,11 +978,6 @@
         display: flex;
         min-height: @toolbar_line-height;
         overflow: hidden;
-        @media screen and (max-width: var(--toolbar-barWidth)) { // 450px
-            flex-wrap: wrap;
-            height: auto;
-            width: 100%;
-        }
         &:empty {
             min-height: 0;
             height: 0;