Merge pull request #140 from pietvanzoen/main

Add styling for dialog elements

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>

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 {