Notebookbar: new tabs style and tint them with the doc-type color

Also add animation on hover effect.

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ia68d38b7c2581699a31a9e4e17faca244c7028c9

browser/css/device-desktop.css

@@ -22,7 +22,7 @@
    Rules not intended for touch devices */
 
 .button-secondary:hover,
-button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):hover {
+button:not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.notebookbar.ui-tab):hover {
 	cursor: pointer;
 	color: var(--color-text-darker) !important;
 	background-color: var(--color-background-lighter) !important;

browser/css/notebookbar.css

@@ -22,7 +22,6 @@ button.ui-tab.notebookbar {
 	justify-content: center;
 	padding: 0 clamp(4px, 1vw, 1em);
 	border: 1px solid transparent;
-	border-radius: var(--border-radius);
 	background-color: transparent;
 	/* calc([minimum size]
 	   + ([maximum size] - [minimum size])
@@ -44,16 +43,21 @@ button.ui-tab.notebookbar {
 }
 
 .ui-tab.selected.notebookbar {
-	background: var(--color-background-dark) !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid transparent !important;
 	color: var(--color-text-darker) !important;
+	box-shadow: inset 12px 0 var(--color-main-background), inset -12px 0 var(--color-main-background), inset 0 -2px rgb(var(--doc-type));
+	transition: box-shadow 0.1s ease-out;
+}
+
+.ui-tab.selected.notebookbar:hover {
+	box-shadow: inset 0 0 var(--color-main-background), inset 0 0 var(--color-main-background), inset 0 -2px rgb(var(--doc-type));
+	transition: box-shadow 0.3s ease;
 }
 
 .ui-tab.notebookbar:hover {
-	background: var(--color-background-darker) !important;
-	border: 1px solid var(--color-border-darker) !important;
 	cursor: pointer !important;
 	color: var(--color-text-darker) !important;
+	box-shadow: inset 12px 0 var(--color-main-background), inset -12px 0 var(--color-main-background), inset 0 -2px var(--color-border);
 }
 
 /* Document Logo */