Update Chrome style in user guide; Support dark mode (#63)

fregante · Aug 6, 2024 · aa6405b · aa6405b
1 parent 4975612
commit aa6405b
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 34 deletions.
diff --git a/docs/exts.svg b/docs/exts.svg
diff --git a/docs/i-wood-laik-too-bie-a-hambagga.svg b/docs/i-wood-laik-too-bie-a-hambagga.svg
diff --git a/docs/index.html b/docs/index.html
@@ -1,10 +1,13 @@
+<!doctype html>
 <html lang="en">
+
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="stylesheet" href="style.css" />
 		<meta name="viewport" content="width=500px" />
 		<title>How to enable this extension on another domain</title>
 	</head>
+
 	<body>
 		<h1>
 			How to enable <span class="extname">this extension</span> on another domain
@@ -28,14 +31,26 @@ <h1>
 							<img src="userext.svg" width="16" height="16" alt="" />
 						</div>
 						<div class="button">
-							<img src="exts.svg" alt="" />
+							<svg height="17" width="17" viewBox="0 1 24 24" xmlns="http://www.w3.org/2000/svg">
+								<path d="m0 0h24v24h-24z" fill="none" />
+								<path
+									d="m19 8v-1c0-1.1-.9-2-2-2h-4a2.5 2.5 0 0 0 -5 0h-4c-1.1 0-2 .9-2 2v3.8h.018c1.49 0 2.7 1.2 2.7 2.7s-1.2 2.7-2.7 2.7h-.018v3.8c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2v-4a2.5 2.5 0 0 0 0-5z"
+									fill="none" stroke="currentColor" stroke-width="2" />
+								<g fill="currentColor">
+									<path d="m8 2.5h5v3.5h-5z" />
+									<path d="m18 11h3.5v5h-3.5z" />
+								</g>
+							</svg>
 						</div>
 					</div>
 					<div class="button">
 						<img src="user.svg" alt="" />
 					</div>
 					<div class="button">
-						<img src="i-wood-laik-too-bie-a-hambagga.svg" alt="" />
+						<svg fill="currentColor" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
+							<path
+								d="m12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+						</svg>
 					</div>
 				</div>
 				<div class="menu">
@@ -46,19 +61,21 @@ <h1>
 					</div>
 					<div class="separator"></div>
 					<div class="menuitem">Options</div>
-					<div class="menuitem">Remove from Chrome…</div>
+					<div class="menuitem">Remove from Chrome</div>
 					<div class="menuitem">Unpin</div>
 					<div class="separator"></div>
-					<div class="menuitem">Manage Extensions</div>
+					<div class="menuitem">Manage Extension</div>
 				</div>
+				<div class="page"></div>
 			</div>
 		</div>
 		<footer>
 			<p>
-				Feature added with the <a href="https://github.com/fregante/webext-permission-toggle">webext-permission-toggle</a> module by <a href="https://fregante.com">@fregante</a>. Guide icons by <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/ui/webui/resources/images">Google</a> and <a
-					href="https://www.flaticon.com/authors/pongsakornred"
-					title="pongsakornRed"
-					rel="nofollow">pongsakornRed</a>. You can also <a href="#customize">customize this page</a> for your extension if it uses the same module.
+				Feature added with the <a href="https://github.com/fregante/webext-permission-toggle">webext-permission-toggle</a>
+				module by <a href="https://fregante.com">@fregante</a>. Guide icons by <a
+					href="https://chromium.googlesource.com/chromium/src/+/lkgr/ui/webui/resources/images">Google</a> and <a
+					href="https://www.flaticon.com/authors/pongsakornred" title="pongsakornRed" rel="nofollow">pongsakornRed</a>.
+				You can also <a href="#customize">customize this page</a> for your extension if it uses the same module.
 			</p>
 		</footer>
 		<script>
@@ -97,4 +114,5 @@ <h1>
 			})
 		</script>
 	</body>
+
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -1,13 +1,14 @@
 html {
+	--bg-color: #fff;
+	--bg-fade: #eee;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	letter-spacing: 0.01em;
 }
 body {
 	width: 480px;
 	margin: 20px auto;
 	padding: 20px;
-	background: linear-gradient(#eee, #fff) no-repeat;
-	background-size: 100% 100px;
+	background: linear-gradient(var(--bg-fade), var(--bg-color) 100px) no-repeat;
 }
 h1 {
 	font-weight: 200;
@@ -48,7 +49,7 @@ ol li:before {
 	bottom: 0;
 	background: linear-gradient(
 		to right,
-		rgba(255, 255, 255, 100%),
+		var(--bg-color),
 		rgba(255, 255, 255, 0%)
 	);
 }
@@ -58,41 +59,47 @@ ol li:before {
 	flex-direction: column;
 	align-items: flex-end;
 	border-top-right-radius: 10px;
-	background: white;
-	box-shadow: 0px 1px 1px rgba(0, 0, 0, 50%), 0 10px 25px 5px rgba(0, 0, 0, 30%);
+	background-color: #e3e3e3;
+	box-shadow:
+		0px 1px 1px rgba(0, 0, 0, 50%),
+		0 10px 25px 5px rgba(0, 0, 0, 30%);
 }
 .titlebar {
 	border-radius: inherit;
 	align-self: stretch;
-	background-color: #d7dadf;
 	height: 41px;
 	border-top: solid 1px #ededf0;
 }
 .toolbar {
 	display: flex;
 	align-self: stretch;
-	background-color: #fff;
-	padding: 4px;
+	background-color: white;
+	padding: 6px;
 	padding-left: 0;
 	padding-right: 10px;
 	border-bottom: solid 1px #ededf0;
+	border-top-right-radius: 9px;
+}
+.page {
+	background-color: white;
+	flex-grow: 1;
 }
 .urlbar {
-	height: 28px;
+	height: 34px;
 	border-radius: 0 14px 14px 0;
 	background-color: #edf0f1;
 	flex-grow: 1;
 }
 .button-group {
 	display: flex;
 	box-shadow: 0 0 0 1px #0000001a;
-	border-radius: 14px;
+	border-radius: 17px;
 	margin-left: 8px;
 }
 .button {
-	width: 28px;
-	height: 28px;
-	border-radius: 14px;
+	width: 34px;
+	height: 34px;
+	border-radius: 50%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -102,39 +109,45 @@ ol li:before {
 }
 .button.focused {
 	background-color: #eeeeee;
-	animation: background-fade 200ms 1.5s backwards;
+	/* animation: background-fade 200ms 1.5s backwards; */
 }
 .button.focused svg {
 	filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white);
 }
+.button svg {
+	color: #474747;
+}
 
 .menu {
 	width: max-content;
-    max-width: 300px;
+	max-width: 300px;
 	position: relative;
 	z-index: 1;
 	background-color: white;
-	padding: 4px 0;
+	padding: 8px 0;
 	margin-right: -100px;
 	margin-bottom: -30px;
 	border-radius: 4px;
-	box-shadow: 0px 0px 1px rgba(0, 0, 0, 50%), 0 10px 25px 5px rgba(0, 0, 0, 30%);
+	box-shadow:
+		0px 0px 1px rgba(0, 0, 0, 50%),
+		0 10px 25px 5px rgba(0, 0, 0, 30%);
 	transform-origin: top left;
-	animation: openmenu 100ms 2s backwards;
+	/* animation: openmenu 100ms 2s backwards; */
 }
 .menuitem {
-	font-size: 14px;
+	font-size: 13px;
 	padding: 7px 23px;
 }
 .menuitem.focused {
-	background-color: #ddd;
-	animation: menuitem 1s 2.5s backwards;
+	background-color: #f2f2f2;
+	/* animation: menuitem 1s 2.5s backwards; */
 }
 .separator {
-	border: solid white;
-	border-width: 4px 0;
+	border: solid transparent;
+	border-width: 8px 0;
 	height: 1px;
-	background-color: #d0d0d0;
+	background-color: #e3e3e3;
+	background-clip: content-box;
 }
 footer {
 	margin-top: 100px;
@@ -176,3 +189,46 @@ footer a {
 		background-color: #ddd;
 	}
 }
+
+@media (prefers-color-scheme: dark) {
+	html {
+		--bg-color: #333;
+		--bg-fade: #222;
+		color: #dddddd;
+	}
+	.window {
+		background-color: #1f2020;
+	}
+	.titlebar {
+		border-top: solid 1px #5f5f5f;
+	}
+	.toolbar {
+		background-color: #3c3c3c;
+		border-bottom-color: #454746;
+	}
+	.page {
+		background-color: black;
+	}
+	.urlbar {
+		background-color: #282828;
+	}
+	.button-group {
+		box-shadow: 0 0 0 1px #757575;
+	}
+	.button.focused {
+		background-color: #6c6b6b;
+	}
+	.button svg {
+		color: #c2c2c2;
+	}
+	.menu {
+		background-color: #1f1f1f;
+		outline: solid 0.5px black;
+	}
+	.menuitem.focused {
+		background-color: #363635;
+	}
+	.separator {
+		background-color: #5e5e5e;
+	}
+}
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
 		"build": "tsc",
 		"demo:build": "parcel build --no-cache",
 		"demo:watch": "parcel watch --no-cache --no-hmr",
+		"docs:watch": "cd docs && npx browser-sync start --server --watch",
 		"prepack": "tsc --sourceMap false",
 		"test": "xo && tsc --noEmit",
 		"watch": "tsc --watch"