mirrors
/
not-gwent-online
mirror of https://github.com/exane/not-gwent-online
1
0
Fork 0
Code Releases Activity

add music

This commit is contained in:
devfake 2015-07-05 13:37:57 +02:00
parent 2b068d4655
commit 6a970fef68
4 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/music-mute.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/music.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

13
client/index.html
View File

@ -13,6 +13,15 @@
<script src="Config.js"></script>
</head>
<body>
<div class="music-container" title="Click to mute/unmute music">
<span class="video-self"></span>
<i class="music-icon active"></i>
<div class="music-options">
<label for="volume">Volume</label>
<input type="text" class="volume" id="volume">
<label for="volume">%</label>
</div>
</div>
<div class="container">
<div class="row">
<div class="notifications"></div>
@ -20,6 +29,10 @@
</div>
</div>
<script src="build/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="build/tubeplayer.js"></script>
<script src="build/temp.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

59
client/scss/_base.scss
View File

@ -101,4 +101,63 @@ body {
text-align: right;
color: #8798ac;
right: 20px;
}
.music-container {
position: fixed;
top: 0;
right: 0;
transition: all .2s ease-in-out 0s;
z-index: 20;
padding: 30px;
&:hover .music-options {
opacity: 1;
visibility: visible;
}
}
.music-icon {
background: url(../../assets/music-mute.png) no-repeat;
float: right;
width: 35px;
height: 33px;
opacity: .8;
cursor: pointer;
transition: all .2s ease-in-out 0s;
&:hover {
opacity: 1;
}
&.active {
background: url(../../assets/music.png) no-repeat;
}
}
.music-options {
float: right;
background: rgba(#000, .5);
padding: 10px 20px;
color: #8798ac;
clear: both;
margin: 15px 0 0 0;
opacity: 0;
visibility: hidden;
width: 170px;
label {
float: left;
margin: 4px 10px 0 0;
}
}
.volume {
width: 40px;
background: #404d5b;
border: 0;
padding: 5px;
float: left;
margin: 0 15px 0 0;
text-align: center;
}