Add contact list styling for inactive window (#865)

sindresorhus · Apr 29, 2019 · ffed2d9 · ffed2d9
1 parent 972c6ea
commit ffed2d9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/css/browser.css b/css/browser.css
@@ -1,5 +1,7 @@
 :root {
 	--selected-conversation-background: linear-gradient(hsla(209, 110%, 45%, 0.9), hsla(209, 110%, 42%, 0.9));
+	--selected-conversation-background-inactive: #d2d2d2;
+	--black: #000;
 }
 
 html {
@@ -267,6 +269,15 @@ a,
 	color: rgba(255, 255, 255, 0.8);
 }
 
+/* Contact list: person (selected) window inactive */
+html.inactive ._1ht1._1ht2 {
+	background: var(--selected-conversation-background-inactive) !important;
+	color: var(--black) !important;
+}
+html.inactive ._1ht1._1ht2 * {
+	color: rgba(0, 0, 0, 0.8);
+}
+
 /* Remove top Facebook cookie banner */
 .fbPageBanner {
 	display: none !important;

diff --git a/css/dark-mode.css b/css/dark-mode.css
@@ -266,6 +266,14 @@ html.dark-mode ._1ht6 {
 	color: var(--base-seventy);
 }
 
+/* Contact list: person (selected) window inactive */
+html.dark-mode.inactive ._1ht1._1ht2 {
+	background: var(--base-twenty) !important;
+}
+html.dark-mode.inactive ._1ht1._1ht2 * {
+	color: var(--base-seventy);
+}
+
 /* Contact list: message blurb */
 html.dark-mode ._1htf,
 /* Contact list: (for format) person: message blurb */

diff --git a/source/browser.ts b/source/browser.ts
@@ -570,6 +570,20 @@ window.addEventListener('load', () => {
 	}
 });
 
+// Toggles the sidebar color to gray when window is inactive
+window.addEventListener('blur', () => {
+	const selected = document.documentElement;
+	if (selected !== null) {
+		selected.classList.add('inactive');
+	}
+});
+window.addEventListener('focus', () => {
+	const selected = document.documentElement;
+	if (selected !== null) {
+		selected.classList.remove('inactive');
+	}
+});
+
 // It's not possible to add multiple accelerators
 // so this needs to be done the old-school way
 document.addEventListener('keydown', async event => {