Make control bar and markers use terminal theme colors (fg and bg)

asciinema · Jun 1, 2024 · b7493bc · b7493bc
1 parent c212f68
commit b7493bc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 28 deletions.
diff --git a/src/components/ControlBar.js b/src/components/ControlBar.js
@@ -56,9 +56,7 @@ export default (props) => {
 
   const gutterBarStyle = () => {
     return {
-      width: "100%",
       transform: `scaleX(${props.progress || 0}`,
-      "transform-origin": "left center",
     };
   };
 
@@ -151,9 +149,8 @@ export default (props) => {
       <Show when={typeof props.progress === "number" || props.isSeekable}>
         <span class="ap-progressbar">
           <span class="ap-bar" onMouseDown={onClick} onMouseMove={onMove}>
-            <span class="ap-gutter">
-              <span class="ap-gutter-fill" style={gutterBarStyle()}></span>
-            </span>
+            <span class="ap-gutter ap-gutter-empty"></span>
+            <span class="ap-gutter ap-gutter-full" style={gutterBarStyle()}></span>
             <For each={markers()}>
               {(m, i) => (
                 <span

diff --git a/src/less/partials/_control-bar.less b/src/less/partials/_control-bar.less
@@ -1,4 +1,3 @@
-@active-controls: #bbb;
 @monospace: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace;
 
 div.ap-player {
@@ -8,8 +7,7 @@ div.ap-player {
     display: flex;
     justify-content: space-between;
     align-items: stretch;
-    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 100%);
-    color: @active-controls;
+    color: var(--term-color-foreground);
     box-sizing: content-box;
     line-height: 1;
     position: absolute;
@@ -18,6 +16,7 @@ div.ap-player {
     opacity: 0;
     transition: opacity 0.15s linear;
     user-select: none;
+    border-top: 2px solid color-mix(in oklab, black 33%, var(--term-color-background));
     z-index: 30;
 
     * {
@@ -32,7 +31,7 @@ div.ap-player {
 div.ap-control-bar {
   svg.ap-icon {
     path {
-      fill: @active-controls;
+      fill: var(--term-color-foreground);
     }
   }
 
@@ -102,15 +101,17 @@ div.ap-control-bar {
         left: 0;
         right: 0;
         height: 3px;
-        background-color: #333;
-
-        .ap-gutter-fill {
-          display: inline-block;
-          height: 100%;
-          background-color: @active-controls;
-          border-radius: 3px;
-          z-index: 10;
-        }
+      }
+
+      .ap-gutter-empty {
+        background-color: color-mix(in oklab, var(--term-color-foreground) 10%, var(--term-color-background));
+      }
+
+      .ap-gutter-full {
+        width: 100%;
+        transform-origin: left center;
+        background-color: var(--term-color-foreground);
+        border-radius: 3px;
       }
     }
   }
@@ -171,7 +172,6 @@ span.ap-progressbar span.ap-marker-container {
   width: 21px;
   position: absolute;
   margin-left: -10px;
-  z-index: 9;
 }
 
 span.ap-marker-container span.ap-marker {
@@ -180,19 +180,19 @@ span.ap-marker-container span.ap-marker {
   bottom: 12px;
   left: 7px;
   right: 7px;
-  background-color: #555;
+  background-color: color-mix(in oklab, var(--term-color-foreground) 33%, var(--term-color-background));
   position: absolute;
   transition: top 0.1s, bottom 0.1s, left 0.1s, right 0.1s, background-color 0.1s;
   border-radius: 50%;
 }
 
 span.ap-marker-container span.ap-marker.ap-marker-past {
-  background-color: @active-controls;
+  background-color: var(--term-color-foreground);
 }
 
 span.ap-marker-container span.ap-marker:hover,
 span.ap-marker-container:hover span.ap-marker {
-  background-color: @active-controls;
+  background-color: var(--term-color-foreground);
   top: 11px;
   bottom: 10px;
   left: 5px;
@@ -201,8 +201,8 @@ span.ap-marker-container:hover span.ap-marker {
 
 span.ap-marker-container span.ap-marker-tooltip {
   visibility: hidden;
-  background-color: #333;
-  color: @active-controls;
+  background-color: var(--term-color-foreground);
+  color: var(--term-color-background);
   font-family: @monospace;
   text-align: center;
   padding: 0 0.5em;

diff --git a/src/less/partials/_player.less b/src/less/partials/_player.less
@@ -40,10 +40,6 @@ div.ap-wrapper {
     width: 100%;
     align-items: center;
 
-    div.ap-player {
-      position: static;
-    }
-
     .title-bar {
       display: initial;
     }