From b7681ffbf217cc93c74cf529b8855e45f8c6347e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 27 Jan 2021 17:00:21 +0100
Subject: [PATCH] Kanban and file app dark

---
 .../src/less2/include/colortheme-dark.less    |  27 +++-
 .../src/less2/include/colortheme.less         |  29 +++-
 .../src/less2/include/tokenfield.less         |   4 +
 www/file/app-file.less                        |  41 ++---
 www/file/inner.html                           |   2 +-
 www/file/inner.js                             |   6 +-
 www/kanban/app-kanban.less                    | 151 ++++++++++++------
 www/kanban/jkanban.css                        |  97 -----------
 8 files changed, 174 insertions(+), 183 deletions(-)
 delete mode 100644 www/kanban/jkanban.css

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index f69e6505f..1b755fd96 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -237,7 +237,7 @@
 @cp_dropdown-bg-active: @cryptpad_color_grey;
 
 // Rendered Markdown
-@cp_markdown-bg: @cryptpad_color_light_grey;
+@cp_markdown-bg: @cryptpad_color_lighter_grey;
 @cp_markdown-border: @cryptpad_color_grey;
 
 // Avatar
@@ -327,9 +327,9 @@
 @cp_history-fg: @cp_toolbar-bottom-fg;
 
 // Tokenfield
-@cp_token-bg: @cryptpad_color_lighter_grey;
+@cp_token-bg: @cryptpad_color_neutral2_grey;
 @cp_token-fg: @cryptpad_text_col;
-@cp_token-bg-hover: @cryptpad_color_light_grey;
+@cp_token-bg-hover: @cryptpad_color_neutral_grey;
 @cp_token-invalid: @cryptpad_color_warn_red;
 
 // Usergrid
@@ -343,6 +343,8 @@
 
 // Apps
 
+@cp_app-bg: @cryptpad_color_light_grey;
+
 // Accounts
 @cp_accounts-basic: @cryptpad_color_basic;
 @cp_accounts-pro: @cryptpad_color_pro;
@@ -373,7 +375,24 @@
 @cp_debug-hover: fade(@cryptpad_color_black, 10%);
 @cp_debug-icon-hover: @cryptpad_color_dark_grey;
 
-
+// Mediatag
+@cp_mediatag-text-bg: @cryptpad_color_white;
+@cp_mediatag-text-fg: @cryptpad_text_col;
+
+// File
+@cp_file-progress-bg: @colortheme_logo-2;
+@cp_file-progress-fg: @cryptpad_text_col;
+
+// Kanban
+@cp_kanban-fg: @cryptpad_text_col;
+@cp_kanban-item-bg: @cryptpad_color_light_grey;
+@cp_kanban-board-bg: @cryptpad_color_help_grey;
+@cp_kanban-conflict-bg: @cryptpad_color_toolbar_grey;
+@cp_kanban-tags-bg: @cryptpad_color_help_grey;
+@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
+@cp_kanban-trash-bg: @cryptpad_color_warn_red;
+@cp_kanban-color0: @cryptpad_color_neutral2_grey;
+@cp_kanban-colors: darken(#FFD4D4,75%), darken(#FFDECA, 75%), darken(#FFE69C,75%), darken(#DBFFB7,75%), darken(#AFFDC2,75%), darken(#C9FFFE,75%), darken(#C8D6FF,75%), darken(#E4CAFF,75%);
 
 
 
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 7c1475ac1..b1d6258ec 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -241,7 +241,7 @@
 @cp_dropdown-bg-active: @cryptpad_color_grey;
 
 // Rendered Markdown
-@cp_markdown-bg: @cryptpad_color_light_grey;
+@cp_markdown-bg: @cryptpad_color_lighter_grey;
 @cp_markdown-border: @cryptpad_color_grey;
 
 // Avatar
@@ -331,9 +331,9 @@
 @cp_history-fg: @cp_toolbar-bottom-fg;
 
 // Tokenfield
-@cp_token-bg: @cryptpad_color_lighter_grey;
+@cp_token-bg: @cryptpad_color_neutral2_grey;
 @cp_token-fg: @cryptpad_text_col;
-@cp_token-bg-hover: @cryptpad_color_light_grey;
+@cp_token-bg-hover: @cryptpad_color_neutral_grey;
 @cp_token-invalid: @cryptpad_color_warn_red;
 
 // Usergrid
@@ -346,6 +346,8 @@
 
 // Apps
 
+@cp_app-bg: @cryptpad_color_light_grey;
+
 // Accounts
 @cp_accounts-basic: @cryptpad_color_basic;
 @cp_accounts-pro: @cryptpad_color_pro;
@@ -376,4 +378,25 @@
 @cp_debug-hover: fade(@cryptpad_color_black, 10%);
 @cp_debug-icon-hover: @cryptpad_color_dark_grey;
 
+// Mediatag
+@cp_mediatag-text-bg: @cryptpad_color_white;
+@cp_mediatag-text-fg: @cryptpad_text_col;
+
+// File
+@cp_file-progress-bg: @colortheme_logo-2;
+@cp_file-progress-fg: @cryptpad_text_col;
+
+// Kanban
+@cp_kanban-fg: @cryptpad_text_col;
+@cp_kanban-item-bg: @cryptpad_color_light_grey;
+@cp_kanban-board-bg: @cryptpad_color_help_grey;
+@cp_kanban-conflict-bg: @cryptpad_color_toolbar_grey;
+@cp_kanban-tags-bg: @cryptpad_color_help_grey;
+@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
+@cp_kanban-trash-bg: @cryptpad_color_warn_red;
+@cp_kanban-color0: @cryptpad_color_neutral2_grey;
+@cp_kanban-colors: #FFD4D4, #FFDECA, #FFE69C, #DBFFB7, #AFFDC2, #C9FFFE, #C8D6FF, #E4CAFF;
+
+
+
 
diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less
index 5b78414b3..f46ff06aa 100644
--- a/customize.dist/src/less2/include/tokenfield.less
+++ b/customize.dist/src/less2/include/tokenfield.less
@@ -76,6 +76,10 @@
                 height: 100%;
                 vertical-align: middle;
                 padding-right: 4px;
+                color: @cp_token-fg;
+                &:hover {
+                    color: contrast(@cp_token-fg, darken(@cp_token-fg, 10%), lighten(@cp_token-fg, 10%));
+                }
             }
         }
         .token-input {
diff --git a/www/file/app-file.less b/www/file/app-file.less
index 1226ded8d..739720f6e 100644
--- a/www/file/app-file.less
+++ b/www/file/app-file.less
@@ -14,6 +14,7 @@
     // body
     display: flex;
     flex-flow: column;
+    background-color: @cp_app-bg;
 
     #cp-app-file-content {
         flex: 1;
@@ -57,7 +58,8 @@
             width: 90vw;
             height: 100%;
             padding: 2em;
-            background-color: white;
+            background-color: @cp_mediatag-text-bg;
+            color: @cp_mediatag-text-fg;
             overflow-y: auto;
             word-wrap: break-word;
             white-space: pre-wrap;
@@ -77,14 +79,14 @@
             margin-top: 5px;
             height: 40px;
             font-size: 20px;
-            border: 1px solid @colortheme_logo-2;
+            border: 1px solid @cp_file-progress-bg;
             background: white;
-            color: @cryptpad_text_col;
+            color: @cp_file-progress-fg;
             display: flex;
             justify-content: space-between;
             position: relative;
             .cp-app-file-progress-dl {
-                border-right: 1px solid @cryptpad_text_col;
+                border-right: 1px solid @cp_file-progress-fg;
             }
             .cp-app-file-progress-dl, .cp-app-file-progress-dc {
                 width: 50%;
@@ -99,7 +101,7 @@
                 top: 0;
                 left: 0;
                 bottom: 0;
-                background: @colortheme_logo-2;
+                background: @cp_file-progress-bg;
             }
         }
         .cp-app-file-progress-txt {
@@ -116,7 +118,8 @@
         display: block;
         margin: 50px auto;
         max-width: 80vw;
-        label {
+        button {
+            width: 100%;
             line-height: ~"calc(50vh - 20px)";
             text-align: center;
             position: relative;
@@ -143,10 +146,6 @@
             }
         }
     }
-    .cp-app-file-hovering {
-        background-color: rgba(255, 0, 115, 0.5) !important;
-    }
-
     .cp-app-file-block {
         display: block;
     }
@@ -154,31 +153,9 @@
         display: none;
     }
     .cp-app-file-input + label {
-        //border: 2px solid black;
-        //background-color: rgba(50, 50, 50, .10);
         display: block;
     }
 
-    .cp-app-file-input:focus + label,
-    .cp-app-file-input + label:hover {
-        //background-color: rgba(50, 50, 50, 0.30);
-    }
-
-    #cp-app-file-dlprogress {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-
-
-        transition: width 200ms;
-        width: 0%;
-        max-width: 100%;
-        max-height: 100%;
-        background-color: rgba(255, 0, 115, 0.75);
-        z-index: 10000;
-        display: block;
-    }
 
     #cp-app-file-download-view {
         flex: 1;
diff --git a/www/file/inner.html b/www/file/inner.html
index 45ba831fe..450bbbb26 100644
--- a/www/file/inner.html
+++ b/www/file/inner.html
@@ -13,7 +13,7 @@
     <div id="cp-app-file-content">
         <div id="cp-app-file-upload-form" style="display: none;">
             <input type="file" name="file" id="cp-app-file-upfile" class="cp-app-file-input" />
-            <label for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
+            <button for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
                 data-localization="upload_choose"></label>
         </div>
         <div id="cp-app-file-download-view" style="display: none;">
diff --git a/www/file/inner.js b/www/file/inner.js
index 59291c964..5b3fc66ec 100644
--- a/www/file/inner.js
+++ b/www/file/inner.js
@@ -44,7 +44,7 @@ define([
         var $appContainer = $('#cp-app-file-content');
         var $form = $('#cp-app-file-upload-form');
         var $dlview = $('#cp-app-file-download-view');
-        var $label = $form.find('label');
+        var $label = $form.find('button');
         var $bar = $('.cp-toolbar-container');
         var $body = $('body');
 
@@ -175,6 +175,10 @@ define([
             });
         }
 
+        $label.click(function () {
+            $form.find('input[type="file"]').click();
+        });
+
         $form.css({
             display: 'block',
         });
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index ac91a9e1a..80424c9d4 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -14,24 +14,18 @@
     flex-flow: column;
     max-height: 100%;
     min-height: auto;
-    color: @cryptpad_text_col;
+    color: @cp_kanban-fg;
+    background-color: @cp_app-bg;
 
-    @board-bg: #eaeaea;
+    @board-bg: @cp_kanban-board-bg;
 
-    @palette0: #C9C9C9; // Default bg color for header
+    @palette0: @cp_kanban-color0; // Default bg color for header
 
-    @kanban-colors:
-        #FFD4D4,
-        #FFDECA,
-        #FFE69C,
-        #DBFFB7,
-        #AFFDC2,
-        #C9FFFE,
-        #C8D6FF,
-        #E4CAFF;
+    @kanban-colors: @cp_kanban-colors;
 
     .kanban-board-header {
         background-color: @palette0;
+        color: @cp_kanban-fg;
     }
     .kanban-board {
         .kanban-board-inner {
@@ -41,7 +35,10 @@
             display: flex;
             flex-flow: column;
         }
-        color: @cryptpad_text_col;
+        color: @cp_kanban-fg;
+        button {
+            color: @cp_kanban-fg;
+        }
     }
 
     .cp-kanban-palette-nocolor {
@@ -70,8 +67,8 @@
     }
     #cp-kanban-edit-conflicts {
         padding: 5px;
-        background: #eee;
-        color: @cryptpad_text_col;
+        background: @cp_kanban-conflict-bg;
+        color: @cp_kanban-fg;
         font-size: 14px;
         div {
             display: inline;
@@ -83,7 +80,7 @@
         margin-bottom: 5px;
     }
     #cp-kanban-edit-body {
-        border: 1px solid @colortheme_modal-input;
+        border: 1px solid @cp_forms-border;
         .CodeMirror {
             height: 105px;
             resize: vertical;
@@ -92,12 +89,12 @@
             box-sizing: content-box;
         }
         .cp-markdown-toolbar {
-            background-color: #eee;
-            color: @cryptpad_text_col;
+            background-color: @cp_kanban-conflict-bg;
+            color: @cp_kanban-fg;
             button {
                 &:hover {
-                    background-color: @cryptpad_text_col;
-                    color: white;
+                    background-color: @cp_kanban-fg;
+                    color: @cp_kanban-conflict-bg;
                 }
             }
         }
@@ -113,7 +110,7 @@
             width: 30px;
             text-align: center;
             line-height: 30px;
-            color: @cryptpad_text_col;
+            color: @cp_kanban-fg;
         }
     }
     #cp-kanban-edit-tags {
@@ -167,6 +164,19 @@
         padding: 5px;
         flex-wrap: wrap;
         touch-action: none;
+        background: @cp_kanban-item-bg;
+        cursor: move;
+
+        margin-bottom: 10px;
+        &:last-child {
+            margin: 0;
+        }
+        &.is-moving.gu-mirror {
+            transform: rotate(3deg);
+            height: auto !important;
+            opacity: 0.8;
+        }
+
         .cp-kanban-cursors {
             margin-top: 10px;
         }
@@ -197,15 +207,16 @@
                 border: none;
                 padding: 5px;
                 margin: 0;
-                background-color: @cryptpad_color_grey;
+                background-color: @cp_markdown-bg;
+                color: @cp_kanban-fg;
                 width: 100%;
             }
             table {
-                color: @cryptpad_text_col;
-                border-color: @cryptpad_text_col;
+                color: @cp_kanban-fg;
+                border-color: @cp_kanban-fg;
                 th {
                     padding: 5px !important;
-                    background-color: fade(@cryptpad_text_col, 10%);
+                    background-color: fade(@cp_kanban-fg, 10%);
                 }
                 td {
                     padding: 5px;
@@ -220,7 +231,7 @@
                 padding: 0 5px;
                 margin-right: 5px;
                 margin-top: 5px;
-                background-color: rgba(0,0,0,0.1);
+                background-color: @cp_kanban-tags-bg;
                 display: inline-block;
                 font-size: 12px;
             }
@@ -240,6 +251,24 @@
     }
 
     .kanban-board {
+        position: relative;
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        margin: 10px;
+        vertical-align: top;
+        display: flex;
+        flex-flow: column;
+        width: 300px;
+        margin: 10px 5px;
+
+        &.is-moving.gu-mirror {
+            transform: rotate(3deg);
+            opacity: 0.8;
+            .kanban-drag {
+                overflow: hidden;
+                padding-right: 50px;
+            }
+        }
+
         main {
             padding: 0 10px;
             margin: 10px 0;
@@ -255,12 +284,18 @@
             padding: 5px 10px;
             .kanban-title-board {
                 flex: 1;
-                margin-right: 10px;
                 min-width: 0;
                 overflow: hidden;
                 //white-space: nowrap;
                 text-overflow: ellipsis;
+                font-weight: 700;
+                margin: 0;
+                margin-right: 10px;
+                padding: 0;
+                display: inline;
+                cursor: text;
             }
+
             #kanban-edit {
                 font-weight: bold;
             }
@@ -276,8 +311,8 @@
                 .tools_unselectable();
                 outline: none;
                 width: 50%;
-                border: 1px solid fade(@cryptpad_text_col, 70%);
-                color: fade(@cryptpad_text_col, 70%);
+                border: 1px solid fade(@cp_kanban-fg, 70%);
+                color: fade(@cp_kanban-fg, 70%);
                 border-radius: 0px;
                 font-size: 25px;
                 display: inline-flex;
@@ -293,7 +328,7 @@
                     margin-left: 5px;
                 }
                 &:hover {
-                    background-color: rgba(0,0,0,0.1);
+                    background-color: @cp_kanban-add-hover;
                 }
                 .fa {
                     margin-right: 5px;
@@ -351,7 +386,7 @@
                 }
                 em {
                     font-size: 14px;
-                    color: lighten(@cryptpad_text_col, 10%);
+                    color: lighten(@cp_kanban-fg, 10%);
                 }
 
                 span {
@@ -359,13 +394,13 @@
                     padding: 0 5px;
                     margin-right: 5px;
                     margin-top: 5px;
-                    background-color: rgba(0,0,0,0.1);
+                    background-color: @cp_kanban-tags-bg;
                     display: inline-block;
                     font-size: 14px;
                     cursor: pointer;
                     &.active {
-                        background-color: @cryptpad_text_col;
-                        color: #fff;
+                        background-color: @cp_kanban-fg;
+                        color: @cp_kanban-item-bg;
                     }
                 }
             }
@@ -393,8 +428,8 @@
             #cp-kanban-controls {
                 .cp-kanban-changeView {
                     span.cp-kanban-view {
-                        background-color: @cryptpad_text_col !important;
-                        color: white;
+                        background-color: @cp_kanban-fg !important;
+                        color: @cp_app-bg;
                     }
                     span.cp-kanban-view-small {
                     }
@@ -407,8 +442,8 @@
                     span.cp-kanban-view {
                     }
                     span.cp-kanban-view-small {
-                        background-color: @cryptpad_text_col !important;
-                        color: white;
+                        background-color: @cp_kanban-fg !important;
+                        color: @cp_app-bg;
                     }
                 }
             }
@@ -471,14 +506,14 @@
                 right: 0;
             }
             &.kanban-trash-active {
-                color: @colortheme_notification-warn;
+                color: @cp_kanban-trash-bg;
                 div {
-                    background: fade(@colortheme_notification-warn, 20%);
+                    background: fade(@cp_kanban-trash-bg, 20%);
                 }
             }
             &.kanban-trash-suggest {
                 div {
-                    background: fade(@cryptpad_text_col, 20%);
+                    background: fade(@cp_kanban-fg, 20%);
                 }
             }
             .kanban-item, .kanban-board {
@@ -489,7 +524,7 @@
         #kanban-edit {
             width: 100%;
             background: transparent;
-            border: 1px solid rgba(0,0,0,0.3);
+            border: 1px solid @cp_kanban-add-hover;
             color: inherit;
         }
 
@@ -497,8 +532,8 @@
             order: 2;
             width: 300px;
             margin: 10px 5px;
-            border: 1px solid @cryptpad_text_col;
-            color: @cryptpad_text_col;
+            border: 1px solid @cp_kanban-fg;
+            color: @cp_kanban-fg;
             height: 40px;
             display: inline-flex;
             justify-content: center;
@@ -509,7 +544,7 @@
             cursor: pointer;
             .tools_unselectable();
             &:hover {
-                background-color: rgba(0,0,0,0.1);
+                background-color: @cp_kanban-add-hover;
             }
         }
 
@@ -571,4 +606,30 @@
         }
     }
 
+    .gu-mirror {
+        position: fixed !important;
+        margin: 0 !important;
+        z-index: 9999 !important;
+    }
+
+    .gu-hide {
+        display: none !important;
+    }
+
+    .gu-unselectable {
+        -webkit-user-select: none !important;
+        -moz-user-select: none !important;
+        -ms-user-select: none !important;
+        user-select: none !important;
+    }
+
+    .gu-transit {
+        opacity: 0.2 !important;
+        transform: rotate(0deg) !important;
+    }
+
+    .form-group {
+        text-align: right;
+        margin-button: 5px;
+    }
 }
diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css
deleted file mode 100644
index bb8d5eb6a..000000000
--- a/www/kanban/jkanban.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.kanban-container * {
-    box-sizing: border-box;
-}
-
-.kanban-board {
-    position: relative;
-    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    margin: 10px;
-    vertical-align: top;
-    display: flex;
-    flex-flow: column;
-    width: 300px;
-    margin: 10px 5px;
-}
-
-.kanban-board.disabled-board {
-    opacity: .3;
-}
-
-.kanban-board.is-moving.gu-mirror {
-    transform: rotate(3deg);
-    opacity: 0.8;
-}
-
-.kanban-board.is-moving.gu-mirror .kanban-drag {
-    overflow: hidden;
-    padding-right: 50px;
-}
-
-.kanban-board header {
-    font-size: 16px;
-    padding: 10px;
-}
-
-.kanban-board header .kanban-title-board {
-    font-weight: 700;
-    margin: 0;
-    padding: 0;
-    display: inline;
-    cursor: text;
-}
-
-.kanban-board header .kanban-title-button {
-    float: right;
-    line-height: 1;
-    padding: .25rem .5rem;
-}
-
-
-.kanban-item {
-    background: #fff;
-    padding: 15px;
-    margin-bottom: 10px;
-}
-
-.kanban-item:hover {
-    cursor: move;
-}
-
-.kanban-item:last-child {
-    margin: 0;
-}
-
-.kanban-item.is-moving.gu-mirror {
-    transform: rotate(3deg);
-    height: auto !important;
-    opacity: 0.8;
-}
-
-/* Dragula CSS  */
-
-.gu-mirror {
-    position: fixed !important;
-    margin: 0 !important;
-    z-index: 9999 !important;
-}
-
-.gu-hide {
-    display: none !important;
-}
-
-.gu-unselectable {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-}
-
-.gu-transit {
-    opacity: 0.2 !important;
-    transform: rotate(0deg) !important;
-}
-
-.form-group {
-    text-align: right;
-    margin-button: 5px;
-}