From a574cfe1e293ed7231b7f3f3d55bb357fa0d04b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Thu, 17 Feb 2022 17:01:42 +0000
Subject: [PATCH] Continue toolbar redesign

---
 customize.dist/src/less2/include/drive.less   |  2 +-
 .../src/less2/include/toolbar-history.less    | 10 ++++-
 customize.dist/src/less2/include/toolbar.less | 42 ++++++++++++-------
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 0f3d4b491..95dc6993d 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -486,7 +486,7 @@
             position: absolute;
             z-index: 50;
         }
-        &.cp-app-drive-readonly { // XXX NOW
+        &.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive?
             background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
         }
         h1 {
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 940dea292..66911e545 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -89,7 +89,9 @@
             }
             button {
                 margin: 0 5px;
-                border: 1px solid @cryptpad_text_col;
+                border: 1px solid @cp_toolbar-fg;
+                background-color: @cp_toolbar-fg;
+                color: @cp_toolbar-fg-inv;
                 border-radius: @variables_radius;
                 text-transform: uppercase;
                 display: inline-flex;
@@ -97,6 +99,9 @@
                 .fa:not(:last-child) {
                     margin-right: 5px;
                 }
+                &:hover {
+                    background-color: fade(@cp_toolbar-fg, 70%);
+                }
                 &:disabled {
                     cursor: not-allowed !important;
                     opacity: 0.6;
@@ -235,9 +240,10 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-left: 40px;
+            margin: 5px 0px 5px 40px;
             button {
                 width: 50px;
+                border-radius: @variables_radius;
                 .fa:first-child:not(:last-child) {
                     margin-right: 5px;
                 }
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 42ee0d9b6..75acce462 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -897,8 +897,8 @@
     }
 
     .cp-toolbar-history, .cp-toolbar-snapshots {
-        background-color: @toolbar-bg-color-light; // XXX NOW
-        background-color: var(--toolbar-bg-color-light);
+        background-color: @cp_toolbar-bg;
+        //background-color: var(--toolbar-bg-color-light);
         color: @toolbar-color;
     }
     .cp-toolbar-snapshots {
@@ -956,9 +956,6 @@
 
         button {
             border: 1px solid @cp_toolbar-bottom-fg;
-            background-color: @cp_toolbar-bottom-fg;
-            color: @cp_toolbar-fg-inv;
-            //border-color: var(--toolbar-bg-color-active);
             box-sizing: border-box;
             position: relative;
             margin: 0px;
@@ -973,15 +970,26 @@
                 background-color: fade(@cp_toolbar-bottom-fg, 70%);
             }
         }
-        button.cp-toolbar-button-active {
-            background-color: @cp_toolbar-bg;
-            border-color: @cp_toolbar-bottom-fg;
-            color: @cp_toolbar-bottom-fg;
+        .cp-toolbar-bottom-left > button,
+        .cp-toolbar-bottom-mid > button,
+        .cp-toolbar-bottom-right > button,
+        .cp-toolbar-bottom-right > span > button {
+            background-color: @cp_toolbar-bottom-fg;
+            color: @cp_toolbar-fg-inv;
             &:hover {
-                background-color: fade(@cp_toolbar-bottom-fg, 30%);
+                background-color: fade(@cp_toolbar-bottom-fg, 70%);
+            }
+            &.cp-toolbar-button-active {
+                background-color: @cp_toolbar-bg;
+                border-color: @cp_toolbar-bottom-fg;
+                color: @cp_toolbar-bottom-fg;
+                &:hover {
+                    background-color: fade(@cp_toolbar-bottom-fg, 30%);
+                }
             }
         }
 
+
         button.cp-toolbar-button-primary {
             background-color: @toolbar-bg-color;
             background-color: var(--toolbar-bg-color);
@@ -1105,6 +1113,7 @@
             }
             .cp-toolbar-drawer-content {
                 box-shadow: 0px 1px 5px 0px @cp_shadow-color;
+                border-radius: @variables_radius;
                 overflow-y: auto;
                 overflow-x: hidden;
                 &.cp-dropdown-visible {
@@ -1113,13 +1122,14 @@
                 position: absolute;
                 left: 0px;
                 top: @toolbar_line-height;
-                margin: -1px;
+                //margin: -1px;
+                padding: 5px;
                 min-width: 50px;
-                background: @cp_dropdown-bg; // XXX not applied
+                background: @cp_dropdown-bg;
                 display: flex;
                 flex-flow: column;
                 z-index: 10000; //Z cp-toolbar-drawer-content
-                color: @cp_dropdown-fg; // XXX not applied
+                color: @cp_dropdown-fg;
                 .tools_unselectable();
                 .fa {
                     font-size: 17px;
@@ -1129,15 +1139,15 @@
                     box-sizing: border-box;
                     min-width: 150px;
                     height: @toolbar_line-height;
-                    border-radius: 0;
+                    border-radius: @variables_radius;
                     border: 0;
                 }
                 button {
                     white-space: nowrap;
-                    padding: 5px 16px;
+                    padding: 5px;
                     text-align: left;
                     margin: 0;
-                    border-radius: 0;
+                    border-radius: @variables_radius;
                     border: 0;
                     width: 100%;
                     line-height: 1em;