From 9e42712b9fc8657ab044a7071120f3bda79a9525 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 8 Mar 2023 12:30:58 -0600
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20style=20ember-asciin?=
 =?UTF-8?q?ema-player?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-8380
---
 .../session-recording/player/index.hbs        |  2 +-
 ui/admin/app/styles/app.scss                  | 63 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/ui/admin/app/components/session-recording/player/index.hbs b/ui/admin/app/components/session-recording/player/index.hbs
index 377faca68..e3244d9bd 100644
--- a/ui/admin/app/components/session-recording/player/index.hbs
+++ b/ui/admin/app/components/session-recording/player/index.hbs
@@ -1,4 +1,4 @@
-<div class='session-recording-player-layout'>
+<div class='session-recording-player'>
   <div class='session-recording-player-header'>
     <Hds::Link::Standalone
       @icon='arrow-left'
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 1f305e001..7ca105639 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -686,3 +686,66 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+// session recording player
+.session-recording-player {
+  --player-background-color: #252937;
+  --player-divider: #656a761a;
+  --link-color: #fff;
+
+  background-color: var(--player-background-color);
+  border-radius: 0.75rem;
+
+  &-header {
+    padding-left: 1rem;
+    height: 3rem;
+    width: 100%;
+    border-bottom: var(--player-divider) 0.125rem solid;
+
+    // override of standalone link styles to allow for
+    // static colors in light and dark mode
+    .hds-link-standalone {
+      height: inherit;
+    }
+
+    a {
+      color: var(--link-color);
+    }
+
+    a:hover {
+      color: var(--link-color);
+
+      .hds-link-standalone__text {
+        text-decoration-color: var(--link-color);
+      }
+    }
+  }
+
+  &-theme {
+    .asciinema-theme-asciinema {
+      background-color: var(--player-background-color);
+    }
+
+    .asciinema-terminal {
+      background-color: var(--player-background-color);
+      border-color: var(--player-background-color);
+      border-width: 1rem;
+    }
+
+    .asciinema-player {
+      border-radius: 0.75rem;
+    }
+
+    .asciinema-player-wrapper {
+      &.hud .control-bar {
+        bottom: 0rem;
+      }
+
+      .control-bar {
+        bottom: 0rem;
+        background: var(--player-background-color);
+        border-top: var(--player-divider) 0.125rem solid;
+      }
+    }
+  }
+}