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 @@
+ `) %>
+
+ You can make a title bar "inactive" by adding inactive class,
+ useful when making more than one window.
+
+ <%- example(`
+
+
An inactive title bar
+
+
+
+
`) %>
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;