From d6aec956843f9b32a6527f4c17153fb470bd7f38 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Sat, 4 Apr 2020 09:51:22 +0200
Subject: [PATCH] colibris: improve toolbar

---
 src/static/skins/colibris/pad.css             | 16 +++++++---
 src/static/skins/colibris/pad.js              |  2 ++
 .../skins/colibris/src/components/buttons.css |  6 ++++
 .../skins/colibris/src/components/toolbar.css | 32 +++++++++----------
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index 71a503b0..9ba9d0dd 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -23,10 +23,6 @@
 
 /* NEUTRAL COLOR */
 body,
-#tocItems a,
-.toolbar ul li a:hover .buttonicon,
-.toolbar ul li a,
-.toolbar ul li select,
 #mycolorpickercancel,
 .btn-default,
 .color\:black,
@@ -85,6 +81,17 @@ p[data-l10n-id="ep_comments_page.comment"],
 #slider-btn-container button {
   border-color: #64d29b;
 }
+/* PRIMARY-COLOR VARIANT */
+.toolbar ul li a.selected,
+.toolbar ul li a.pressed,
+.toolbar ul li select:active {
+  background-color: #f0faf6 !important;
+}
+.toolbar ul li a.selected .buttonicon,
+.toolbar ul li a.pressed .buttonicon,
+.toolbar ul li select:active {
+  color: #5abb89;
+}
 
 /* BACKGROUND COLOR */
 #editorcontainerbox {
@@ -109,3 +116,4 @@ p[data-l10n-id="ep_comments_page.comment"],
 .hyperlink-dialog>.hyperlink-save,
 #sidedivinner>div:before
 { font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;  }
+
diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js
index 88ddce4c..1a7bd938 100644
--- a/src/static/skins/colibris/pad.js
+++ b/src/static/skins/colibris/pad.js
@@ -1,4 +1,6 @@
 function customStart()
 {
   $('#pad_title').show();
+  $('.buttonicon').mousedown(function() { $(this).parent().addClass('pressed'); })
+  $('.buttonicon').mouseup(function() { $(this).parent().removeClass('pressed'); })
 }
diff --git a/src/static/skins/colibris/src/components/buttons.css b/src/static/skins/colibris/src/components/buttons.css
index 93879023..1d6436c9 100644
--- a/src/static/skins/colibris/src/components/buttons.css
+++ b/src/static/skins/colibris/src/components/buttons.css
@@ -19,3 +19,9 @@
 .btn:hover, #mycolorpickercancel:hover, #mycolorpickersave:hover, #save_title button:hover, .hyperlink-dialog>.hyperlink-save:hover, #importsubmitinput:hover, #forcereconnect:hover {
   cursor: pointer;
 }
+
+button, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index 8809db97..ba959473 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -15,7 +15,7 @@
 .toolbar .buttonicon {
   background-color: transparent;
   font-size: 14px;
-  color: #767676;
+  color: #5f6368;
 }
 
 .toolbar ul li.separator {
@@ -50,29 +50,27 @@
   background-color: transparent;
   background: none;
   border: none;
+  border-radius: 3px !important;
 }
 
-.toolbar ul li a:hover,
-.toolbar ul li a.selected,
-.toolbar ul li a:focus {
-  background: none;
-  border-radius: 0;
+.toolbar ul li a:hover, .toolbar ul li select:hover  {
+  background-color: #f1f3f3;
 }
 
-.toolbar ul li a:hover {
-  background-color: #f7f7f7;
-}
-
-.toolbar ul li a.selected,
-.toolbar ul li a:focus {
-   background-color: #eaeaea;
+.toolbar ul li select:active option {
+  background-color: white !important;
+  color: #44464a;
+  padding: 5px;
 }
 
 .toolbar ul li select {
+  cursor: pointer;
   border: none;
-  border-bottom: 1px solid #d7d8da;
-  border-radius: 0;
-  width: 90px;
+  border-radius: 3px;
+  width: auto;
+  font-weight: bold;
+  color: #6d7075;
+  font-size: 14px;
 }
 
 .toolbar ul li[data-key=showusers] {
@@ -84,7 +82,7 @@
 .toolbar ul li[data-key=showusers] > a {
   width: 100%;
   height: 100%;
-  border-radius: 0;
+  border-radius: 0 !important;
 }
 
 @media (max-width: 1000px) {