diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 3a6c477a3..6c31e77ce 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -65,8 +65,8 @@ class MetaItem extends Component {
-
-
+
+
{this.renderProgress()}
@@ -94,7 +94,7 @@ class MetaItem extends Component {
{this.props.menu.map(({ label, onSelect }) => (
-
+
))}
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index ae3d02553..16fd27920 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -32,7 +32,7 @@
background-origin: border-box;
}
- .play-button-container {
+ .play-icon-container {
position: absolute;
top: calc(50% - (var(--poster-relative-size) * 0.2));
left: calc(50% - (var(--poster-relative-size) * 0.2));
@@ -42,10 +42,10 @@
background-color: var(--color-surfacelighter);
border-radius: 50%;
box-shadow: 0 0 calc(var(--poster-relative-size) * 0.1) calc(var(--poster-relative-size) * 0.015) var(--color-backgroundlight);
- visibility: var(--play-button-visibility, collapse);
+ visibility: var(--play-icon-visibility, collapse);
text-align: center;
- .play-button-icon {
+ .play-icon {
height: 40%;
margin-top: 30%;
fill: var(--color-primary);
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index d6eee6aa9..889dd3190 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -7,7 +7,7 @@
--poster-relative-size: calc(180px * var(--poster-shape-ratio));
.meta-item {
- --play-button-visibility: visible;
+ --play-icon-visibility: visible;
}
}
@@ -16,7 +16,7 @@
.meta-item {
&:hover, &:focus {
- --play-button-visibility: visible;
+ --play-icon-visibility: visible;
}
}
}