colibris: improve toolbar

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;  }
+

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'); })
 }

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;
+}
+

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) {