Adding alerted scene to stashes.

assets/components/header/search.vue

@@ -51,6 +51,7 @@ export default {
 			query: this.$route.query ? this.$route.query.q : null,
 		};
 	},
+	emits: ['search'],
 	watch: {
 		$route: route,
 		searching,
@@ -71,8 +72,8 @@ export default {
     flex-grow: 1;
     align-items: center;
     justify-content: flex-end;
-    padding: 0 1rem 0 0;
     border-left: solid 1px var(--shadow-hint);
+	margin: 0 .25rem 0 0;
 
     &.compact {
         padding: 0;
@@ -92,7 +93,7 @@ export default {
 .search-input {
     height: 100%;
     width: 100%;
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem 0 .5rem .75rem;
     border: none;
     color: var(--text);
     background: var(--background);
@@ -119,14 +120,20 @@ export default {
         }
     }
 
-    &:focus::placeholder {
-        color: var(--shadow-weak);
+    &:focus {
+		&::placeholder {
+			color: var(--shadow-weak);
+		}
+
+		& + .search-button:not(:hover) .icon {
+			fill: var(--shadow);
+		}
     }
 }
 
 .search-button {
     height: 100%;
-    padding: 0 1rem;
+    padding: 0 1.25rem 0 1rem;
     background: none;
     border: none;
     margin: .3rem 0 0 0;
@@ -140,7 +147,7 @@ export default {
         cursor: pointer;
 
         .icon {
-            fill: var(--shadow);
+            fill: var(--primary);
         }
     }
 }