From 5803325c951c4cf85fc705f9f018c9c45bb0607b Mon Sep 17 00:00:00 2001
From: xFly_Dragon <husano896@gmail.com>
Date: Mon, 18 May 2020 03:14:53 +0800
Subject: [PATCH] Add color for inactive title-bar (#84)

* Add color for inactive title-bar

* add docs

Co-authored-by: xFly.Xie <Fly.Xie@grandsys.com>
---
 docs/index.html.ejs | 12 ++++++++++++
 style.css           | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index b9b7428..bcc8872 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -554,6 +554,18 @@
               <button aria-label="Close"></button>
             </div>
           </div>
+        `) %>
+		<p>
+          You can make a title bar "inactive" by adding <code>inactive</code> class,
+		  useful when making more than one window.
+        </p>
+		 <%- example(`
+          <div class="title-bar inactive">
+            <div class="title-bar-text">An inactive title bar</div>
+            <div class="title-bar-controls">
+              <button aria-label="Close"></button>
+            </div>
+          </div>
         `) %>
       </div>
     </section>
diff --git a/style.css b/style.css
index 5de0780..0efb4dc 100644
--- a/style.css
+++ b/style.css
@@ -13,6 +13,8 @@
   --window-frame: #0a0a0a;
   --dialog-blue: #000080;
   --dialog-blue-light: #1084d0;
+  --dialog-gray: #808080;
+  --dialog-gray-light: #b5b5b5;
   --link-blue: #0000ff;
 
   /* Spacing */
@@ -187,6 +189,14 @@ button::-moz-focus-inner {
   align-items: center;
 }
 
+.title-bar.inactive {
+  background: linear-gradient(
+	  90deg,
+	  var(--dialog-gray),
+	  var(--dialog-gray-light)
+	);
+}
+
 .title-bar-text {
   font-weight: bold;
   color: white;