From c6cc9b1f1f351eabc4628d2079f80fdb1856fb68 Mon Sep 17 00:00:00 2001
From: pietvanzoen <hi@pietvanzoen.com>
Date: Thu, 6 Apr 2023 19:24:23 +0200
Subject: [PATCH] Add styling for dialog elements

---
 index.html | 17 +++++++++++++++++
 simple.css | 25 ++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 1039ca7..22bff80 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@ <h1>Simple.css Test Page</h1>
 					<li><a href="#embedded__iframe">IFrames</a></li>
 					<li><a href="#embedded__embed">Embed</a></li>
 					<li><a href="#embedded__object">Object</a></li>
+					<li><a href="#embedded__dialog">Dialog</a></li>
 				</ul>
 			</li>
 			<li>
@@ -886,6 +887,22 @@ <h2>Object</h2>
 					<p><a href="#top">[Top]</a></p>
 				</footer>
 			</article>
+			<article id="embedded__dialog">
+				<header>
+					<h2>Dialog</h2>
+				</header>
+				<button onclick="document.getElementById('dialog-demo').showModal()">Open</button>
+				<dialog id="dialog-demo">
+				<h2>Dialog</h2>
+				<p>Dialogs are a new HTML5 element that can be used to create modal dialogs or pop-up windows.</p>
+				<form method="dialog">
+					<button>Close</button>
+				</form>
+				</dialog>
+				<footer>
+					<p><a href="#top">[Top]</a></p>
+				</footer>
+			</article>
 		</section>
 		<section id="forms">
 			<header>
diff --git a/simple.css b/simple.css
index 93d758a..64d4e88 100644
--- a/simple.css
+++ b/simple.css
@@ -1,5 +1,6 @@
 /* Global variables. */
-:root {
+:root,
+::backdrop {
   /* Set sans-serif & mono fonts */
   --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
     "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
@@ -22,7 +23,8 @@
 
 /* Dark theme */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root,
+  ::backdrop {
     color-scheme: dark;
     --bg: #212121;
     --accent-bg: #2b2b2b;
@@ -321,7 +323,7 @@ aside {
   }
 }
 
-article, fieldset {
+article, fieldset, dialog {
   border: 1px solid var(--border);
   padding: 1rem;
   border-radius: var(--standard-border-radius);
@@ -625,6 +627,23 @@ progress:indeterminate::-moz-progress-bar {
   background-color: var(--accent-bg);
 }
 
+dialog {
+  max-width: 40rem;
+  margin: auto;
+}
+
+dialog::backdrop {
+  background-color: var(--bg);
+  opacity: 0.8;
+}
+
+@media only screen and (max-width: 720px) {
+  dialog {
+    max-width: 100%;
+    margin: auto 1em;
+  }
+}
+
 /* Classes for buttons and notices */
 .button,
 .button:visited {