Added tip to progress to indicate hover

2 files changed, 25 insertions, 2 deletions

diff --git a/derelict.js b/derelict.js
index 1484c55..bc6e17e 100644
--- a/derelict.js
+++ b/derelict.js
@@ -184,18 +184,21 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 	const bottomBar = document.createElement("div")
 	const seekbar = document.createElement("div")
 	const progress = document.createElement("div")
+	const tip = document.createElement("div")
 	const play = document.createElement("button")
 	bottomBar.classList.add("bottom-bar")
 	seekbar.classList.add("seekbar")
 	seekbar.draggable = true
 	progress.classList.add("progress")
 	progress.style.width = "0%"
+	tip.classList.add("tip")
 	play.innerText = "Play"
 
 	container.appendChild(bottomBar)
 	bottomBar.appendChild(play)
 	bottomBar.appendChild(seekbar)
 	seekbar.appendChild(progress)
+	progress.appendChild(tip)
 
 	let current = start
 	let isPlaying = false
diff --git a/style.css b/style.css
index bd5073b..cd3ca8a 100644
--- a/style.css
+++ b/style.css
@@ -197,15 +197,35 @@ body {
 	z-index: 10000;
 }
 
-.bottom-bar .seekbar {
+.seekbar {
 	width: 100%;
 	height: 0.5em;
 	background: #333;
 	cursor: pointer;
 }
 
-.bottom-bar .seekbar .progress {
+.seekbar .progress {
+	position: relative;
 	height: 100%;
 	background: #bf1041;
 	pointer-events: none;
 }
+
+.seekbar .progress .tip {
+	position: absolute;
+	right: 0;
+	width: 0;
+	height: 0;
+	top: 0.25em;
+	border-radius: 100%;
+	background: #bf1041;
+	box-shadow: 0 2px 3px -1px #000;
+	transition: width 0.2s, height 0.2s, right 0.2s, top 0.2s;
+}
+
+.seekbar:hover .progress .tip {
+	width: 0.9em;
+	height: 0.9em;
+	right: -0.45em;
+	top: -0.2em;
+}