Examples: Simplified/beautified startButton.

mrdoob · May 27, 2020 · bc20838 · bc20838
1 parent 1c07c8a
commit bc20838
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 49 deletions.
diff --git a/examples/main.css b/examples/main.css
@@ -59,37 +59,26 @@ a, button, input, select {
 	top: 0;
 	left: 0;
 	width: 100%;
-	height:100%;
+	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	opacity: 1;
-	background-color: #000000;
-	color: #ffffff;
+	background: rgba(0,0,0,0.7);
 }
 
-#overlay > div {
-	text-align: center;
-}
-
-#overlay > div > button {
-	height: 20px;
-	background: transparent;
-	color: #ffffff;
-	outline: 1px solid #ffffff;
-	border: 0px;
-	cursor: pointer;
-}
-
-#overlay > div > p {
-	color: #777777;
-	font-size: 12px;
-}
+	#overlay button {
+		background: #ffffff;
+		border: 0;
+		color: #000000;
+		padding: 16px 20px;
+		text-transform: uppercase;
+		cursor: pointer;
+	}
 
 #notSupported {
 	width: 50%;
 	margin: auto;
 	background-color: #f00;
 	margin-top: 20px;
 	padding: 10px;
-}
+}
diff --git a/examples/webaudio_orientation.html b/examples/webaudio_orientation.html
@@ -14,10 +14,7 @@
 	</audio>
 
 	<div id="overlay">
-		<div>
-			<button id="startButton">Click to Play</button>
-			<p>Audio playback requires user interaction.</p>
-		</div>
+		<button id="startButton">Play</button>
 	</div>
 	<div id="container"></div>
 	<div id="info">

diff --git a/examples/webaudio_sandbox.html b/examples/webaudio_sandbox.html
@@ -8,10 +8,7 @@
 	</head>
 	<body>
 		<div id="overlay">
-			<div>
-				<button id="startButton">Click to Play</button>
-				<p>Audio playback requires user interaction.</p>
-			</div>
+			<button id="startButton">Play</button>
 		</div>
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webaudio - sandbox<br/>

diff --git a/examples/webaudio_timing.html b/examples/webaudio_timing.html
@@ -9,10 +9,7 @@
 <body>
 
 	<div id="overlay">
-		<div>
-			<button id="startButton">Click to Play</button>
-			<p>Audio playback requires user interaction.</p>
-		</div>
+		<button id="startButton">Play</button>
 	</div>
 	<div id="container"></div>
 	<div id="info">

diff --git a/examples/webaudio_visualizer.html b/examples/webaudio_visualizer.html
@@ -43,10 +43,7 @@
 	</head>
 	<body>
 		<div id="overlay">
-			<div>
-				<button id="startButton">Click to Play</button>
-				<p>Audio playback requires user interaction.</p>
-			</div>
+			<button id="startButton">Play</button>
 		</div>
 		<div id="container"></div>
 		<div id="info">
@@ -106,10 +103,10 @@
 				} else {
 
 					var mediaElement = new Audio( file );
-				mediaElement.loop = true;
-				mediaElement.play();
+					mediaElement.loop = true;
+					mediaElement.play();
 
-				audio.setMediaElementSource( mediaElement );
+					audio.setMediaElementSource( mediaElement );
 
 				}
 

diff --git a/examples/webgl_loader_mmd_audio.html b/examples/webgl_loader_mmd_audio.html
@@ -17,10 +17,7 @@
 
 	<body>
 		<div id="overlay">
-			<div>
-				<button id="startButton">Click to Play</button>
-				<p>Audio playback requires user interaction.</p>
-			</div>
+			<button id="startButton">Play</button>
 		</div>
 		<div id="info">
 		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - MMDLoader test<br />

diff --git a/examples/webgl_materials_video.html b/examples/webgl_materials_video.html
@@ -9,10 +9,7 @@
 	<body>
 
 		<div id="overlay">
-			<div>
-				<button id="startButton">Click to Play</button>
-				<p>Video playback with audio requires user interaction.</p>
-			</div>
+			<button id="startButton">Play</button>
 		</div>
 		<div id="container"></div>