Masterbar: style Recovery mode button (#12485)

The button was added in #12467.
This commit styles it so:
- It looks similar to the core Recovery mode button when seeing the default Masterbar.
- It uses the Calypso colors when the Masterbar is loaded by a user using Calypsoify

modules/calypsoify/_colors.scss

@@ -50,6 +50,7 @@ $gray-darken-30: $muriel-gray-600;
 
 // Alerts
 $alert-yellow:           $muriel-hot-yellow-400;
+$alert-orange:           $muriel-hot-orange-500;
 $alert-red:              $muriel-hot-red-400;
 $alert-green:            $muriel-hot-green-400;
 $alert-purple:           $muriel-hot-purple-400;

modules/calypsoify/style.scss

@@ -542,6 +542,10 @@ body,
 		font-size: 24px;
 		line-height: 1.45;
 	}
+
+	li#wp-admin-bar-recovery-mode {
+		background-color: $alert-orange !important;
+	}
 }
 
 /* WP Admin UI Mods */

modules/masterbar/overrides.css

@@ -75,6 +75,12 @@
 	font-size: 28px;
 }
 
+.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+	background-color: #ca4a1f;
+	color: #fff;
+	margin-right: 1em;
+}
+
 @media screen and (max-width: 480px) {
 	.jetpack-masterbar.post-new-php.block-editor-page #wp-toolbar ul li {
 		flex: 1;
@@ -119,4 +125,8 @@
 	.jetpack-masterbar.post-new-php.block-editor-page #wpadminbar li#wp-admin-bar-newdash {
 		order: 3;
 	}
+
+	.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+		display: none;
+	}
 }