summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAki <please@ignore.pl>2021-05-27 19:26:36 +0200
committerAki <please@ignore.pl>2021-05-27 19:26:36 +0200
commit60441671ea239c01f0ce91314983823a8692f219 (patch)
tree375f72e80a82f72740698c7346aa3703b4017ee3
parent153a747efc84aa57fa38003284b0e80bed62e0f0 (diff)
downloadderelict-prototype-60441671ea239c01f0ce91314983823a8692f219.zip
derelict-prototype-60441671ea239c01f0ce91314983823a8692f219.tar.gz
derelict-prototype-60441671ea239c01f0ce91314983823a8692f219.tar.bz2
Added tip to progress to indicate hover
-rw-r--r--derelict.js3
-rw-r--r--style.css24
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;
+}