Merge pull request #111 from hashicorp/ICU-8380-style-ember-asciinema-player-for-session-recording-player-component

refactor: 💡 style ember-asciinema-player
This commit is contained in:
Carlos Alcaide Corvo authored and GitHub committed 2023-03-09 12:02:50 -08:00
commit ff920229d0
2 files changed
+66 -1

No files matched your search

@@ -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'
+65
View File
@@ -687,6 +687,71 @@
/* 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);
/* stylelint-disable selector-class-pattern */
.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: 0;
}
.control-bar {
bottom: 0;
background: var(--player-background-color);
border-top: var(--player-divider) 0.125rem solid;
}
}
}
}
// Layout - Sidebar
.layout-sidebar {
display: grid;
grid-template-areas: 'body body sidebar';