Scrubber

1 files changed, 53 insertions, 0 deletions

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