TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 20:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

move progress bar and hot keys to new components

Browse Source
This commit is contained in:
geoffrey45
2022-01-28 22:42:13 +03:00
parent 17c9f3a23e
commit e847574446
9 changed files with 243 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/BottomBar/BottomBar.scss
+43 -25
View File
@@ -1,17 +1,10 @@
.b-bar {
height: 100%;
// padding: 0 $small 0 $small;
.prog {
display: grid;
}
.grid {
display: grid;
height: 100%;
// grid-auto-columns: 1fr;
// grid-auto-flow: column;
grid-template-columns: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
@include phone-only {
grid-template-columns: 1fr 9.2rem;
@@ -48,39 +41,64 @@
}
.controlsx {
// border: solid 1px;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-end;
margin: $small;
padding: $small;
@include phone-only {
// width: min-content;
.progress-bottom {
display: flex;
align-items: center;
}
.controls-bottom {
// border: solid 1px;
width: min-content;
.shuffle, .fav {
@include phone-only {
display: none !important;
}
}
width: min-content;
}
.progress-bottom {
width: 100%;
.durationx {
background-color: #202020;
background-color: rgba(0, 72, 131, 0.171);
padding: $smaller;
border-radius: .4rem;
margin: 0 $small 0 $small;
border-radius: 0.4rem;
margin: 0 $small 0 $small;
font-size: .8rem;
color: rgb(0, 119, 255);
}
// display: none;
}
}
.r-group {
display: flex;
align-items: center;
gap: $small;
& > * {
height: 2rem;
width: 2rem;
background-size: 1.2rem !important;
background-position: 45% 50%;
cursor: pointer;
border-radius: 0.5rem;
&:hover {
background-color: rgb(170, 50, 50);
}
}
.heart {
background-image: url(../../icons/heart.svg);
}
.add-to {
background-image: url(../../icons/plus.svg);
}
.repeat {
background-image: url(../../icons/repeat.svg);
}
}
src/assets/css/ProgressBar.scss
+70
View File
@@ -0,0 +1,70 @@
input[type="range"] {
-webkit-appearance: none;
margin-right: 15px;
width: calc(100% - 2px);
height: 0.3rem;
background: rgb(59, 57, 57);
border-radius: 5px;
background-image: linear-gradient($blue, $blue);
background-size: 0% 100%;
background-repeat: no-repeat;
}
/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 0.8rem;
width: 0.8rem;
border-radius: 50%;
background: $blue;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: $blue;
}
input[type="range"]::-ms-thumb {
-webkit-appearance: none;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: $blue;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: $pink;
}
input[type="range"]::-moz-range-thumb:hover {
background: $pink;
}
input[type="range"]::-ms-thumb:hover {
background: $pink;
}
/* Input Track */
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-ms-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
src/assets/css/global.scss
+17 -96
View File
@@ -1,3 +1,5 @@
@import "../css/ProgressBar.scss";
:root {
--separator: #ffffff46;
--green: #4ad168;
@@ -104,8 +106,6 @@ button {
.bottom-bar {
grid-area: bottom-bar;
height: 4rem;
// margin: 0 $small 0 $small;
// display: none;
}
.collapsed .l-sidebar {
@@ -122,7 +122,7 @@ button {
}
.rounded {
border-radius: 10px;
border-radius: $small;
}
.circular {
@@ -271,102 +271,21 @@ button {
color: rgb(250, 250, 250);
&:hover {
background-color: rgb(170, 50, 50);
background-color: $pink;
}
}
.progress {
display: flex;
align-items: center;
position: relative;
.duration {
position: absolute;
right: 0;
top: -1rem;
font-size: small;
}
input {
-webkit-appearance: none;
width: 100%;
border: none;
outline: none;
background: transparent;
}
input:focus {
outline: none;
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
cursor: pointer;
background: #252829;
// background: linear-gradient(to right, #1488cc, #2b32b2);
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -0.35rem;
}
input:focus::-webkit-slider-runnable-track,
input::-moz-range-track {
background: #367ebd;
}
input::-moz-range-thumb {
height: 1rem;
width: 1rem;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -0.35rem;
}
input[type="number"] {
width: 40px;
padding: 4px 5px;
border: 1px solid #bbb;
border-radius: 3px;
}
.controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
& * {
height: 3rem;
width: 3rem;
background-size: 50%;
cursor: pointer;
border-radius: 0.5rem;
}
#previous {
background-image: url(../../assets/icons/previous.svg);
}
.play-pause {
background-image: url(../../assets/icons/play.svg);
}
.isPlaying {
background-image: url(../../assets/icons/pause.svg);
}
#next {
background-image: url(../../assets/icons/next.svg);
}
}
.shuffle {
width: 100%;
display: flex;
@@ -378,6 +297,10 @@ button {
background-size: 70%;
cursor: pointer;
border-radius: 0.5rem;
&:hover {
background-color: rgb(170, 50, 50);
}
}
& :first-child {
@@ -401,6 +324,10 @@ button {
background-size: 70%;
border-radius: 0.5rem;
cursor: pointer;
&:hover {
background-color: rgb(170, 50, 50);
}
}
& :first-child {
@@ -411,10 +338,4 @@ button {
background-image: url(../../assets/icons/heart.svg);
}
}
.fav *:hover,
.shuffle *:hover,
.nav *:hover {
background-color: rgb(5, 80, 150);
}
}