diff --git a/dashboard-ui/themes/ios.css b/dashboard-ui/themes/ios.css
index d6858b3df0..4c9df99e11 100644
--- a/dashboard-ui/themes/ios.css
+++ b/dashboard-ui/themes/ios.css
@@ -2,20 +2,24 @@
font-family: Helvetica Neue;
}
-.viewMenuBar, .libraryViewNav, .ui-page-theme-b {
+.viewMenuBar, .libraryViewNav {
+ background-color: rgba(28,28,28,.97);
+}
+
+.ui-page-theme-b {
background-color: #1c1c1c;
}
- .libraryViewNav a {
- font-weight: 400;
- text-transform: none;
- color: #ccc !important;
- }
+.libraryViewNav a {
+ font-weight: 400;
+ text-transform: none;
+ color: #ccc !important;
+}
- .libraryViewNav .ui-btn-active {
- border-bottom-color: transparent;
- color: #2ad !important;
- }
+.libraryViewNav .ui-btn-active {
+ border-bottom-color: transparent;
+ color: #2ad !important;
+}
.libraryViewNav {
border-top: 1px solid #333;
@@ -31,7 +35,6 @@
color: #2ad !important;
}
-
.btn, .btn-large {
font-family: Helvetica Neue !important;
}
diff --git a/dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html b/dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
new file mode 100644
index 0000000000..87e2be1ab0
--- /dev/null
+++ b/dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+
+
+
+ [[_text]]
+
+
+
+
diff --git a/dashboard-ui/thirdparty/paper-button/paper-button-style.css b/dashboard-ui/thirdparty/paper-button/paper-button-style.css
index a3c4302d88..dc3bd57abe 100644
--- a/dashboard-ui/thirdparty/paper-button/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button/paper-button-style.css
@@ -8,46 +8,31 @@
margin-bottom: 1em;
}
- paper-button[toggles] {
- transition: background-color 0.3s;
- }
-
- paper-button[toggles][active] {
- background-color: rgba(0, 0, 0, 0.25);
- }
-
- paper-button.secondary {
+ paper-button.submit {
color: #4285f4;
}
- paper-button[raised].secondary {
+ paper-button[raised].submit {
background: #4285f4;
color: #fff;
}
- paper-button[toggles][active].secondary {
- background-color: rgba(66, 133, 244, 0.25);
+ paper-button.more {
+ color: #388E3C;
}
- paper-button[toggles][active][raised].secondary {
- background-color: rgba(66, 133, 244, 0.75);
- }
-
- paper-button.submit {
- color: #52B54B;
- }
-
- paper-button[raised].submit {
- background: #52B54B;
+ paper-button[raised].more {
+ background: #388E3C;
color: #fff;
}
- paper-button[toggles][active].submit {
- background-color: rgba(82, 181, 75, 0.25);
+ paper-button.secondary {
+ color: #52B54B;
}
- paper-button[toggles][active][raised].submit {
- background-color: rgba(82, 181, 75, 0.75);
+ paper-button[raised].secondary {
+ background: #52B54B;
+ color: #fff;
}
paper-button.cancel {
@@ -59,14 +44,6 @@
color: #fff;
}
- paper-button[toggles][active].cancel {
- background-color: rgba(68, 68, 68, 0.25);
- }
-
- paper-button[toggles][active][raised].cancel {
- background-color: rgba(68, 68, 68, 0.75);
- }
-
paper-button.hover:hover {
background: #eee;
}
@@ -101,11 +78,13 @@
outline: none;
color: inherit;
width: 100%;
+ vertical-align: middle;
}
.clearLink {
text-decoration: none;
font-weight: inherit !important;
+ vertical-align: middle;
}
paper-button.mini {
@@ -113,5 +92,20 @@ paper-button.mini {
}
paper-button.mini .content {
- padding: 0.35em 0.9em;
+ padding: 0.35em 0.7em;
}
+
+
+paper-toast {
+ z-index: 9999999;
+}
+
+#docspinner {
+ display: block;
+ margin-top: -14px;
+ margin-left: -14px;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: 9999999;
+}
diff --git a/dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html b/dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
new file mode 100644
index 0000000000..f4164ce06d
--- /dev/null
+++ b/dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/thirdparty/paper-spinner/paper-spinner.css b/dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
new file mode 100644
index 0000000000..30c4e7ec69
--- /dev/null
+++ b/dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
@@ -0,0 +1,325 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+
+*/
+/**************************/
+/* STYLES FOR THE SPINNER */
+/**************************/
+
+/*
+ * Constants:
+ * STROKEWIDTH = 3px
+ * ARCSIZE = 270 degrees (amount of circle the arc takes up)
+ * ARCTIME = 1333ms (time it takes to expand and contract arc)
+ * ARCSTARTROT = 216 degrees (how much the start location of the arc
+ * should rotate each time, 216 gives us a
+ * 5 pointed star shape (it's 360/5 * 3).
+ * For a 7 pointed star, we might do
+ * 360/7 * 3 = 154.286)
+ * CONTAINERWIDTH = 28px
+ * SHRINK_TIME = 400ms
+ */
+
+ :host {
+ display: inline-block;
+ position: relative;
+ width: 28px; /* CONTAINERWIDTH */
+ height: 28px; /* CONTAINERWIDTH */
+}
+
+#spinnerContainer {
+ width: 100%;
+ height: 100%;
+}
+
+#spinnerContainer.active {
+ /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+ -webkit-animation: container-rotate 1568ms linear infinite;
+ animation: container-rotate 1568ms linear infinite;
+}
+
+@-webkit-keyframes container-rotate {
+ to { -webkit-transform: rotate(360deg) }
+}
+
+@keyframes container-rotate {
+ to { transform: rotate(360deg) }
+}
+
+.spinner-layer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+
+.layer-1 {
+ border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
+}
+
+.layer-2 {
+ border-color: var(--paper-spinner-layer-2-color, --google-red-500);
+}
+
+.layer-3 {
+ border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
+}
+
+.layer-4 {
+ border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
+}
+
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+.active .spinner-layer.layer-1 {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.layer-2 {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.layer-3 {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.layer-4 {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes fill-unfill-rotate {
+ 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
+ 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
+ 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
+ 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
+ 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
+ 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
+ 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
+ to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
+}
+
+@keyframes fill-unfill-rotate {
+ 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
+ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
+ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
+ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
+ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
+ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
+ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
+ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
+}
+
+/**
+ * HACK: Even though the intention is to have the current .spinner-layer at
+ * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+ * to do proper subpixel rendering for the elements being animated. This is
+ * especially visible in Chrome 39 on Ubuntu 14.04. See:
+ *
+ * - https://github.com/Polymer/paper-spinner/issues/9
+ * - https://code.google.com/p/chromium/issues/detail?id=436255
+ */
+@-webkit-keyframes layer-1-fade-in-out {
+ from { opacity: 0.99; }
+ 25% { opacity: 0.99; }
+ 26% { opacity: 0; }
+ 89% { opacity: 0; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0.99; }
+}
+
+@keyframes layer-1-fade-in-out {
+ from { opacity: 0.99; }
+ 25% { opacity: 0.99; }
+ 26% { opacity: 0; }
+ 89% { opacity: 0; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0.99; }
+}
+
+@-webkit-keyframes layer-2-fade-in-out {
+ from { opacity: 0; }
+ 15% { opacity: 0; }
+ 25% { opacity: 0.99; }
+ 50% { opacity: 0.99; }
+ 51% { opacity: 0; }
+}
+
+@keyframes layer-2-fade-in-out {
+ from { opacity: 0; }
+ 15% { opacity: 0; }
+ 25% { opacity: 0.99; }
+ 50% { opacity: 0.99; }
+ 51% { opacity: 0; }
+}
+
+@-webkit-keyframes layer-3-fade-in-out {
+ from { opacity: 0; }
+ 40% { opacity: 0; }
+ 50% { opacity: 0.99; }
+ 75% { opacity: 0.99; }
+ 76% { opacity: 0; }
+}
+
+@keyframes layer-3-fade-in-out {
+ from { opacity: 0; }
+ 40% { opacity: 0; }
+ 50% { opacity: 0.99; }
+ 75% { opacity: 0.99; }
+ 76% { opacity: 0; }
+}
+
+@-webkit-keyframes layer-4-fade-in-out {
+ from { opacity: 0; }
+ 65% { opacity: 0; }
+ 75% { opacity: 0.99; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0; }
+}
+
+@keyframes layer-4-fade-in-out {
+ from { opacity: 0; }
+ 65% { opacity: 0; }
+ 75% { opacity: 0.99; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0; }
+}
+
+/**
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+ *
+ * Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
+ * but still does on Safari and IE.
+ */
+.gap-patch {
+ position: absolute;
+ box-sizing: border-box;
+ top: 0;
+ left: 45%;
+ width: 10%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit;
+}
+
+.gap-patch .circle {
+ width: 1000%;
+ left: -450%;
+}
+
+.circle-clipper {
+ display: inline-block;
+ position: relative;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit;
+}
+
+.circle-clipper .circle {
+ width: 200%;
+}
+
+.circle {
+ box-sizing: border-box;
+ height: 100%;
+ border-width: 3px; /* STROKEWIDTH */
+ border-style: solid;
+ border-color: inherit;
+ border-bottom-color: transparent !important;
+ border-radius: 50%;
+ -webkit-animation: none;
+ animation: none;
+
+ @apply(--layout-fit);
+}
+
+.circle-clipper.left .circle {
+ border-right-color: transparent !important;
+ -webkit-transform: rotate(129deg);
+ transform: rotate(129deg);
+}
+
+.circle-clipper.right .circle {
+ left: -100%;
+ border-left-color: transparent !important;
+ -webkit-transform: rotate(-129deg);
+ transform: rotate(-129deg);
+}
+
+.active .circle-clipper.left .circle {
+ /* duration: ARCTIME */
+ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .circle-clipper.right .circle {
+ /* duration: ARCTIME */
+ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+ animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes left-spin {
+ from { -webkit-transform: rotate(130deg); }
+ 50% { -webkit-transform: rotate(-5deg); }
+ to { -webkit-transform: rotate(130deg); }
+}
+
+@keyframes left-spin {
+ from { transform: rotate(130deg); }
+ 50% { transform: rotate(-5deg); }
+ to { transform: rotate(130deg); }
+}
+
+@-webkit-keyframes right-spin {
+ from { -webkit-transform: rotate(-130deg); }
+ 50% { -webkit-transform: rotate(5deg); }
+ to { -webkit-transform: rotate(-130deg); }
+}
+
+@keyframes right-spin {
+ from { transform: rotate(-130deg); }
+ 50% { transform: rotate(5deg); }
+ to { transform: rotate(-130deg); }
+}
+
+#spinnerContainer.cooldown {
+ /* duration: SHRINK_TIME */
+ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@-webkit-keyframes fade-out {
+ from { opacity: 0.99; }
+ to { opacity: 0; }
+}
+
+@keyframes fade-out {
+ from { opacity: 0.99; }
+ to { opacity: 0; }
+}
diff --git a/dashboard-ui/thirdparty/paper-spinner/paper-spinner.html b/dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
new file mode 100644
index 0000000000..b5503cc6ac
--- /dev/null
+++ b/dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/thirdparty/paper-toast/paper-toast.html b/dashboard-ui/thirdparty/paper-toast/paper-toast.html
new file mode 100644
index 0000000000..5afdae368f
--- /dev/null
+++ b/dashboard-ui/thirdparty/paper-toast/paper-toast.html
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+
+
+
+ {{text}}
+
+
+
+
diff --git a/dashboard-ui/tvlatest.html b/dashboard-ui/tvlatest.html
index 36e87cc030..f5b2e0d9e9 100644
--- a/dashboard-ui/tvlatest.html
+++ b/dashboard-ui/tvlatest.html
@@ -4,7 +4,7 @@
Emby
-
+
@@ -23,7 +23,7 @@
-
${ButtonSync}
+
${ButtonSync}
diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tvrecommended.html
index fffe1c601b..b7fcf9ebd0 100644
--- a/dashboard-ui/tvrecommended.html
+++ b/dashboard-ui/tvrecommended.html
@@ -4,7 +4,7 @@
Emby
-
+
@@ -31,7 +31,7 @@
-
${ButtonSync}
+
${ButtonSync}
@@ -41,7 +41,7 @@
-
${ButtonSync}
+
${ButtonSync}
diff --git a/dashboard-ui/wizardlibrary.html b/dashboard-ui/wizardlibrary.html
index dfe21336b3..e96890f60f 100644
--- a/dashboard-ui/wizardlibrary.html
+++ b/dashboard-ui/wizardlibrary.html
@@ -4,7 +4,7 @@
Emby
-
+
diff --git a/dashboard-ui/wizardstart.html b/dashboard-ui/wizardstart.html
index 8e8daa366b..4c60a188bd 100644
--- a/dashboard-ui/wizardstart.html
+++ b/dashboard-ui/wizardstart.html
@@ -4,7 +4,7 @@
Emby
-