From 30d802434a05c13ef5314f8ec9c9f78c6bb20fa3 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 13 May 2020 15:31:05 +0200
Subject: [PATCH] New colortheme

---
 .../src/less2/include/colortheme.less         |  14 +-
 customize.dist/src/less2/include/toolbar.less | 201 +++---------------
 2 files changed, 40 insertions(+), 175 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 709afa7c8..691d008ce 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -68,36 +68,36 @@
 @colortheme_dropdown-bg-active: #e8e8e8;
 
 // Apps, these colors are used for customizing the toolbar for the apps.
+@colortheme_pad-toolbar-bg: #eeeeee;
 
-@colortheme_pad-bg: #1c4fa0;
+@colortheme_pad-bg: #256ad5;
 @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-bg: #EAA000;
 @colortheme_code-color: #000;
 @colortheme_code-warn: #9A37F7;
 
-@colortheme_poll-bg: #006304;
+@colortheme_poll-bg: #2c9e98;
 @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-bg: #a72ba7;
 @colortheme_whiteboard-color: #fff;
 @colortheme_whiteboard-warn: #ffae00;
 
-@colortheme_drive-bg: #0087ff;
+@colortheme_drive-bg: #0087FF;
 @colortheme_drive-color: #fff;
 @colortheme_drive-warn: #cd2532;
 
-@colortheme_teams-bg: #0b0061;
+@colortheme_teams-bg: #4a3bbd;
 @colortheme_teams-color: #fff;
 @colortheme_teams-warn: #cd2532;
 
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 8eee90a41..d28b9d8f0 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -16,21 +16,16 @@
     @bg-color: @colortheme_default-bg, // color of the toolbar background
     @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-color: @cryptpad_text_col;
 
     @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-light: lighten(@bg-color, 30%);
+    @toolbar-bg-color-active: lighten(@bg-color, 20%);
     @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-userlist-name-edit: @toolbar-color;
 };
 
 .toolbar_main (
@@ -43,29 +38,16 @@
     .toolbar_vars(@color, @bg-color, @warn-color);
 
     --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: @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-light: @toolbar-bg-color-light;
+    --toolbar-bg-color-active: @toolbar-bg-color-active;
     --toolbar-bg-color-d10: @toolbar-bg-color-d10;
-    --toolbar-bg-color-d15: @toolbar-bg-color-d15;
 
     --toolbar-warn-color: @toolbar-warn-color;
 
     --toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
 
-    @media screen and (max-width: @barWidth) {
-        .cp-toolbar-rightside {
-            flex-wrap: wrap;
-            height: auto;
-            width: 100%;
-        }
-    }
-
     .help_main(@color, @bg-color);
     .notifications_main();
     .dropdown_main();
@@ -87,6 +69,7 @@
     }
 
     .toolbar_vars();
+    @toolbar-top-bg: #eeeeee;
     @toolbar_line-height: 32px;
     @toolbar_top-height: 76px;
     @toolbar_button-font: @colortheme_app-font;
@@ -105,8 +88,7 @@
 
     .cp-markdown-toolbar {
         height: @toolbar_line-height;
-        background-color: @toolbar-bg-color-l20;
-        background-color: var(--toolbar-bg-color-l20);
+        background-color: @colortheme_pad-toolbar-bg;
         display: none;
         button {
             height: @toolbar_line-height !important;
@@ -116,8 +98,7 @@
             .toolbar_button;
             font: normal normal normal 14px/1 FontAwesome;
             &:hover {
-                background-color: @toolbar-bg-color-l8;
-                background-color: var(--toolbar-bg-color-l8);
+                background-color: darken(@colortheme_pad-toolbar-bg, 5%);
             }
             &.cp-markdown-help { float: right; }
         }
@@ -415,12 +396,6 @@
                 color: var(--toolbar-color);
             }
         }
-        .cp-toolbar-userlist-friend {
-            &:hover {
-                color: @toolbar-color-d15;
-                color: var(--toolbar-color-d15);
-            }
-        }
     }
 
     .cp-toolbar {
@@ -438,17 +413,10 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-/*
-// XXX
-        background-color: @toolbar-bg-color;
-        background-color: var(--toolbar-bg-color);
-        color: @toolbar-color;
-        color: var(--toolbar-color);
- */
-background-color: #ffffff;
-color: @toolbar-bg-color;
-color: var(--toolbar-bg-color);
 
+        background-color: @toolbar-top-bg;
+        color: @toolbar-bg-color;
+        color: var(--toolbar-bg-color);
 
         .fa {
             font: normal normal normal 14px/1 FontAwesome;
@@ -633,11 +601,6 @@ color: var(--toolbar-bg-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);
-            color: #FFF; // XXX
-        }
         .cp-dropdown-content.cp-dropdown-left a {
             color: black;
         }
@@ -738,8 +701,8 @@ color: var(--toolbar-bg-color);
                 align-self: baseline;
                 &:hover {
                     .cp-toolbar-title-editable, .cp-toolbar-title-edit {
-                        border: 1px solid @toolbar-bg-color-d15;
-                        border: 1px solid var(--toolbar-bg-color-d15);
+                        border: 1px solid @toolbar-bg-color;
+                        border: 1px solid var(--toolbar-bg-color);
                         transition: all 0.15s;
                     }
                     .cp-toolbar-title-editable {
@@ -757,8 +720,8 @@ color: var(--toolbar-bg-color);
                 }
             }
             .cp-toolbar-title-save {
-                border: 1px solid @toolbar-bg-color-d15;
-                border: 1px solid var(--toolbar-bg-color-d15);
+                border: 1px solid @toolbar-bg-color;
+                border: 1px solid var(--toolbar-bg-color);
                 cursor: pointer;
                 padding: 5px;
                 border-collapse: collapse;
@@ -773,8 +736,8 @@ color: var(--toolbar-bg-color);
             }
             input {
                 color: @cryptpad_text_col;
-                border: 1px solid @toolbar-bg-color-d15;
-                border: 1px solid var(--toolbar-bg-color-d15);
+                border: 1px solid @toolbar-bg-color;
+                border: 1px solid var(--toolbar-bg-color);
                 max-width: ~"calc(100% - 40px)";
                 //flex: 1;
                 vertical-align: middle;
@@ -794,26 +757,8 @@ color: var(--toolbar-bg-color);
             padding: 0;
             box-sizing: border-box;
             display: inline-block;
-
-/*
-            // XXX
-            color: white;
-            a {
-                color: white;
-            }
-            transition: all 0.15s;
- */
-
         }
         .cp-toolbar-notifications {
-/*
-            // XXX
-            background-color: rgba(0,0,0,0.2);
-            &:hover {
-                background-color: rgba(0,0,0,0.3);
-            }
- */
-
             text-align: center;
             font-size: 32px;
             &> button {
@@ -872,15 +817,6 @@ color: var(--toolbar-bg-color);
             align-items: center;
             justify-content: center;
             cursor: pointer;
-/*
-// XXX
-            background-color: rgba(0,0,0,0.4);
-            &:hover {
-                background-color: rgba(0,0,0,0.5);
-            }
- */
-
-
             order: 1;
             .fa {
                 margin: 0;
@@ -911,11 +847,6 @@ color: var(--toolbar-bg-color);
             display: inline-flex;
             order: 6;
             line-height: @toolbar_top-height;
-/*
-// XXX
- color: white;
- */
-
             .cp-toolbar-notifications { order: 1; }
             .cp-toolbar-user-dropdown { order: 3; }
             .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
@@ -988,12 +919,21 @@ color: var(--toolbar-bg-color);
     }
 
     .cp-toolbar-bottom {
-        background-color: @toolbar-bg-color-l8;
-        background-color: var(--toolbar-bg-color-l8);
+        background-color: @toolbar-bg-color-light;
+        background-color: var(--toolbar-bg-color-light);
         color: @cryptpad_text_col;
         button:hover, button.cp-toolbar-button-active {
-            background-color: @toolbar-bg-color;
-            background-color: var(--toolbar-bg-color);
+            background-color: @toolbar-bg-color-active;
+            background-color: var(--toolbar-bg-color-active);
+        }
+        button.cp-toolbar-button-active {
+            border-color: @toolbar-bg-color-active;
+            border-color: var(--toolbar-bg-color-active);
+        }
+        button:hover, button:focus {
+            border-color: @toolbar-bg-color-active;
+            border-color: var(--toolbar-bg-color-active);
+            //border-color: @cryptpad_text_col;
         }
 
         display: inline-flex;
@@ -1012,6 +952,8 @@ color: var(--toolbar-bg-color);
             }
         }
         button {
+            border: 1px solid transparent;
+            box-sizing: border-box;
             position: relative;
             margin: 0px;
             border-radius: 0;
@@ -1142,83 +1084,6 @@ color: var(--toolbar-bg-color);
         }
     }
 
-    .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: 0; }
-        #cp-toolbar-chat-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-chat-drawer-open button {
-            &.cp-toolbar-notification {
-                animation: notification 2s ease-in-out infinite;
-            }
-        }
-        .cp-toolbar-share-button {
-            width: 50px;
-            text-align: center;
-        }
-    }
-    .cp-toolbar-rightside {
-        display: flex;
-        min-height: @toolbar_line-height;
-        overflow: hidden;
-        &: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-spinner {
         color: @cryptpad_text_col;
         font-size: 14px;