[live-demo] Disable collapsed styling on minimal demos

LeaVerou · Feb 12, 2024 · b21f254 · b21f254
1 parent 79beb1d
commit b21f254
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 69 deletions.
diff --git a/plugins/live-demo/README.md b/plugins/live-demo/README.md
@@ -0,0 +1,8 @@
+# Live demo
+
+Enable by adding the `demo` class to your slide.
+
+Modifiers:
+- `minimal`: Disables additional styling.
+- `isolated`: Renders the demo in an `<iframe>`, rather than directly in the slide.
+- `horizontal`: Lays out the slide in a horizontal layout, with the code on the bottom and the rendering on the top.
diff --git a/plugins/live-demo/live-demo.css b/plugins/live-demo/live-demo.css
@@ -172,6 +172,32 @@
 					}
 				}
 		}
+
+		div.prism-live {
+			color: inherit;
+			font-size: calc(var(--font-size-multiplier, 1) * 100%);
+			line-height: 1.5em;
+			max-height: var(--_height);
+			max-height: -webkit-fill-available;
+			transition: .2s;
+			transition-property: max-height, flex;
+
+			&.collapsed {
+				min-height: var(--collapsed-height, var(--min-height));
+
+				overflow: hidden;
+				flex: none;
+
+				pre {
+					opacity: .2;
+				}
+
+				textarea,
+				pre {
+					overflow: hidden;
+				}
+			}
+		}
 	}
 
 	&.isolated {
@@ -197,32 +223,6 @@
 		}
 	}
 
-	div.prism-live {
-		color: inherit;
-		font-size: calc(var(--font-size-multiplier, 1) * 100%);
-		line-height: 1.5em;
-		max-height: var(--_height);
-		max-height: -webkit-fill-available;
-		transition: .2s;
-		transition-property: max-height, flex;
-
-		&.collapsed {
-			min-height: var(--collapsed-height, var(--min-height));
-
-			overflow: hidden;
-			flex: none;
-
-			pre {
-				opacity: .2;
-			}
-
-			textarea,
-			pre {
-				overflow: hidden;
-			}
-		}
-	}
-
 	&.horizontal:not(.minimal) {
 		div.prism-live {
 			&.collapsed {

diff --git a/plugins/live-demo/plugin.css b/plugins/live-demo/plugin.css
@@ -1,70 +1,73 @@
-.live-demo {
-	&:not(.minimal) {
-		background: hsl(220,10%,95%);
-		color: black;
+:where(.live-demo) {
+	&:where(:not(.minimal)) {
+		background: var(--color-neutral-95);
+		color: canvastext;
 		font-size: 200%;
 
-		& div.prism-live {
-			background: hsl(200, 10%, 15%);
+		div.prism-live {
+			background: var(--color-neutral-20);
 		}
 
-		& pre.prism-live {
-			background: hsl(200, 10%, 20%) linear-gradient(rgba(0,0,0,.1) 50%, transparent 0);
+		:where(pre.prism-live) {
+			background: var(--color-neutral-20);
+			color: canvas;
+		}
+
+		pre.prism-live {
+			background-image: linear-gradient(rgb(0 0 0 / 2%) 50%, transparent 0);
 			background-origin: content-box;
 			background-size: auto 3em;
+			background-size: auto 2lh;
 			background-attachment: local;
-			color: white;
 		}
 
-		&:not(.horizontal) {
-			& textarea.prism-live {
-				box-shadow: -.1em 0 .2em rgba(0,0,0,.3) inset;
-			}
-		}
+		& textarea.prism-live {
+			box-shadow: var(--box-shadow-offset, -.1em 0) .2em rgb(0 0 0 / 30%) inset;
 
-		&.horizontal {
-			& textarea.prism-live {
-				box-shadow: 0 .1em .2em rgba(0,0,0,.3) inset;
+			&:is(.horizontal *) {
+				--box-shadow-offset: 0 .1em;
 			}
 		}
-	}
 
-	& div.prism-live {
-		& ::-webkit-scrollbar {
-			width: 10px;
-			height: 10px;
-		}
+		div.prism-live {
+			::-webkit-scrollbar {
+				width: 10px;
+				height: 10px;
+			}
 
-		& ::-webkit-scrollbar-track {
-			background: hsl(200, 10%, 30%);
-		}
+			::-webkit-scrollbar-track {
+				background: hsl(200, 10%, 30%);
+			}
 
-		& ::-webkit-scrollbar-corner {
-			background: hsl(200, 10%, 25%);
-		}
+			& ::-webkit-scrollbar-corner {
+				background: hsl(200, 10%, 25%);
+			}
 
-		& ::-webkit-scrollbar-thumb {
-			border-radius: 10px;
-			background: hsla(0,0%,100%,.05);
-			box-shadow: 0 0 .2em black;
-		}
+			& ::-webkit-scrollbar-thumb {
+				border-radius: 10px;
+				background: hsla(0,0%,100%,.05);
+				box-shadow: 0 0 .2em black;
+			}
 
-		& ::-webkit-scrollbar-thumb:vertical {
-			background: hsla(0,0%,100%,.2);
-		}
+			& ::-webkit-scrollbar-thumb:vertical {
+				background: hsla(0,0%,100%,.2);
+			}
 
-		& ::-webkit-scrollbar-thumb:hover {
-			background: hsla(0,0%,100%,.3);
-		}
+			& ::-webkit-scrollbar-thumb:hover {
+				background: hsla(0,0%,100%,.3);
+			}
 
 
-		&.collapsed {
-			& pre {
-				opacity: .7;
+			&.collapsed {
+				& pre {
+					opacity: .7;
+				}
 			}
 		}
 	}
 
+
+
 	@container demo_controls (inline-size < 32em) {
 		.demo-controls button:is(.next, .prev) {
 			display: none;

diff --git a/plugins/live-demo/plugin.js b/plugins/live-demo/plugin.js
@@ -88,6 +88,7 @@ if (!Prism.Live) {
 		}
 	}
 
+	console.info("Prism Live not loaded. Loading from live.prismjs.com, with languages " + languages.join(", "));
 	let loaded = await import(`https://live.prismjs.com/src/prism-live.js?load=${languages.join(",")}`);
 	for (let delay=100; delay < 1000; delay += 100) {
 		if (Prism.Live) {