improved play and stop button (#2692)

* improved play and stop button if only one record is allowed
* stop button first in action menu
* fix skin colors
* autofocus term field in search form
* fix responsive column layout in invoice listing
* improve responsive header for small screens

assets/sass/skins.scss

@@ -1,26 +1,69 @@
 
-$skins: blue, blue, black, green, purple, red, yellow;
+$skins:
+    "blue" $yellow #fff $yellow $red,
+    "black" $yellow #000 $green $red,
+    "green" $yellow #fff $yellow $red,
+    "purple" $yellow #fff $yellow $red,
+    "red" $yellow #fff $yellow $yellow,
+    "yellow" $blue #fff $green $red
+;
 
-@each $skinColor in $skins {
-    @media (max-width: $screen-sm-min) {
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li.divider {
-            background-color: #ccc;
-        }
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a {
-            color: #444;
-        }
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a:hover {
-            background: #fff;
-        }
+@each $skinColor, $navHighlight, $tickTacColor, $startButton, $stopButton in $skins {
+    @each $prefix in (".skin-#{$skinColor}", ".skin-#{$skinColor}-light") {
+        @media (max-width: $screen-sm-min) {
+            #{$prefix} {
+                .main-header .navbar .dropdown-menu li.divider {
+                    background-color: #ccc;
+                }
 
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li.divider {
-            background-color: #ccc;
+                .main-header .navbar .dropdown-menu li a {
+                    color: #444;
+                }
+
+                .main-header .navbar .dropdown-menu li a:hover {
+                    background: #fff;
+                }
+            }
         }
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a {
-            color: #444;
-        }
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a:hover {
-            background: #fff;
+        #{$prefix} {
+            .navbar-nav {
+                .user-menu {
+                    ul {
+                        li {
+                            a {
+                                &:hover {
+                                    i {
+                                        color: $navHighlight;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .notifications-menu > .dropdown-menu > li .menu > li > a:hover i {
+                    color: $navHighlight;
+                }
+            }
+            .ticktac-single {
+                i {
+                    color: $tickTacColor;
+                }
+                span {
+                    color: $tickTacColor;
+                }
+                &:hover {
+                    .ticktac-stop {
+                        i {
+                            color: $stopButton;
+                        }
+                    }
+                    .ticktac-start {
+                        i {
+                            color: $startButton;
+                        }
+                    }
+                }
+            }
         }
     }
 }