Add webext-base-css-modal class (#21)

Author: fregante

options.html

@@ -3,6 +3,7 @@
 	<meta charset="utf-8">
 	<title>Demo</title>
 	<link rel="stylesheet" href="webext-base.css">
+	<script src="options.js"></script>
 </head>
 
 <h1>Heading 🤝</h1>

options.js

@@ -0,0 +1,3 @@
+document.addEventListener('dblclick', function() {
+    document.documentElement.classList.toggle('webext-base-css-modal');
+});

readme.md

@@ -94,6 +94,8 @@ Here's a minimal but full `options.html` example page:
 There are some extra classes you can use:
 
 - `.text-monospace` ideal for for `<input>` and `<textarea>` to have a monospace font
+- `webext-base-css-modal` can be applied to HTML if you have a small options page but don't want to use `options_ui`. See the [what it looks like.](https://github.com/fregante/webext-base-css/pull/21)
+
 
 ## Tips
 

webext-base.css

@@ -4,6 +4,7 @@
 	color-scheme: light dark;
 	max-width: 700px;
 	margin: auto;
+	background: var(--background-color);
 }
 
 body {
@@ -78,7 +79,7 @@ kbd {
 @-moz-document url-prefix('') {
 	@media (prefers-color-scheme: dark) {
 		:root {
-			background-color: #23222b;
+			--background-color: #23222b;
 		}
 	}
 }
@@ -88,7 +89,7 @@ kbd {
 	@media (prefers-color-scheme: dark) {
 		:root {
 			/* Safari iOS has a black background */
-			background-color: #1e1e1e;
+			--background-color: #1e1e1e;
 		}
 	}
 }
@@ -105,3 +106,36 @@ kbd {
 		'Liberation Mono',
 		monospace !important;
 }
+
+:root.webext-base-css-modal {
+	background: light-dark(#6e9d9f, #194041);
+	min-height: 100vh;
+	display: grid;
+	place-items: center;
+
+	body {
+		max-width: 500px;
+		border-radius: 8px;
+		padding: 8px;
+		background: var(--background-color, light-dark(#fff, #1e1e1e));
+		box-shadow:
+			0.3px 2.8px 2.2px rgb(0 0 0 / 2%),
+			0.8px 6.7px 5.3px rgb(0 0 0 / 2.8%),
+			1.5px 12.5px 10px rgb(0 0 0 / 3.5%),
+			2.7px 22.3px 17.9px rgb(0 0 0 / 4.2%),
+			5px 41.8px 33.4px rgb(0 0 0 / 5%),
+			12px 100px 80px rgb(0 0 0 / 7%);
+	}
+
+	body > :first-child {
+		margin-top: 0;
+	}
+
+	body > :last-child {
+		margin-bottom: 0;
+	}
+
+	hr {
+		margin-inline: -8px;
+	}
+}