New toolbar colors

customize.dist/src/less/toolbar.less

@@ -28,12 +28,47 @@
     @toolbar-green: #5cb85c;
 
     box-sizing: border-box;
-    padding: 0px 6px;
+    padding: 0px;
 
     //background-color: #BBBBFF;
     background-color: @toolbar-default-bg;
     color: @toolbar-default-color;
-
+    &.pad {
+        @color: @toolbar-pad-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.code {
+        @color: @toolbar-code-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.slide {
+        @color: @toolbar-slide-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.poll {
+        @color: @toolbar-poll-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.whiteboard {
+        @color: @toolbar-whiteboard-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.drive {
+        @color: @toolbar-drive-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.file {
+        @color: @toolbar-file-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+/*
     &.pad {
         background-color: @toolbar-pad-bg;
         color: @toolbar-pad-color;
@@ -62,7 +97,7 @@
         background-color: @toolbar-file-bg;
         color: @toolbar-file-color;
     }
-
+*/
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -78,6 +113,17 @@
         float: right;
     }
 
+
+    .dropdown-bar {
+        height: 100%;
+        display: inline-block;
+        button {
+            height: 100%;
+            border-radius: 0;
+            margin: 0;
+        }
+    }
+
     button {
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
@@ -421,6 +467,7 @@
         position: absolute;
         left: 0px;
         height: 32px;
+        background: @toolbar-drive-bg;
 
         a.cryptpad-logo {
             cursor: pointer;
@@ -447,6 +494,7 @@
         }
     }
     .cryptpad-user {
+        height: 100%;
         position: absolute;
         right: 0;
         :not(.cryptpad-lag) span {
@@ -480,6 +528,13 @@
 .cryptpad-toolbar-rightside {
     height: 32px;
     text-align: right;
+    &> button {
+        height: 100%;
+        margin: 0;
+        border-radius: 0;
+        padding: 0 10px;
+
+    }
 }
 .cryptpad-toolbar-history {
     display: none;

customize.dist/src/less/variables.less

@@ -77,19 +77,19 @@
 // Toolbar
 @toolbar-pad-bg: #1c4fa0;
 @toolbar-pad-color: #fff;
-@toolbar-slide-bg: #a01c1c;
+@toolbar-slide-bg: #e57614;
 @toolbar-slide-color: #fff;
 @toolbar-code-bg: #ffae00;
 @toolbar-code-color: #000;
 @toolbar-poll-bg: #006304;
 @toolbar-poll-color: #fff;
-@toolbar-whiteboard-bg: #570063;
+@toolbar-whiteboard-bg: #800080;
 @toolbar-whiteboard-color: #fff;
 @toolbar-drive-bg: #0087ff;
 @toolbar-drive-color: #fff;
-@toolbar-file-bg: #ccffa0;
-@toolbar-file-color: #000;
-@toolbar-default-bg: #fff;
+@toolbar-file-bg: #cd2532;
+@toolbar-file-color: #fff;
+@toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;