From c908577d3621aab29a40025fb69fd8695e021e57 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Tue, 1 Jul 2025 01:33:12 +0530 Subject: Adds Seekbar --- hg.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) (limited to 'hg.css') diff --git a/hg.css b/hg.css index a2c2bd3..5451dec 100644 --- a/hg.css +++ b/hg.css @@ -427,6 +427,75 @@ canvas { top: 0; } +.progress-bar-container { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 55px; + background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85)); + border-top: 2px solid #ff2975; + z-index: 1000; + padding: 10px 20px; + box-shadow: + 0 -2px 10px rgba(0, 0, 0, 0.6), + 0 0 15px rgba(255, 41, 117, 0.2); +} + +.progress-info { + display: flex; + justify-content: space-between; + margin-bottom: 6px; + font-family: "VCR", monospace; + font-size: 10px; + color: #00ffff; + text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); +} + +.progress-bar { + position: relative; + height: 6px; + background: linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.9)); + border: 1px solid #333; + border-radius: 3px; + cursor: pointer; + overflow: hidden; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #ff2975, #00ffff); + border-radius: 3px; + width: 0%; + transition: width 0.1s ease-out; + box-shadow: 0 0 8px rgba(255, 41, 117, 0.4); +} + +.progress-handle { + position: absolute; + top: -4px; + width: 14px; + height: 14px; + background: radial-gradient(circle, #00ffff, #ff2975); + border: 1px solid #fff; + border-radius: 50%; + cursor: pointer; + opacity: 0; + transition: opacity 0.3s ease; + box-shadow: 0 0 8px rgba(0, 255, 255, 0.6); + transform: translateX(-50%); +} + +.progress-bar:hover .progress-handle { + opacity: 1; +} + +.progress-handle:hover { + transform: translateX(-50%) scale(1.1); + box-shadow: 0 0 12px rgba(0, 255, 255, 0.8); +} + .player-controls { position: absolute; top: 0; -- cgit v1.2.3