secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Adding pop-up volume control for snapcast, #274

Browse Source
This commit is contained in:
James Barnsley
2018-05-30 21:39:38 +12:00
parent 8135b6e479
commit 7e9fb9fa2a
12 changed files with 427 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/scss/components/_dropdown-field.scss
View File

@ -57,15 +57,15 @@
&:before {
content: '';
display: block;
position: absolute;
top: -6px;
right: 10px;
width: 6px;
height: 6px;
background: $white;
width: 0;
height: 0;
border-left: 5px solid $darkest_grey;
border-right: 5px solid $darkest_grey;
border-bottom: 6px solid $white;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: -3px;
right: 9px;
}
& > .liner {
@ -76,20 +76,6 @@
overflow-y: auto;
border-radius: 3px;
&:before {
content: '';
display: block;
position: absolute;
top: -6px;
right: 10px;
background: $white;
width: 0;
height: 0;
border-left: 5px solid $darkest_grey;
border-right: 5px solid $darkest_grey;
border-bottom: 6px solid $white;
}
.option {
@include animate();
position: relative;

2
src/scss/components/_playback-controls.scss
View File

@ -124,7 +124,7 @@
&.progress {
bottom: 10px;
left: 150px;
left: 130px;
right: 260px;
padding-left: 20px;
padding-right: 20px;

2
src/scss/components/_slider.scss
View File

@ -5,7 +5,7 @@
.track {
position: absolute;
background: lighten($dark_grey, 10%);
background: rgba(0,0,0,0.2);
border-radius: 2px;
.progress {

59
src/scss/components/_snapcast-volume-control.scss Executable file
View File

@ -0,0 +1,59 @@
.snapcast-volume-control {
position: relative;
.volumes {
position: absolute;
bottom: 40px;
right: 0px;
width: 250px;
border-radius: 3px;
background: lighten($grey,5%);
color: $white;
font-size: 14px;
font-weight: 500;
text-align: left;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:after {
content: '';
display: block;
width: 6px;
height: 6px;
background: lighten($grey,5%);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -3px;
right: 9px;
}
.client {
padding: 10px 12px 6px;
&:not(:first-child) {
border-top: 1px solid rgba(255,255,255,0.1);
}
.name {
display: block;
padding-bottom: 5px;
}
.volume-control {
display: block;
position: relative;
padding-left: 22px;
.mute-control {
position: absolute;
top: -2px;
left: -2px;
padding: 2px;
}
}
}
}
}