Merge branch 'develop'

Conflicts:
	webclient/index.html
This commit is contained in:
Wouter van Wijk 2013-07-21 11:58:51 +02:00
commit 7b731dc5ed
30 changed files with 3101 additions and 20346 deletions

View File

@ -24,23 +24,18 @@ If you want to use the web client on a Raspberry Pi, do yourself a favor and use
Quick install
=============
Drop the 'webclient' folder in a folder on your Mopidy-system. Then change the settings.py (in the root directory of the Mopidy code) to make it work.
Add a line *mopidy.frontends.http.HttpFrontend* to the FRONTENDS section of your settings.py in the .config directory, and set the *HTTP_SERVER_STATIC_DIR* to point to the folder with the files from the web client.
Drop the 'webclient' folder in a folder on your Mopidy-system. Then change the [settings of Mopidy](http://docs.mopidy.com/en/latest/config/) to make it work.
Something like this:
```python
FRONTENDS = (
'mopidy.frontends.mpd.MpdFrontend',
'mopidy.frontends.http.HttpFrontend',
'mopidy.frontends.lastfm.LastfmFrontend',
'mopidy.frontends.mpris.MprisFrontend',
)
HTTP_SERVER_HOSTNAME = u'0.0.0.0'
HTTP_SERVER_PORT = 6680
HTTP_SERVER_STATIC_DIR = u'/opt/webclient'
Example (assuming the webclient is in /opt/webclient):
```code
[http]
enabled = true
hostname = ::
port = 6680
static_dir = /opt/webclient
```
Then point your browser (modern, with websockets: recent versions of Firefox, Chrome, Safari and IE10) to the ip-address and port of your device, which you added to the settings.py. e.g. http://192.168.1.5:6680
Then point your browser (modern, with websockets: recent versions of Firefox, Chrome, Safari and IE10) to the ip-address and port of your device. e.g. http://192.168.1.5:6680
Security
========

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
/*
* jQuery Mobile Git Build: SHA1: 3d48d6517f808550ee402a2859feedec13b0a3fe <> Date: Tue Feb 19 15:25:22 2013 -0800
* jQuery Mobile 1.3.1
* Git HEAD hash: 74b4bec049fd93e4fe40205e6157de16eb64eb46 <> Date: Wed Apr 10 2013 21:57:23 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
@ -890,7 +891,7 @@ a.ui-link-inherit {
background-image: url(../images/icons-36-black.png);
}
.ui-icon-plus {
background-position: 0px 50%;
background-position: 0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
@ -1005,31 +1006,31 @@ a.ui-link-inherit {
height: 100%;
}
.ui-overlay-shadow {
-moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.ui-shadow {
-moz-box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/
}
.ui-bar-a .ui-shadow,
.ui-bar-b .ui-shadow ,
.ui-bar-c .ui-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.3);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.ui-shadow-inset {
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}
.ui-icon-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
}
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
-----------------------------------------------------------------------------------------------------------*/
@ -1041,15 +1042,15 @@ a.ui-link-inherit {
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
-moz-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
-moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
-moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
}
/* unset box shadow in browsers that don't do it right
-----------------------------------------------------------------------------------------------------------*/
@ -1081,10 +1082,10 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-page { outline: none; }
/*orientations from js are available */
@media screen and (orientation: portrait){
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
.ui-mobile .ui-page { min-height: 420px; }
}
@media screen and (orientation: landscape){
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
.ui-mobile .ui-page { min-height: 300px; }
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
@ -1164,24 +1165,18 @@ div.ui-mobile-viewport { overflow-x: hidden; }
opacity: 0;
}
.in {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.out {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
@ -1328,8 +1323,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
}
/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromright {
from { -moz-transform: translateX(100%); }
@ -1340,8 +1335,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
to { transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
from { -webkit-transform: translate3d(-100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
@ -1353,8 +1348,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
@ -1365,8 +1360,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
to { transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(100%,0,0); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
@ -1385,7 +1380,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-duration: 350ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-transform: translate3d(-100%,0,0);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
@ -1393,7 +1388,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromright;
@ -1401,7 +1396,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideinfromright;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-transform: translate3d(100%,0,0);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
@ -1409,7 +1404,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideouttoright;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromleft;
@ -2077,8 +2072,7 @@ div.ui-btn-text { width: auto; }
.ui-mini.ui-btn-icon-bottom .ui-btn-inner,
.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
/* Corner styling inheritance */
.ui-btn-inner,
.ui-btn-text {
.ui-btn-inner {
-webkit-border-radius: inherit;
border-radius: inherit;
}
@ -2132,10 +2126,10 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-collapsible-heading .ui-btn-icon-bottom .ui-btn-inner { text-align: center; }
.ui-collapsible-heading .ui-btn-icon-left.ui-mini .ui-btn-inner { padding-left: 30px; }
.ui-collapsible-heading .ui-btn-icon-right.ui-mini .ui-btn-inner { padding-right: 30px; }
.ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading .ui-btn span.ui-btn .ui-btn-inner { padding: 10px 0; }
.ui-collapsible-heading .ui-btn span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
.ui-collapsible-heading-status { position: absolute; top: -9999px; left: 0; }
.ui-collapsible-content {
display: block;
margin: 0 -15px;
@ -2296,9 +2290,9 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
}
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0px;
left: 0px;
right: 0px;
top: 0;
left: 0;
right: 0;
bottom: 1px;
position: absolute;
filter: Alpha(Opacity=0);
@ -2513,7 +2507,7 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
textarea.ui-mini { height: 45px; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { margin-top: -14px; right: -3px; }
.ui-mini .ui-input-clear { right: -3px; }
.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }
@ -2655,6 +2649,10 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
.ui-listview .ui-li > .ui-btn-text {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child,
.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
-webkit-border-top-right-radius: inherit;
@ -2696,6 +2694,8 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
@ -2715,7 +2715,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }
.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
.ui-collapsible-content .ui-listview-filter { margin: -10px -15px 10px -15px; border-bottom: inherit; }
.ui-listview-filter-inset { margin: -15px -5px; background: transparent; }
@ -2765,7 +2765,7 @@ input.ui-input-text.ui-slider-input {
height: 22px;
line-height: 22px;
font-size: 14px;
border: none;
border-width: 0;
background-image: none;
font-weight: bold;
text-align: center;
@ -2834,6 +2834,11 @@ div.ui-slider-switch {
margin: .5em 0;
top: 0;
}
/* reset the clearfix */
div.ui-slider-switch:before, div.ui-slider-switch:after {
display: none;
clear: none;
}
div.ui-slider-switch.ui-mini {
width: 5em;
height: 29px;
@ -3137,6 +3142,7 @@ div.ui-slider-switch.ui-mini {
.ui-panel {
width: 17em;
min-height: 100%;
max-height: none;
border-width: 0;
position: absolute;
top: 0;
@ -3144,7 +3150,9 @@ div.ui-slider-switch.ui-mini {
}
.ui-panel-closed {
width: 0;
max-height: 100%;
overflow: hidden;
visibility: hidden;
}
.ui-panel-fixed {
position: fixed;
@ -3195,9 +3203,10 @@ div.ui-slider-switch.ui-mini {
-moz-transition: -moz-transform 350ms ease;
transition: transform 350ms ease;
}
/* hardware acceleration for smoother transitions */
/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
@ -3225,8 +3234,8 @@ div.ui-slider-switch.ui-mini {
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-moz-transform: none;
}
/* panel right */
.ui-panel-position-right {
@ -3249,8 +3258,8 @@ div.ui-slider-switch.ui-mini {
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-moz-transform: none;
}
/* positioning: content wrap, fixed toolbars and dismiss */
/* panel left open */
@ -3309,15 +3318,15 @@ div.ui-slider-switch.ui-mini {
-moz-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-overlay {
-webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
-moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
box-shadow: -5px 0px 5px rgba(0,0,0,.15);
.ui-panel-display-overlay {
-webkit-box-shadow: 5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 5px 0 5px rgba(0,0,0,.15);
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-left.ui-panel-display-overlay {
-webkit-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
-moz-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
box-shadow: 5px 0px 5px rgba(0,0,0,.15);
.ui-panel-position-right.ui-panel-display-overlay {
-webkit-box-shadow: -5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: -5px 0 5px rgba(0,0,0,.15);
box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-display-push.ui-panel-open.ui-panel-position-left {
border-right-width: 1px;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
/*
* jQuery Mobile Git Build: SHA1: 56a6976b89feddf34e163c3fcc7196ae0a44c1a0 <> Date: Mon Feb 4 08:28:28 2013 -0800
* jQuery Mobile 1.3.1
* Git HEAD hash: 74b4bec049fd93e4fe40205e6157de16eb64eb46 <> Date: Wed Apr 10 2013 21:57:23 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
@ -9,22 +10,28 @@
*/
/* some unsets - more probably needed */
.ui-mobile, .ui-mobile body { height: 99.9%; }
.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
.ui-mobile a img, .ui-mobile fieldset { border-width: 0; }
/* responsive page widths */
.ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* Issue #2066 */
body.ui-mobile-viewport,
div.ui-mobile-viewport { overflow-x: hidden; }
/* "page" containers - full-screen views, one should always be in view post-pageload */
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
.ui-mobile .ui-page-active { display: block; overflow: visible; }
/* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
.ui-page { outline: none; }
/*orientations from js are available */
@media screen and (orientation: portrait){
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
.ui-mobile .ui-page { min-height: 420px; }
}
@media screen and (orientation: landscape){
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
.ui-mobile .ui-page { min-height: 300px; }
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; filter: Alpha(Opacity=18); opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
@ -36,7 +43,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }
/*headers, content panels*/
.ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; }
.ui-bar { font-size: 16px; margin: 0; }
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
@ -60,7 +69,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-header-fixed > .ui-btn-icon-notext { top: 7px;}
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
/* content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
/* corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
@ -77,10 +88,14 @@ div.ui-mobile-viewport { overflow-x: hidden; }
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
/* icons sizing */
.ui-icon { width: 18px; height: 18px; }
/* non-js content hiding */
.ui-nojs { position: absolute; left: -9999px; }
/* accessible content hiding */
.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
/* Transitions originally inspired by those from jQtouch, nice work, folks */
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
@ -94,24 +109,18 @@ div.ui-mobile-viewport { overflow-x: hidden; }
opacity: 0;
}
.in {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.out {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
@ -256,9 +265,10 @@ div.ui-mobile-viewport { overflow-x: hidden; }
opacity: 0;
}
}
/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromright {
from { -moz-transform: translateX(100%); }
@ -269,8 +279,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
to { transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
from { -webkit-transform: translate3d(-100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
@ -280,9 +290,10 @@ div.ui-mobile-viewport { overflow-x: hidden; }
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
@ -293,8 +304,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
to { transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(100%,0,0); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
@ -313,7 +324,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-duration: 350ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-transform: translate3d(-100%,0,0);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
@ -321,7 +332,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromright;
@ -329,7 +340,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideinfromright;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-transform: translate3d(100%,0,0);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
@ -337,7 +348,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: slideouttoright;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromleft;
@ -388,6 +399,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
animation-name: fadein;
animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
@ -450,6 +462,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
@ -512,6 +525,12 @@ div.ui-mobile-viewport { overflow-x: hidden; }
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-flip {
-webkit-perspective: 1000;
-moz-perspective: 1000;
@ -520,7 +539,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
}
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility: hidden;
-moz-transform: translateX(0);
backface-visibility: hidden;
@ -606,6 +625,12 @@ div.ui-mobile-viewport { overflow-x: hidden; }
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-turn {
-webkit-perspective: 200px;
-moz-perspective: 200px;
@ -615,7 +640,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
}
.turn {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-webkit-transform-origin: 0;
-moz-backface-visibility: hidden;
@ -707,6 +732,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
@ -824,21 +850,29 @@ div.ui-mobile-viewport { overflow-x: hidden; }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
/* content configurations. */
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/* grid solo: 100 - single item fallback */
.ui-grid-solo .ui-block-a { display: block; float: none; }
/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping. -.5px to fix BB5 wrap issue. */
/* grid a: 50/50 */
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%; }
.ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; }
.ui-grid-a .ui-block-a { clear: left; }
/* grid b: 33/33/33 */
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.25%; }
.ui-grid-b > :nth-child(n) { width: 33.333%; margin-right: -.5px; }
.ui-grid-b .ui-block-a { clear: left; }
/* grid c: 25/25/25/25 */
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.925%; }
.ui-grid-c > :nth-child(n) { width: 25%; margin-right: -.5px; }
.ui-grid-c .ui-block-a { clear: left; }
/* grid d: 20/20/20/20/20 */
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.925%; }
.ui-grid-d > :nth-child(n) { width: 20%; }
.ui-grid-d .ui-block-a { clear: left; }
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
@media all and (max-width: 35em) {
.ui-responsive .ui-block-a,
.ui-responsive .ui-block-b,
@ -849,6 +883,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
float:none;
}
}
/* fixed page header & footer configuration */
.ui-header-fixed,
.ui-footer-fixed {
left: 0;
@ -899,6 +934,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-footer-fixed .ui-btn {
z-index: 10;
}
/* workarounds for other widgets */
.ui-android-2x-fixed .ui-li-has-thumb {
-webkit-transform: translate3d(0,0,0);
}
@ -909,6 +945,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-navbar ul { list-style:none; margin: 0; padding: 0; position: relative; display: block; border: 0; max-width: 100%; overflow: visible; zoom: 1; }
.ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; }
.ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; }
/* add border if not in header/footer (full width) */
.ui-navbar li:last-child .ui-btn,
.ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; }
.ui-header .ui-navbar li:last-child .ui-btn,
@ -918,6 +955,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; }
.ui-header .ui-navbar li .ui-btn,
.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; }
/* fixing gaps caused by subpixel problem */
.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn,
.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; }
.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn,
@ -940,7 +978,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
.ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; }
.ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; } /* .ui-mobile to increase specificity level */
.ui-btn-block { display: block; }
.ui-header > .ui-btn,
.ui-footer > .ui-btn { display: inline-block; margin: 0; }
@ -977,11 +1015,12 @@ div.ui-btn-text { width: auto; }
.ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
.ui-mini.ui-btn-icon-bottom .ui-btn-inner,
.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
.ui-btn-inner,
.ui-btn-text {
/* Corner styling inheritance */
.ui-btn-inner {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/*btn icon positioning*/
.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
.ui-btn-icon-left > .ui-btn-inner > .ui-icon, .ui-btn-icon-right > .ui-btn-inner > .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
.ui-btn-icon-top .ui-btn-inner .ui-icon, .ui-btn-icon-bottom .ui-btn-inner .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
@ -1005,7 +1044,9 @@ div.ui-btn-text { width: auto; }
.ui-footer .ui-btn-icon-bottom .ui-icon,
.ui-mini.ui-btn-icon-bottom .ui-icon,
.ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
/*hiding native button,inputs */
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; border: none; text-indent: -9999px; }
/* Fixes IE/WP filter alpha opacity bugs */
.ui-disabled .ui-btn-hidden { display: none; }
.ui-disabled { z-index: 1; }
.ui-field-contain .ui-btn.ui-submit { margin: 0; }
@ -1029,18 +1070,18 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-collapsible-heading .ui-btn-icon-bottom .ui-btn-inner { text-align: center; }
.ui-collapsible-heading .ui-btn-icon-left.ui-mini .ui-btn-inner { padding-left: 30px; }
.ui-collapsible-heading .ui-btn-icon-right.ui-mini .ui-btn-inner { padding-right: 30px; }
.ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading .ui-btn span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading .ui-btn span.ui-btn .ui-btn-inner { padding: 10px 0; }
.ui-collapsible-heading .ui-btn span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
.ui-collapsible-heading-status { position: absolute; top: -9999px; left: 0; }
.ui-collapsible-content {
display: block;
margin: 0 -15px;
padding: 10px 15px;
border-left-width: 0;
border-right-width: 0;
border-top: none;
background-image: none;
border-top: none; /* Overrides ui-body-* */
background-image: none; /* Overrides ui-body-* */
}
.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-content-collapsed { display: none; }
@ -1101,6 +1142,7 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
.ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
/* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
.ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }
.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
@ -1155,7 +1197,7 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-hide-label .ui-controlgroup-controls { width: 100%; }
}
.ui-dialog {
background: none !important;
background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
}
.ui-dialog-contain {
width: 92.5%;
@ -1188,13 +1230,13 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
}
.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
position: absolute !important;
position: absolute !important; /* See line #553 of popup.js */
}
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
top: 0px;
left: 0px;
right: 0px;
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0;
left: 0;
right: 0;
bottom: 1px;
position: absolute;
filter: Alpha(Opacity=0);
@ -1339,10 +1381,11 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
.ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
.ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }
/* input, label positioning */
.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
.ui-field-contain:last-child { border-bottom-width: 0; }
.ui-field-contain { max-width: 100%; }
.ui-field-contain { max-width: 100%; } /* This prevents horizontal scrollbar in IE7 */
@media all and (min-width: 28em){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}
@ -1350,8 +1393,10 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-select select { position: absolute; left: -9999px; top: -9999px; }
.ui-select .ui-btn { opacity: 1; }
.ui-field-contain .ui-select .ui-btn { margin: 0; }
/* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: none; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; filter: Alpha(Opacity=0); opacity: 0; z-index: 2; }
.ui-select .ui-disabled { opacity: .3; }
/* Display none because of issues with IE/WP's filter alpha opacity */
.ui-select .ui-disabled select { display: none; }
@-moz-document url-prefix() { .ui-select .ui-btn select { opacity: 0.0001; }}
.ui-select .ui-btn.ui-select-nativeonly { border-radius: 0; border: 0; }
@ -1365,9 +1410,11 @@ label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
.ui-select .ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 45px; }
.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 32px; }
/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
/*listbox*/
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden !important;
}
/* This !important is required for iPad Safari specifically. See https://github.com/jquery/jquery-mobile/issues/2647 */ }
.ui-select .ui-btn-text { text-overflow: ellipsis; }
.ui-selectmenu { padding: 6px; min-width: 160px; }
.ui-selectmenu .ui-listview { margin: 0; }
@ -1383,6 +1430,7 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-field-contain .ui-select { width: 78%; display: inline-block; }
.ui-hide-label .ui-select { width: 100%; }
}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; min-height: 1.4em; line-height: 1.4em; font-size: 16px; display: block; width: 100%; outline: 0; }
@ -1403,9 +1451,11 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
textarea.ui-mini { height: 45px; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { margin-top: -14px; right: -3px; }
.ui-mini .ui-input-clear { right: -3px; }
.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }
/* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
input[type=number]::-webkit-outer-spin-button { margin: 0; }
@media all and (min-width: 28em){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
@ -1434,6 +1484,7 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
.ui-rangeslider:after {
clear: both;
}
/* Margin-top/bottom: .5em * 16px/14px to make it equal to ui-rangeslider-sliders margin (input font-size is 14px) */
.ui-rangeslider input.ui-input-text.ui-slider-input {
margin: .57143em 0;
}
@ -1478,11 +1529,12 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
border-width: 0;
height: 0;
}
html >body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
height: 15px;
border-width: 1px;
}
html >body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
height: 12px;
}
@media all and (min-width: 28em){
@ -1540,7 +1592,11 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-li-static { background-image: none; }
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
.ui-listview .ui-li > .ui-btn-text {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child,
.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
-webkit-border-top-right-radius: inherit;
@ -1582,6 +1638,8 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
@ -1601,13 +1659,14 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; }
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }
.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
.ui-collapsible-content .ui-listview-filter { margin: -10px -15px 10px -15px; border-bottom: inherit; }
.ui-listview-filter-inset { margin: -15px -5px; background: transparent; }
.ui-collapsible-content .ui-listview-filter-inset { margin: -5px; border-bottom-width: 0; }
.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
.ui-li.ui-screen-hidden{ display:none; }
/* Odd iPad positioning issue. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.ui-li .ui-btn-text { overflow: visible; }
}
@ -1640,6 +1699,7 @@ div.ui-slider:before, div.ui-slider:after {
div.ui-slider:after {
clear: both;
}
/* High level of specificity to override Textinput CSS. */
input.ui-input-text.ui-slider-input {
display: block;
float: left;
@ -1649,7 +1709,7 @@ input.ui-input-text.ui-slider-input {
height: 22px;
line-height: 22px;
font-size: 14px;
border: none;
border-width: 0;
background-image: none;
font-weight: bold;
text-align: center;
@ -1681,6 +1741,7 @@ input.ui-input-text.ui-slider-input {
border: none;
height: 100%;
}
/* High level of specificity to override button margins in grids */
.ui-slider-track .ui-btn.ui-slider-handle,
.ui-slider-switch .ui-btn.ui-slider-handle {
position: absolute;
@ -1717,6 +1778,11 @@ div.ui-slider-switch {
margin: .5em 0;
top: 0;
}
/* reset the clearfix */
div.ui-slider-switch:before, div.ui-slider-switch:after {
display: none;
clear: none;
}
div.ui-slider-switch.ui-mini {
width: 5em;
height: 29px;
@ -1830,32 +1896,40 @@ div.ui-slider-switch.ui-mini {
margin-bottom:1.4em;
opacity: .5;
}
/* Add strokes between each row */
.table-stroke thead th {
border-bottom: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.table-stroke tbody th,
.table-stroke tbody td {
border-bottom: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
/* Add alternating row stripes */
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
background-color: #eeeeee;
background-color: #eeeeee; /* non-RGBA fallback */
background-color: rgba(0,0,0,0.04);
}
/* Add stroke to the header and last item */
.table-stripe thead th,
.table-stripe tbody tr:last-child {
border-bottom: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/*
Styles for the table columntoggle mode
*/
.ui-table-columntoggle-btn {
float: right;
margin-bottom:.8em;
}
/* Remove top/bottom margins around the fieldcontain on check list */
.ui-table-columntoggle-popup fieldset {
margin:0;
}
/* Hide all prioritized columns by default */
@media only all {
th.ui-table-priority-6,
td.ui-table-priority-6,
@ -1872,76 +1946,88 @@ div.ui-slider-switch.ui-mini {
display: none;
}
}
/* Preset breakpoints if ".ui-responsive" class added to table */
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-1,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-1 {
display: table-cell;
}
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-2,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-2 {
display: table-cell;
}
}
/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-3,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-3 {
display: table-cell;
}
}
/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-4,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-4 {
display: table-cell;
}
}
/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-5,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-5 {
display: table-cell;
}
}
/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-6,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-6 {
display: table-cell;
}
}
/* Unchecked manually: Always hide */
.ui-table-columntoggle th.ui-table-cell-hidden,
.ui-table-columntoggle td.ui-table-cell-hidden,
.ui-table-columntoggle.ui-responsive th.ui-table-cell-hidden,
.ui-table-columntoggle.ui-responsive td.ui-table-cell-hidden {
display: none;
}
/* Checked manually: Always show */
.ui-table-columntoggle th.ui-table-cell-visible,
.ui-table-columntoggle td.ui-table-cell-visible,
.ui-table-columntoggle.ui-responsive th.ui-table-cell-visible,
.ui-table-columntoggle.ui-responsive td.ui-table-cell-visible {
display: table-cell;
}
/*
Styles for the table columntoggle mode
*/
.ui-table-reflow td .ui-table-cell-label,
.ui-table-reflow th .ui-table-cell-label {
display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
@media only all {
/* Hide the table headers */
.ui-table-reflow thead td,
.ui-table-reflow thead th {
display: none;
}
/* Show the table cells as a block level element */
.ui-table-reflow td,
.ui-table-reflow th {
text-align: left;
display: block;
}
/* Add a fair amount of top margin to visually separate each row when stacked */
.ui-table-reflow tbody th {
margin-top: 3em;
}
/* Make the label elements a percentage width */
.ui-table-reflow td .ui-table-cell-label,
.ui-table-reflow th .ui-table-cell-label {
display: block;
@ -1950,7 +2036,7 @@ div.ui-slider-switch.ui-mini {
display: inline-block;
margin: -.4em 1em -.4em -.4em;
}
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
.ui-table-reflow th .ui-table-cell-label-top,
.ui-table-reflow td .ui-table-cell-label-top {
display: block;
@ -1961,13 +2047,13 @@ div.ui-slider-switch.ui-mini {
font-weight: normal;
}
}
/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */
@media ( min-width: 35em ) {
/* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
.ui-table-reflow.ui-responsive {
display: table-row-group;
}
/* Show the table header rows */
.ui-table-reflow.ui-responsive td,
.ui-table-reflow.ui-responsive th,
.ui-table-reflow.ui-responsive tbody th,
@ -1977,14 +2063,14 @@ div.ui-slider-switch.ui-mini {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.ui-table-reflow.ui-responsive td .ui-table-cell-label,
.ui-table-reflow.ui-responsive th .ui-table-cell-label {
display: none;
}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media ( max-width: 35em ) {
.ui-table-reflow.ui-responsive td,
.ui-table-reflow.ui-responsive th {
@ -1996,9 +2082,11 @@ div.ui-slider-switch.ui-mini {
clear: left;
}
}
/* panel */
.ui-panel {
width: 17em;
min-height: 100%;
max-height: none;
border-width: 0;
position: absolute;
top: 0;
@ -2006,15 +2094,17 @@ div.ui-slider-switch.ui-mini {
}
.ui-panel-closed {
width: 0;
max-height: 100%;
overflow: hidden;
visibility: hidden;
}
.ui-panel-fixed {
position: fixed;
bottom: -1px;
bottom: -1px; /* fixes gap on Chrome for Android */
padding-bottom: 1px;
}
.ui-panel-display-overlay {
z-index: 1001;
z-index: 1001; /* fixed toolbars have z-index 1000 */
}
.ui-panel-display-reveal {
z-index: 0;
@ -2025,6 +2115,7 @@ div.ui-slider-switch.ui-mini {
.ui-panel-inner {
padding: 15px;
}
/* content-wrap */
.ui-panel-content-wrap {
position: relative;
left: 0;
@ -2033,10 +2124,11 @@ div.ui-slider-switch.ui-mini {
z-index: 999;
}
.ui-panel-content-wrap-display-overlay,
.ui-panel-animate.ui-panel-content-wrap > .ui-header,
.ui-panel-animate.ui-panel-content-wrap > .ui-header, /* ios4 fix */
.ui-panel-content-wrap-closed {
position: static;
}
/* dismiss */
.ui-panel-dismiss {
position: absolute;
top: 0;
@ -2049,21 +2141,27 @@ div.ui-slider-switch.ui-mini {
.ui-panel-dismiss-open {
display: block;
}
/* animate class is added to panel, wrapper and fixed toolbars */
.ui-panel-animate {
-webkit-transition: -webkit-transform 350ms ease;
-moz-transition: -moz-transform 350ms ease;
transition: transform 350ms ease;
}
/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}
/* positioning: panel */
/* panel left */
.ui-panel-position-left {
left: -17em;
}
/* animated: panel left (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
left: 0;
@ -2071,19 +2169,23 @@ div.ui-slider-switch.ui-mini {
-moz-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
.ui-panel-position-left.ui-panel-display-reveal,
/* panel left open */
.ui-panel-position-left.ui-panel-display-reveal, /* negate "panel left" for reveal */
.ui-panel-position-left.ui-panel-open {
left: 0;
}
/* animated: panel left open (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-moz-transform: none;
}
/* panel right */
.ui-panel-position-right {
right: -17em;
}
/* animated: panel right (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
right: 0;
@ -2091,22 +2193,27 @@ div.ui-slider-switch.ui-mini {
-moz-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
.ui-panel-position-right.ui-panel-display-reveal,
/* panel right open */
.ui-panel-position-right.ui-panel-display-reveal, /* negate "panel right" for reveal */
.ui-panel-position-right.ui-panel-open {
right: 0;
}
/* animated: panel right open (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-moz-transform: none;
}
/* positioning: content wrap, fixed toolbars and dismiss */
/* panel left open */
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: 17em;
right: -17em;
}
/* animated: panel left open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
@ -2117,12 +2224,14 @@ div.ui-slider-switch.ui-mini {
-moz-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
/* panel right open */
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -17em;
right: 17em;
}
/* animated: panel right open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
@ -2133,13 +2242,16 @@ div.ui-slider-switch.ui-mini {
-moz-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
/* negate "panel left/right open" for overlay */
.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-overlay,
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-overlay {
left: 0;
}
/* always disable overflow-x to prevent zoom issue on Android */
.ui-page-active.ui-page-panel {
overflow-x: hidden;
}
/* shadows and borders */
.ui-panel-display-reveal {
-webkit-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
@ -2150,15 +2262,15 @@ div.ui-slider-switch.ui-mini {
-moz-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-overlay {
-webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
-moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
box-shadow: -5px 0px 5px rgba(0,0,0,.15);
.ui-panel-display-overlay {
-webkit-box-shadow: 5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 5px 0 5px rgba(0,0,0,.15);
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-left.ui-panel-display-overlay {
-webkit-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
-moz-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
box-shadow: 5px 0px 5px rgba(0,0,0,.15);
.ui-panel-position-right.ui-panel-display-overlay {
-webkit-box-shadow: -5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: -5px 0 5px rgba(0,0,0,.15);
box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-display-push.ui-panel-open.ui-panel-position-left {
border-right-width: 1px;
@ -2174,6 +2286,7 @@ div.ui-slider-switch.ui-mini {
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
margin-right: 1px;
}
/* wrap on wide viewports once open */
@media (min-width:55em){
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
/*
* jQuery Mobile Git Build: SHA1: 56a6976b89feddf34e163c3fcc7196ae0a44c1a0 <> Date: Mon Feb 4 08:28:28 2013 -0800
* jQuery Mobile 1.3.1
* Git HEAD hash: 74b4bec049fd93e4fe40205e6157de16eb64eb46 <> Date: Wed Apr 10 2013 21:57:23 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
@ -10,10 +11,8 @@
/* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-a {
border: 1px solid #333 /*{a-bar-border}*/;
background: #111 /*{a-bar-background-color}*/;
@ -37,24 +36,19 @@
.ui-bar-a .ui-link-inherit {
color: #fff /*{a-bar-color}*/;
}
.ui-bar-a a.ui-link {
color: #7cc4e7 /*{a-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-a a.ui-link:visited {
color: #2489ce /*{a-bar-link-visited}*/;
}
.ui-bar-a a.ui-link:hover {
color: #2489ce /*{a-bar-link-hover}*/;
}
.ui-bar-a a.ui-link:active {
color: #2489ce /*{a-bar-link-active}*/;
}
.ui-body-a,
.ui-overlay-a {
border: 1px solid #444 /*{a-body-border}*/;
@ -83,24 +77,19 @@
.ui-body-a .ui-link-inherit {
color: #fff /*{a-body-color}*/;
}
.ui-body-a .ui-link {
color: #2489ce /*{a-body-link-color}*/;
font-weight: bold;
}
.ui-body-a .ui-link:visited {
color: #2489ce /*{a-body-link-visited}*/;
}
.ui-body-a .ui-link:hover {
color: #2489ce /*{a-body-link-hover}*/;
}
.ui-body-a .ui-link:active {
color: #2489ce /*{a-body-link-active}*/;
}
.ui-btn-up-a {
border: 1px solid #111 /*{a-bup-border}*/;
background: #333 /*{a-bup-background-color}*/;
@ -160,8 +149,6 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* B
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-b {
@ -187,24 +174,19 @@
.ui-bar-b .ui-link-inherit {
color: #fff /*{b-bar-color}*/;
}
.ui-bar-b a.ui-link {
color: #ddf0f8 /*{b-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-b a.ui-link:visited {
color: #ddf0f8 /*{b-bar-link-visited}*/;
}
.ui-bar-b a.ui-link:hover {
color: #ddf0f8 /*{b-bar-link-hover}*/;
}
.ui-bar-b a.ui-link:active {
color: #ddf0f8 /*{b-bar-link-active}*/;
}
.ui-body-b,
.ui-overlay-b {
border: 1px solid #999 /*{b-body-border}*/;
@ -233,24 +215,19 @@
.ui-body-b .ui-link-inherit {
color: #333 /*{b-body-color}*/;
}
.ui-body-b .ui-link {
color: #2489ce /*{b-body-link-color}*/;
font-weight: bold;
}
.ui-body-b .ui-link:visited {
color: #2489ce /*{b-body-link-visited}*/;
}
.ui-body-b .ui-link:hover {
color: #2489ce /*{b-body-link-hover}*/;
}
.ui-body-b .ui-link:active {
color: #2489ce /*{b-body-link-active}*/;
}
.ui-btn-up-b {
border: 1px solid #044062 /*{b-bup-border}*/;
background: #396b9e /*{b-bup-background-color}*/;
@ -310,11 +287,8 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* C
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-c {
border: 1px solid #b3b3b3 /*{c-bar-border}*/;
background: #eee /*{c-bar-background-color}*/;
@ -331,24 +305,19 @@
.ui-bar-c .ui-link-inherit {
color: #3e3e3e /*{c-bar-color}*/;
}
.ui-bar-c a.ui-link {
color: #7cc4e7 /*{c-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-c a.ui-link:visited {
color: #2489ce /*{c-bar-link-visited}*/;
}
.ui-bar-c a.ui-link:hover {
color: #2489ce /*{c-bar-link-hover}*/;
}
.ui-bar-c a.ui-link:active {
color: #2489ce /*{c-bar-link-active}*/;
}
.ui-bar-c,
.ui-bar-c input,
.ui-bar-c select,
@ -383,24 +352,19 @@
.ui-body-c .ui-link-inherit {
color: #333 /*{c-body-color}*/;
}
.ui-body-c .ui-link {
color: #2489ce /*{c-body-link-color}*/;
font-weight: bold;
}
.ui-body-c .ui-link:visited {
color: #2489ce /*{c-body-link-visited}*/;
}
.ui-body-c .ui-link:hover {
color: #2489ce /*{c-body-link-hover}*/;
}
.ui-body-c .ui-link:active {
color: #2489ce /*{c-body-link-active}*/;
}
.ui-btn-up-c {
border: 1px solid #ccc /*{c-bup-border}*/;
background: #eee /*{c-bup-background-color}*/;
@ -460,11 +424,8 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* D
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-d {
border: 1px solid #bbb /*{d-bar-border}*/;
background: #bbb /*{d-bar-background-color}*/;
@ -488,24 +449,19 @@
.ui-bar-d .ui-link-inherit {
color: #333 /*{d-bar-color}*/;
}
.ui-bar-d a.ui-link {
color: #2489ce /*{d-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-d a.ui-link:visited {
color: #2489ce /*{d-bar-link-visited}*/;
}
.ui-bar-d a.ui-link:hover {
color: #2489ce /*{d-bar-link-hover}*/;
}
.ui-bar-d a.ui-link:active {
color: #2489ce /*{d-bar-link-active}*/;
}
.ui-body-d,
.ui-overlay-d {
border: 1px solid #bbb /*{d-body-border}*/;
@ -533,24 +489,19 @@
.ui-body-d .ui-link-inherit {
color: #333 /*{d-body-color}*/;
}
.ui-body-d .ui-link {
color: #2489ce /*{d-body-link-color}*/;
font-weight: bold;
}
.ui-body-d .ui-link:visited {
color: #2489ce /*{d-body-link-visited}*/;
}
.ui-body-d .ui-link:hover {
color: #2489ce /*{d-body-link-hover}*/;
}
.ui-body-d .ui-link:active {
color: #2489ce /*{d-body-link-active}*/;
}
.ui-btn-up-d {
border: 1px solid #bbb /*{d-bup-border}*/;
background: #fff /*{d-bup-background-color}*/;
@ -611,11 +562,8 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* E
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-e {
border: 1px solid #f7c942 /*{e-bar-border}*/;
background: #fadb4e /*{e-bar-background-color}*/;
@ -639,24 +587,19 @@
.ui-bar-e .ui-link-inherit {
color: #333 /*{e-bar-color}*/;
}
.ui-bar-e a.ui-link {
color: #2489ce /*{e-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-e a.ui-link:visited {
color: #2489ce /*{e-bar-link-visited}*/;
}
.ui-bar-e a.ui-link:hover {
color: #2489ce /*{e-bar-link-hover}*/;
}
.ui-bar-e a.ui-link:active {
color: #2489ce /*{e-bar-link-active}*/;
}
.ui-body-e,
.ui-overlay-e {
border: 1px solid #f7c942 /*{e-body-border}*/;
@ -684,24 +627,19 @@
.ui-body-e .ui-link-inherit {
color: #222 /*{e-body-color}*/;
}
.ui-body-e .ui-link {
color: #2489ce /*{e-body-link-color}*/;
font-weight: bold;
}
.ui-body-e .ui-link:visited {
color: #2489ce /*{e-body-link-visited}*/;
}
.ui-body-e .ui-link:hover {
color: #2489ce /*{e-body-link-hover}*/;
}
.ui-body-e .ui-link:active {
color: #2489ce /*{e-body-link-active}*/;
}
.ui-btn-up-e {
border: 1px solid #f4c63f /*{e-bup-border}*/;
background: #fadb4e /*{e-bup-background-color}*/;
@ -761,17 +699,12 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* Structure */
/* links within "buttons"
-----------------------------------------------------------------------------------------------------------*/
a.ui-link-inherit {
text-decoration: none !important;
}
/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-active {
@ -795,25 +728,18 @@ a.ui-link-inherit {
.ui-btn-active a.ui-link-inherit {
color: #fff /*{global-active-color}*/;
}
/* button inner top highlight
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-inner {
border-top: 1px solid #fff;
border-color: rgba(255,255,255,.3);
}
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/
.ui-corner-all {
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
}
/* Form field separator
-----------------------------------------------------------------------------------------------------------*/
.ui-br {
@ -821,7 +747,6 @@ a.ui-link-inherit {
border-color: rgba(130,130,130,.3);
border-style: solid;
}
/* Interaction cues
-----------------------------------------------------------------------------------------------------------*/
.ui-disabled {
@ -834,44 +759,36 @@ a.ui-link-inherit {
cursor: default !important;
pointer-events: none;
}
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-icon,
.ui-icon-searchfield:after {
background-color: #666 /*{global-icon-color}*/;
background-color: rgba(0,0,0,.4) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-image: url(../images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/
.ui-icon-alt .ui-icon,
.ui-icon-alt .ui-icon-searchfield:after {
background-color: #fff;
background-color: rgba(255,255,255,.3);
background-image: url(images/icons-18-black.png);
background-image: url(../images/icons-18-black.png);
background-repeat: no-repeat;
}
/* No disc
-----------------------------------------------------------------------------------------------------------*/
.ui-icon-nodisc .ui-icon,
.ui-icon-nodisc .ui-icon-searchfield:after,
.ui-icon-nodisc .ui-icon-alt .ui-icon,
.ui-icon-nodisc .ui-icon-alt .ui-icon-searchfield:after {
background-color: transparent;
}
/* Icon sprite
-----------------------------------------------------------------------------------------------------------*/
/* plus minus */
.ui-icon-plus {
background-position: -1px -1px;
@ -948,15 +865,12 @@ a.ui-link-inherit {
/* menu edit */
.ui-icon-bars {
background-position: -788px -1px;
}
.ui-icon-edit {
background-position: -824px -1px;
}
/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (min-resolution: 200dpi) {
@ -967,19 +881,17 @@ a.ui-link-inherit {
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
.ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
background-image: url(../images/icons-36-white.png);
-moz-background-size: 864px 18px;
-o-background-size: 864px 18px;
-webkit-background-size: 864px 18px;
background-size: 864px 18px;
}
.ui-icon-alt .ui-icon {
background-image: url(images/icons-36-black.png);
background-image: url(../images/icons-36-black.png);
}
.ui-icon-plus {
background-position: 0px 50%;
background-position: 0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
@ -1052,7 +964,6 @@ a.ui-link-inherit {
background-position: -824px 50%;
}
}
/* checks,radios */
.ui-checkbox .ui-icon,
.ui-selectmenu-list .ui-icon {
@ -1067,30 +978,25 @@ a.ui-link-inherit {
.ui-radio-on .ui-icon {
background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
}
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background: url(../images/ajax-loader.gif);
background-size: 46px 46px;
}
/* Button corner class
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-corner-all {
-webkit-border-radius: 1em /*{global-radii-buttons}*/;
border-radius: 1em /*{global-radii-buttons}*/;
}
/* radius clip workaround for cleaning up corner trapping */
.ui-corner-all,
.ui-btn-corner-all {
-webkit-background-clip: padding;
background-clip: padding-box;
}
/* Overlay / modal
-----------------------------------------------------------------------------------------------------------*/
.ui-overlay {
background: #666;
filter: Alpha(Opacity=50);
@ -1100,36 +1006,34 @@ a.ui-link-inherit {
height: 100%;
}
.ui-overlay-shadow {
-moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.ui-shadow {
-moz-box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: 0px 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/
}
.ui-bar-a .ui-shadow,
.ui-bar-b .ui-shadow ,
.ui-bar-c .ui-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.3);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.ui-shadow-inset {
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}
.ui-icon-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
}
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus, .ui-link-inherit:focus {
outline: 0;
}
@ -1138,26 +1042,23 @@ a.ui-link-inherit {
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
-moz-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
-moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
-moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
}
/* unset box shadow in browsers that don't do it right
-----------------------------------------------------------------------------------------------------------*/
.ui-mobile-nosupport-boxshadow * {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,

File diff suppressed because one or more lines are too long

View File

@ -319,7 +319,7 @@
}
#playlistslist li a {
padding: 5px;
padding: 10px;
}
#playlistslist, #playlisttracks {

View File

@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script src="js/jquery-1.8.3.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" /> -->
<script type='application/javascript' src='js/fastclick.js'></script>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript">
@ -20,13 +22,11 @@
new FastClick(document.body);
}, false);
</script>
<title>MusicBox</title>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<meta http-equiv="imagetoolbar" content="no" />
<meta content="true" name="MSSmartTagsPreventParsing" />
<link rel="apple-touch-icon" href="/mopidy/favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Wouter van Wijk">
<meta name="copyright" content="(c) 2012-2013 Wouter van Wijk" />
@ -74,14 +74,44 @@
<div data-role="popup" data-transition="none" data-theme="c" id="popupTracks">
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupTracksLv">
<!-- <li data-role="divider">
Track
</li> -->
<li>
<a href="#" onclick="return playTrack();">Play Track <span id="popupTrackName"></span></a>
<!-- <li data-role="divider">
<span id="popupTrackName"></span>
</li>
<li id="liaddtobottom">
<a href="#" onclick="return playTrack(true);">Add tracks to bottom of queue</a>
--> <li>
<a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li class="addqueue">
<a href="#" onclick="return playTrack(PLAY_NEXT);">Play Track Next</a>
</li>
<li class="addqueue">
<a href="#" onclick="return playTrack(ADD_THIS_BOTTOM);">Add Track to Bottom of Queue</a>
</li>
<li class="addqueue">
<a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all to Bottom of Queue</a>
</li>
<li>
<a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
</li>
<li id="popupArtistsLi">
<a href="#" onclick="showArtist()" id="popupArtistHref">Show Artist <span id="popupArtistName"></span>
</a>
</li>
<div data-role="collapsible" data-icon="false" data-inset="false" id="popupArtistsDiv">
<h2>Artists</h2>
<ul data-icon="false" data-inset="false" data-role="listview" id="popupArtistsLv"></ul>
</div>
</ul>
</div>
</div>
<div data-role="popup" data-transition="none" data-theme="c" id="popupQueue">
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupQueueLv">
<li>
<a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li>
<a href="#" onclick="return removeTrack();">Remove from Queue</a>
</li>
<li>
<a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
@ -135,7 +165,7 @@
</div><!--/playlistspane-->
<div data-role="content" class="pane" id="currentpane">
<h4>Play Queue</h4>
<a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a><h4>Play Queue</h4>
<!-- <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
<ul class="table" id="currenttable"></ul>

71
webclient/js/controls.js vendored Normal file → Executable file
View File

@ -1,26 +1,29 @@
/********************************************************
* play an uri from a trackslist or the current playlist
*********************************************************/
function playTrack(addtobottom) {
showLoading(true);
function playTrack(addtoqueue) {
//stop directly, for user feedback
if (!addtoqueue) {
mopidy.playback.stop(true);
}
$('#popupTracks').popup('close');
$('#controlsmodal').popup('close');
toast('Loading...');
//function playtrack(uri, playlisturi) {
playlisturi = $('#popupTracks').data("list");
uri = $('#popupTracks').data("track");
var trackslist = new Array();
var track, tracksbefore, tracksafter;
var tracks = getTracksFromUri(playlisturi);
if (tracks) {
if (!addtobottom) {
mopidy.playback.stop(true);
mopidy.tracklist.clear();
if (!addtoqueue) {
clearQueue();
}
$(CURRENT_PLAYLIST_TABLE).empty();
} else {
tracks = currentplaylist;
mopidy.playback.stop(true);
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].uri == uri) {
track = i + 1;
@ -31,31 +34,51 @@ function playTrack(addtobottom) {
mopidy.playback.next();
}
mopidy.playback.play();
showLoading(false);
return false;
}
if (addtobottom) {
mopidy.tracklist.add(tracks);
showLoading(false);
return false;
//find track that was selected
for (var selected = 0; selected < tracks.length; selected++) {
if (tracks[selected].uri == uri) {
break;
}
}
//find track that is playing
for (var playing = 0; playing < currentplaylist.length; playing++) {
if (currentplaylist[playing].uri == songdata.uri) {
break;
}
}
//switch popup options
switch (addtoqueue) {
case ADD_THIS_BOTTOM:
mopidy.tracklist.add(tracks.slice(selected, selected + 1));
return false;
case PLAY_NEXT:
mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
return false;
case ADD_ALL_BOTTOM:
mopidy.tracklist.add(tracks);
return false;
}
// first add track to be played, then the other tracks
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].uri == uri) {
mopidy.tracklist.add(tracks.slice(i) );
mopidy.playback.play();
mopidy.tracklist.add(tracks.slice(0, i), 0);
if (i<tracks.length) {
mopidy.tracklist.add(tracks.slice(i + 1) );
}
break;
}
}
showLoading(false);
mopidy.tracklist.add(tracks.slice(selected, selected + 1) );
//wait 1.5 second before adding the rest to give server the time to start playing
setTimeout(function() {
mopidy.tracklist.add(tracks.slice(0, selected), 0);
if (selected < tracks.length) {
mopidy.tracklist.add(tracks.slice(selected + 1) );
}
}, (1500));
mopidy.playback.play();
return false;
}
function clearQueue () {
mopidy.tracklist.clear();
return false;
}

View File

@ -59,6 +59,11 @@ SEARCH_ALBUM_TABLE = '#albumresulttable';
SEARCH_ARTIST_TABLE = '#artistresulttable';
SEARCH_TRACK_TABLE = '#trackresulttable';
PLAY_NOW = 0;
PLAY_NEXT = 1;
ADD_THIS_BOTTOM = 2;
ADD_ALL_BOTTOM = 3;
MAX_TABLEROWS = 50;
//update track slider timer, milliseconds
@ -78,9 +83,13 @@ function scrollToTop() {
}
function scrollToTracklist() {
/* if (isMobileWebkit) {
playlistslistScroll.refresh();
}
*/
var divtop = $("#playlisttracksdiv").offset().top - 50;
$('body,html').animate({
scrollTop : divtop
scrollTop : divtop
}, 250);
}
@ -283,3 +292,18 @@ function timeFromSeconds(length) {
var s = Math.floor(d % 3600 % 60);
return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
}
/******* Toast ***/
function toast (message, delay) {
message = message || "Loading...";
delay = delay || 1000;
$.mobile.showPageLoadingMsg("a", message);
if(delay > 0) {
setTimeout(function(){
$.mobile.hidePageLoadingMsg();
}, delay);
}
}

View File

@ -76,45 +76,11 @@ function resizeMb() {
}
function setSongInfo(data) {
if (data) {
songdata = data;
} else {
data = songdata;
}
artistshtml = '';
artiststext = '';
if (!data) { return; }
if (data.name == '') {
return;
};
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
if (data.album) {
$("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
}
$("#modalname").html(data.name);
getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
var arttmp = 'Artist';
if (data.artists.length > 1) {
arttmp += 's';
}
$("#modalartist").html(arttmp + ': ' + artistshtml);
$("#trackslider").attr("min", 0);
songlength = data.length;
$("#trackslider").attr("max", data.length);
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeMb();
//update styles of listviews
$('#currenttable li').each(function() {
$(this).removeClass("currenttrack");
@ -147,6 +113,46 @@ function setSongInfo(data) {
$(this).addClass('currenttrack2');
}
});
if (songdata.name == data.name) {
return;
}
if (data) {
songdata = data;
} else {
data = songdata;
}
artistshtml = '';
artiststext = '';
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
if (data.album) {
$("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
}
$("#modalname").html(data.name);
getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
var arttmp = 'Artist';
if (data.artists.length > 1) {
arttmp += 's';
}
$("#modalartist").html(arttmp + ': ' + artistshtml);
$("#trackslider").attr("min", 0);
songlength = data.length;
$("#trackslider").attr("max", data.length);
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeMb();
}
/***************
@ -195,9 +201,9 @@ function popupTracks(e, listuri, trackuri) {
var hash = document.location.hash.split('?');
var divid = hash[0].substr(1);
if (divid == 'current') {
$("#liaddtobottom").hide();
$(".addqueue").hide();
} else {
$("#liaddtobottom").show();
$(".addqueue").show();
}
$('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", {
@ -369,7 +375,7 @@ function switchContent(divid, uri) {
}
//update timer
function updateStatusOfAll() {
function updateTimer() {
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
//TODO check offline?

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

22
webclient/js/library.js Normal file → Executable file
View File

@ -45,12 +45,27 @@ function processSearchResults(resultArr) {
$(SEARCH_ARTIST_TABLE).empty();
$(SEARCH_ALBUM_TABLE).empty();
//get the right result
// 0 = older raspberry 1 = dev.
//depends on versioon of mopidy: 0 = 0.14+ 1 = 0.13-
// var results = resultArr[0];
var results = resultArr[1];
//add complete array
console.log(resultArr);
//results = tracks from spotify
var results = resultArr[0];
//add tracks from local search
if (resultArr[1].tracks) {
results.tracks = resultArr[1].tracks.concat(results.tracks);
}
if (resultArr[1].artists) {
results.artists = resultArr[1].artists.concat(results.artists);
}
if (resultArr[1].albums) {
results.albums = resultArr[1].albums.concat(results.albums);
}
var tracks = (results.tracks) ? results.tracks : '';
customTracklists['trackresultscache'] = tracks;
var artists = (results.artists) ? results.artists : '';
console.log(artists);
var albums = (results.albums) ? results.albums : '';
if ((tracks == '') && (artists == '') && (albums == '')) {
alert('No results');
@ -69,7 +84,6 @@ function processSearchResults(resultArr) {
}
$(SEARCH_ARTIST_TABLE).html(child);
// $(SEARCH_ARTIST_TABLE).listview('refresh');
child = '';
for (var i = 0; i < albums.length; i++) {
@ -89,6 +103,8 @@ function processSearchResults(resultArr) {
// $(SEARCH_ALBUM_TABLE).listview('refresh');
$('#expandsearch').show();
//console.log(results.tracks);
playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
setSongInfo();
showLoading(false);

View File

@ -62,7 +62,6 @@ function processGetPlaylists(resultArr) {
/*<p><ul><li>Donec id elit non mi porta</li><li>Gravida at eget metus. Fusce dapibus.</li><li>Tellus ac cursus commodo</li></p>
<p><a class="btn" href="#">More &raquo;</a></p>
*/
if ((!resultArr) || (resultArr == '')) {
return;
}
@ -73,10 +72,7 @@ function processGetPlaylists(resultArr) {
};
$('#playlistslist').empty();
$('#playlistslist').html(tmp);
// $('#playlistslist').listview('refresh');
if (isMobileWebkit) {
playlistslistScroll.refresh();
}
scrollToTracklist();
showLoading(false);
}

196
webclient/mb.manifest Normal file
View File

@ -0,0 +1,196 @@
CACHE MANIFEST
CACHE:
index.html
/mopidy/mopidy.js
/css/add2home.css
/css/bootstrap-responsive.css
/css/bootstrap-responsive.min.css
/css/bootstrap.css
/css/bootstrap.min.css
/css/iscroll-pull-icon@2x.png
/css/jquery.mobile-1.3.0.css
/css/jquery.mobile-1.3.0.min.css
/css/jquery.mobile.iscrollview-pull.css
/css/jquery.mobile.iscrollview.css
/css/jquery.mobile.structure-1.3.0.css
/css/jquery.mobile.structure-1.3.0.min.css
/css/jquery.mobile.theme-1.3.0.css
/css/jquery.mobile.theme-1.3.0.min.css
/css/ws.css
/images/ajax-loader.gif
/images/empty.png
/images/icons-18-black.png
/images/icons-18-white.png
/images/icons-36-black.png
/images/icons-36-white.png
/images/loader.gif
/images/start.jpg
/images/icons/arrow_down_12x12.png
/images/icons/arrow_down_16x16.png
/images/icons/arrow_down_24x24.png
/images/icons/arrow_down_32x32.png
/images/icons/arrow_down_8x8.png
/images/icons/arrow_down_alt1_12x12.png
/images/icons/arrow_down_alt1_16x16.png
/images/icons/arrow_down_alt1_24x24.png
/images/icons/arrow_down_alt1_32x32.png
/images/icons/arrow_down_alt1_8x8.png
/images/icons/arrow_left_alt1_12x12.png
/images/icons/arrow_left_alt1_16x16.png
/images/icons/arrow_left_alt1_24x24.png
/images/icons/arrow_left_alt1_32x32.png
/images/icons/cd_12x12.png
/images/icons/cd_16x16.png
/images/icons/cd_24x24.png
/images/icons/cd_32x32.png
/images/icons/cd_8x8.png
/images/icons/cog_12x12.png
/images/icons/cog_16x16.png
/images/icons/cog_24x24.png
/images/icons/cog_32x32.png
/images/icons/cog_8x8.png
/images/icons/first_12x12.png
/images/icons/first_16x16.png
/images/icons/first_24x24.png
/images/icons/first_32x32.png
/images/icons/first_8x8.png
/images/icons/fork_21x24.png
/images/icons/headphones_12x11.png
/images/icons/headphones_16x14.png
/images/icons/headphones_24x21.png
/images/icons/headphones_32x28.png
/images/icons/headphones_8x7.png
/images/icons/heart_fill_12x11.png
/images/icons/heart_fill_16x14.png
/images/icons/heart_fill_24x21.png
/images/icons/heart_fill_32x28.png
/images/icons/heart_fill_8x7.png
/images/icons/heart_stroke_12x11.png
/images/icons/heart_stroke_16x14.png
/images/icons/heart_stroke_24x21.png
/images/icons/heart_stroke_32x28.png
/images/icons/heart_stroke_8x7.png
/images/icons/info_12x24.png
/images/icons/info_16x32.png
/images/icons/info_4x8.png
/images/icons/info_6x12.png
/images/icons/info_8x16.png
/images/icons/last_12x12.png
/images/icons/last_16x16.png
/images/icons/last_24x24.png
/images/icons/last_32x32.png
/images/icons/last_8x8.png
/images/icons/layers_24x21.png
/images/icons/list_12x11.png
/images/icons/list_16x14.png
/images/icons/list_24x21.png
/images/icons/list_32x28.png
/images/icons/list_8x7.png
/images/icons/list_nested_12x11.png
/images/icons/list_nested_16x14.png
/images/icons/list_nested_24x21.png
/images/icons/list_nested_32x28.png
/images/icons/list_nested_8x7.png
/images/icons/loop_12x12.png
/images/icons/loop_16x16.png
/images/icons/loop_24x24.png
/images/icons/loop_32x32.png
/images/icons/loop_8x8.png
/images/icons/loop_alt1_12x9.png
/images/icons/loop_alt1_16x12.png
/images/icons/loop_alt1_24x18.png
/images/icons/loop_alt1_32x24.png
/images/icons/loop_alt1_8x6.png
/images/icons/loop_alt2_12x11.png
/images/icons/loop_alt2_16x14.png
/images/icons/loop_alt2_24x21.png
/images/icons/loop_alt2_32x28.png
/images/icons/loop_alt2_8x7.png
/images/icons/loop_alt3_12x9.png
/images/icons/loop_alt3_16x12.png
/images/icons/loop_alt3_24x18.png
/images/icons/loop_alt3_32x24.png
/images/icons/loop_alt3_8x6.png
/images/icons/loop_alt4_12x9.png
/images/icons/loop_alt4_16x12.png
/images/icons/loop_alt4_24x18.png
/images/icons/loop_alt4_32x24.png
/images/icons/loop_alt4_8x6.png
/images/icons/magnifying_glass_12x12.png
/images/icons/magnifying_glass_16x16.png
/images/icons/magnifying_glass_24x24.png
/images/icons/magnifying_glass_32x32.png
/images/icons/magnifying_glass_8x8.png
/images/icons/new_window_16x16.png
/images/icons/new_window_24x24.png
/images/icons/pause_12x16.png
/images/icons/pause_18x24.png
/images/icons/pause_24x32.png
/images/icons/pause_32x32.png
/images/icons/pause_6x8.png
/images/icons/pause_9x12.png
/images/icons/play_12x16.png
/images/icons/play_18x24.png
/images/icons/play_24x32.png
/images/icons/play_32x32.png
/images/icons/play_6x8.png
/images/icons/play_9x12.png
/images/icons/play_alt_12x12.png
/images/icons/play_alt_16x16.png
/images/icons/play_alt_24x24.png
/images/icons/play_alt_32x32.png
/images/icons/play_alt_8x8.png
/images/icons/reload_12x14.png
/images/icons/reload_18x21.png
/images/icons/reload_24x28.png
/images/icons/reload_6x7.png
/images/icons/reload_9x11.png
/images/icons/reload_alt_12x14.png
/images/icons/reload_alt_18x21.png
/images/icons/reload_alt_24x28.png
/images/icons/reload_alt_6x7.png
/images/icons/reload_alt_9x11.png
/images/icons/user_24x32.png
/images/icons/volume_12x9.png
/images/icons/volume_16x12.png
/images/icons/volume_24x18.png
/images/icons/volume_32x24.png
/images/icons/volume_8x6.png
/images/icons/volume_mute_12x9.png
/images/icons/volume_mute_16x12.png
/images/icons/volume_mute_24x18.png
/images/icons/volume_mute_32x24.png
/images/icons/volume_mute_8x6.png
/js/add2home.js
/js/controls.js
/js/fastclick.js
/js/functionsvars.js
/js/gui.js
/js/iscroll-lite.js
/js/iscroll.js
/js/jquery-1.8.3.js
/js/jquery-1.8.3.min.js
/js/jquery.ba-hashchange.min.js
/js/jquery.mobile-1.3.0-rc.1.js
/js/jquery.mobile-1.3.0-rc.1.min.js
/js/jquery.mobile-1.3.0.js
/js/jquery.mobile-1.3.0.min.js
/js/jquery.mobile.iscrollview-closure-min.js
/js/jquery.mobile.iscrollview-yui-min.js
/js/jquery.mobile.iscrollview.js
/js/jquery.touchwipe.min.js
/js/jquery.truncate.min.js
/js/lastfm.api.cache.js
/js/lastfm.api.js
/js/lastfm.api.md5.js
/js/lastfm.js
/js/library.js
/js/process_ws.js
NETWORK:
*