Added optional ::selection styling for .window-body children

docs/index.html.ejs

@@ -740,6 +740,29 @@
             </div>
           </div>
         `) %>
+
+        <p>
+          To apply custom selection styling to children of a <code>window-body</code> element, you can add the optional <code>color-highlight</code> class. Note that overriding selection styling may impact <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns">accessibility</a>, so use at your own discretion. 
+        </p>
+        
+
+        <%- example(`
+        <div class="window" style="width: 300px">
+          <div class="title-bar">
+            <div class="title-bar-text">A Window With Stuff In It</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Maximize"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+          <div class="window-body">
+            <p class="color-highlight">You can highlight me and a custom <code>::selection</code> styling will be present!</p>
+
+            <p> I have no custom <code>::selection</code> styling</p>
+          </div>
+        </div>
+      `) %>
       </div>
     </section>
 

style.css

@@ -17,6 +17,8 @@
   --dialog-gray: #808080;
   --dialog-gray-light: #b5b5b5;
   --link-blue: #0000ff;
+  --highlight-blue: #00005e;
+  --text-highlight: #ffffff;
 
   /* Spacing */
   --element-spacing: 8px;
@@ -330,6 +332,12 @@ input[type="reset"]:disabled,
   margin: var(--element-spacing);
 }
 
+.window-body .color-highlight::selection,
+.window-body .color-highlight *::selection {
+  color: var(--text-highlight);
+  background-color: var(--highlight-blue);
+}
+
 fieldset {
   border-image: svg-load("./icon/groupbox-border.svg") 2;
   padding: calc(2 * var(--border-width) + var(--element-spacing));