diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index e845160fa..4e35dd4b6 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -20,10 +20,12 @@ $header-height: calc($stage-menu-height - 2px);
border-style: solid;
border-bottom: 0;
cursor: pointer;
- transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
+ transition: all 0.25s ease;
}
.stage-selector.is-selected {
+ border-top-left-radius: .625rem;
+ border-top-right-radius: .625rem;
border-color: $motion-primary;
box-shadow: 0px 0px 0px 4px $motion-transparent;
}
@@ -44,6 +46,7 @@ $header-height: calc($stage-menu-height - 2px);
border-top-right-radius: $space;
border-bottom: 1px solid $ui-black-transparent;
width: 100%;
+ transition: background-color 0.25s ease;
}
.header-title {
@@ -53,6 +56,15 @@ $header-height: calc($stage-menu-height - 2px);
/* @todo: make this a mixin for all UI text labels */
user-select: none;
+ transition: color 0.25s ease;
+}
+
+.stage-selector.is-selected .header {
+ background-color: $motion-primary;
+}
+
+.stage-selector.is-selected .header-title {
+ color: $ui-white;
}
.count {
@@ -71,9 +83,11 @@ $header-height: calc($stage-menu-height - 2px);
.costume-canvas {
display: block;
+ margin-top: .25rem;
width: 100%;
user-select: none;
- border-bottom: 1px solid $ui-black-transparent;
+ border: 1px solid $ui-black-transparent;
+ border-radius: .25rem;
box-shadow: inset 0 0 4px $ui-black-transparent;
}
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index 9d40d3c24..50161bf8c 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -80,9 +80,9 @@ const StageSelector = props => {
{url ? (