switched unicode infinity symbol to the SVG file and fixed the centering

This commit is contained in:
Onur Gümüş 2022-01-23 15:17:55 +03:00
parent 366201516e
commit 627859b1f7
2 changed files with 9 additions and 6 deletions

View file

@ -3455,14 +3455,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.autoplay { .autoplay {
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
color:rgb(255 255 255); display: flex;
font-size: larger; justify-content: center;
appearance: none; appearance: none;
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
font-weight: 500; height: 32px;
font-family: inherit; width: 32px;
height: 30px; }
.infinity{
content: url("./assets/infinity.svg");
margin: auto;
} }
} }

View file

@ -5,7 +5,7 @@
<h3 class="queue-header-text">Queue</h3> <h3 class="queue-header-text">Queue</h3>
</div> </div>
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"></button> <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
</div> </div>
</div> </div>
<div class="queue-body"> <div class="queue-body">