eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Adjusted units to be more responsive and other fixes

Browse Source
This commit is contained in:
Daniel Miller 2024-12-11 04:57:27 +00:00
parent a2ae5f78a7
commit 71d410bc0a
1 changed files with 84 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
style/playbar.scss
View File

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