KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styled volumeslider on mobileremote to match other

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-02-01 21:18:27 +01:00
parent ab2a1b0942
commit 3b3a984689
4 changed files with 60 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/css/style.css
View File

@@ -1722,6 +1722,15 @@ nav ul li:hover, nav ul li.active {
background: #dadada; background: #dadada;
} }
#volume-control-remote .ui-state-active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15);
position: absolute;
width: 14px;
height: 14px;
border-radius: 21px;
background: #464646 !important;
}
.ui-slider-handle .ui-slider-handle
{ {
margin-top:-5px; margin-top:-5px;
@@ -2161,21 +2170,55 @@ nav ul li:hover, nav ul li.active {
height: 10px; height: 10px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer;
float:left;
position: relative;
/* left: 10px; */
/* margin: 13px auto; */
/* height:5px; */
/* width: 75px; */
/*background-color:rgba(0, 0, 0, 0.5);*/
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
border: none;
outline: none;
/*border-radius: 2px;*/
} }
#volume-control-remote .ui-slider-range-min{ #volume-control-remote .ui-slider-range-min{
margin-left:0px; margin-left:0px;
margin-top: 0px; /* margin-top: 0px; */
/* height:10px; */
/* background: black; */
height: 10px; height: 10px;
background: black; /* width: 75px; */
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
border: none;
outline: none;
} }
#volume-control-remote .ui-slider-handle{ #volume-control-remote .ui-slider-handle{
margin-left:-25px !important; margin-left: -12.5px !important;
width: 40px;
margin-top:-3px; margin-top:-3px;
background: #2d2d2d; background: #2d2d2d;
border:none; border:none;
display: none; /* display: none; */
/* height: 14px; */
/* width: 10px; */
height: 25px;
padding: 0;
border: 1px solid white;
width: 25px;
background: #000 50% 50% repeat-x;
position: absolute;
cursor: pointer;
outline: none;
/* border: none; */
margin-left: -7.5px;
/* margin-top: 0px; */
border-radius: 1000px;
transition: background 0.2s ease, box-shadow 0.2s ease;
} }
.slider-vol{ .slider-vol{

11
public/dist/lib/jquery.ui.touch-punch.min.js vendored Normal file
View File

@@ -0,0 +1,11 @@
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

1
public/php/controller.php
View File

@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<?php include("header.php"); ?> <?php include("header.php"); ?>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jemjlblambcgjmmhheaklfnphncdmfmb" />
</head> </head>
<body class="noselect cursor-default"> <body class="noselect cursor-default">
<header> <header>

1
public/php/header.php
View File

@@ -38,6 +38,7 @@
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script> <script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="/public/dist/lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/public/dist/lib/materialize.min.js"></script> <script type="text/javascript" src="/public/dist/lib/materialize.min.js"></script>
<script type="text/javascript" src="/public/dist/lib/socket.io.min.js"></script> <script type="text/javascript" src="/public/dist/lib/socket.io.min.js"></script>
<script type="text/javascript" src="/public/dist/lib/color-thief.js"></script> <script type="text/javascript" src="/public/dist/lib/color-thief.js"></script>