Better shadows

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

css/style.scss

@@ -41,17 +41,52 @@ div[contenteditable='true'].primary,
 		#6F5DA5
 	) !important;
 	background-color: initial;
-	color: black;
+	color: white;
+	text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
 	border-color: rgba(127,127,127, .7);
 }
 
 
+/* Header icons get drop shadow for visibility */
+#header .logo.logo-icon,
+#appmenu svg,
+#more-apps div,
+.searchbox input[type="search"],
+.notifications .notifications-button img,
+#contactsmenu .icon-contacts,
+#expand .avatardiv-shown img,
+#expand .expandDisplayName {
+    /* Modified .icon-shadow with modified $color-box-shadow */
+    filter : drop-shadow(0 0 3px rgba(50, 50, 50, .5)) !important;
+}
+
+/* Header icons get higher opacity for visibility */
+#appmenu li a,
+.searchbox input[type="search"],
 #header .header-right > div > .menutoggle,
-#header .header-right > form > .menutoggle,
-.searchbox input[type='search'],
-#appmenu li a {
-	opacity: 1 !important;
-	filter: drop-shadow(0 3px 2px rgba(0,0,0,.5))
+#header .header-right > form > .menutoggle {
+	opacity: .9;
+}
+
+/* Remove primary color background of header bar app titles */
+/* But get drop shadow for visibility */
+#appmenu li:hover a + span,
+#appmenu li a:focus + span,
+#appmenu li:hover span,
+#appmenu li:focus span,
+#appmenu li a:focus span {
+    opacity: .9;
+    background: transparent;
+    /* Modified .icon-shadow with modified $color-box-shadow */
+    text-shadow: 0 0 3px rgba(50, 50, 50, .5) !important;
+}
+
+/* Nicer search box background */
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active,
+.searchbox input[type="search"]:valid {
+    background-color : rgba(0, 0, 0, .5) !important;
+    border           : none !important
 }
 
 #appmenu li {