Adjusted units to be more responsive and other fixes

This commit is contained in:
Daniel Miller 2024-12-11 04:57:27 +00:00
parent a2ae5f78a7
commit 71d410bc0a

View File

@ -1,5 +1,4 @@
@import 'theme.scss';
@import "theme.scss";
.playbar {
width: 100%;
height: $playbar-size;
@ -7,101 +6,81 @@
opacity: 0.9;
position: fixed;
bottom: 0;
.invisible-media-progress {
width: 100%;
height: 14px;
height: 0.875rem;
background-color: transparent;
position: absolute;
transform: translateY(-50%);
padding-top: 7px;
padding-top: 0.4375rem;
.media-progress {
width: 100%;
height: 3px;
height: 0.1875rem;
background-color: $controls-click-color;
.media-progress-solid {
position: relative;
height: 3px;
height: 0.1875rem;
background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
}
}
.media-progress-solid::before {
content: "";
position: absolute;
height: 3px;
height: 0.1875rem;
width: 100%;
background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
z-index: -1;
filter: blur(3px);
filter: blur(0.1875rem);
}
}
.playbar-left-group {
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 10px;
margin-left: 0.625rem;
.media-info-img {
width: 50px;
width: 3.125rem;
}
.media-info-text {
text-align: left;
margin-left: 10px;
margin-left: 0.625rem;
}
.like-dislike {
margin-left: 20px;
margin-left: 1.25rem;
}
}
.playcontrols {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.playduration {
position: absolute;
right: 10px;
top: 13px;
right: 0.625rem;
top: 0.8125rem;
}
.queue-toggle {
position: absolute;
bottom: 13px;
top: 13px;
right: 90px;
bottom: 0.8125rem;
top: 0.8125rem;
right: 5.625rem;
}
button {
.hmirror {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.controlbtn {
color: $text-controls-color;
}
.controlbtn:hover {
color: $controls-hover-color;
}
.controlbtn:active {
color: $controls-click-color;
}
background-color: transparent;
border: transparent;
border: none;
}
}