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

189
style/playbar.scss
View File

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