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

@@ -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>

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;