Scrubber

4 files changed, 64 insertions, 1 deletions

diff --git a/index.html b/index.html
index c075753..d4e4dee 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,9 @@
     </nav>
 
     <content>
+        <div class="widget scrubber" style="--percent: 0;">
+            <div class="fill"></div>
+        </div>
     </content>
 
     <script src="scripts/gui-common/color.js"></script>
diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 4ac47fe..34df8e9 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -1234,5 +1234,8 @@ class WidgetSelectButton extends Widget
  */
 class WidgetScrubber extends WidgetDragable
 {
-
+    constructor()
+    {
+        
+    }
 }
diff --git a/styles/themes/base.css b/styles/themes/base.css
index c2478dd..14b11bd 100644
--- a/styles/themes/base.css
+++ b/styles/themes/base.css
@@ -41,4 +41,8 @@
     --w-sel-button-selected: #0084ff;
     --w-sel-button-selected-hover: #3ea2ff;
     --w-sel-button-selected-active: #3ea2ff;
+
+    /* Scrubber */
+    --w-scr-nub: #eee;
+    --w-scr-nub-active: white;
 }
\ No newline at end of file
diff --git a/styles/widgets.css b/styles/widgets.css
index 28c12e1..b143743 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -593,3 +593,56 @@ input {
     --w-bg-active: var(--w-sel-button-selected-active);
 }
 
+/**
+    Scrubber
+*/
+
+.scrubber {
+    width: calc(var(--base-unit) + 5px);
+    height: calc(3 * var(--base-unit) + 5px);
+    margin: 10px;
+    box-shadow: inset 5px 5px var(--w-shadow);
+    --w-bg-hover: var(--w-bg);
+    --w-bg-active: var(--w-bg);
+}
+
+.scrubber.h {
+    height: calc(var(--base-unit) + 5px);
+    width: calc(3 * var(--base-unit) + 5px);
+}
+
+.scrubber > .fill {
+    position:absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+.scrubber > .fill::before {
+    content: '◈';
+    display: block;
+    height: calc(var(--base-unit) - 10px);
+    width: calc(var(--base-unit) - 10px);
+    border-radius: 5px;
+    background-color: var(--w-scr-nub);
+    text-align: center;
+    vertical-align: middle;
+
+    position: absolute;
+
+    box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow);
+
+    bottom: calc(50% - (var(--base-unit) - 10px) / 2 + (50% * var(--percent)));
+    left: calc(50% - (var(--base-unit) - 10px) / 2);
+}
+
+.scrubber.h > .fill::before {
+    left: calc(50% - (var(--base-unit) - 10px) / 2 + (50% * var(--percent)));
+    bottom: calc(50% - (var(--base-unit) - 10px) / 2);
+}
+
+
+.scrubber:hover > .fill::before, .scrubber.touch > .fill::before {
+    background-color: var(--w-scr-nub-active);
+}
\ No newline at end of file