diff --git a/dashboard-ui/channelslatest.html b/dashboard-ui/channelslatest.html
index 505c026b0..a2eb5f16a 100644
--- a/dashboard-ui/channelslatest.html
+++ b/dashboard-ui/channelslatest.html
@@ -7,7 +7,7 @@
diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index ea1b241ca..476f81b07 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -4,12 +4,11 @@
${TitleSignIn}
-
-
+
-
-
diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css
index c06aafd49..211bfb1ee 100644
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@@ -39,16 +39,18 @@
text-overflow: ellipsis;
}
-.smallBackdropPosterItem .cardOverlayInner > div {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+.buttonCard:hover .cardBox {
+ opacity: .6;
}
.cardBox {
margin: 1px;
}
+.largeCardMargin .cardBox {
+ margin: 8px;
+}
+
/*@media all and (max-width: 600px) {
.cardBox {
@@ -110,6 +112,10 @@
padding-bottom: 100%;
}
+.smallSquareCard .cardPadder {
+ padding-bottom: 100%;
+}
+
.letterBoxCard .cardPadder {
padding-bottom: 75%;
}
@@ -118,6 +124,10 @@
padding-bottom: 150%;
}
+.smallPortraitCard .cardPadder {
+ padding-bottom: 150%;
+}
+
.bannerCard .cardPadder {
padding-bottom: 18.5%;
}
@@ -174,7 +184,6 @@
text-wrap: none;
white-space: nowrap;
padding: 5px 4px 2px;
- text-shadow: none;
font-weight: 400;
line-height: 1.4;
}
@@ -204,6 +213,16 @@
color: #ddd;
}
+/*.cardBox:not(.visualCardBox) .outerCardFooter .cardText {
+ font-size: 14px;
+ background: rgba(51, 51, 51,.6);
+ padding: 5px;
+}*/
+
+.cardBox:not(.visualCardBox) .outerCardFooter .cardText:last-child {
+ margin-bottom: 2em;
+}
+
@media all and (max-width: 600px) {
.packageReviewText {
@@ -219,6 +238,11 @@
height: 100%;
}
+ .cardImage canvas {
+ width: 100%;
+ height: 100%;
+ }
+
.coveredCardImage {
background-size: cover;
}
@@ -235,6 +259,10 @@
width: 50%;
}
+.smallSquareCard {
+ width: 33.3334%;
+}
+
.backdropCard {
width: 50%;
}
@@ -247,6 +275,10 @@
width: 33.3%;
}
+.smallPortraitCard {
+ width: 25%;
+}
+
.cardProgress {
line-height: 7px;
}
@@ -270,13 +302,24 @@
.squareCard {
width: 33.3%;
}
+
+ .smallSquareCard {
+ width: 25%;
+ }
+}
+
+@media all and (min-width: 400px) {
+
+ .smallBackdropCard {
+ width: 33.3%;
+ }
}
@media all and (min-width: 540px) {
.smallBackdropCard {
- width: 33.3%;
+ width: 25%;
}
}
@@ -286,6 +329,10 @@
.portraitCard {
width: 25%;
}
+
+ .smallPortraitCard {
+ width: 20%;
+ }
}
@media all and (min-width: 700px) {
@@ -309,7 +356,11 @@
}
.smallBackdropCard {
- width: 25%;
+ width: 20%;
+ }
+
+ .smallSquareCard {
+ width: 20%;
}
}
@@ -323,6 +374,10 @@
.smallBackdropCard {
width: 20%;
}
+
+ .smallPortraitCard {
+ width: 16.666666666666666666666666666667%;
+ }
}
@@ -347,6 +402,14 @@
.smallBackdropCard {
width: 16.666666666666666666666666666667%;
}
+
+ .smallSquareCard {
+ width: 16.666666666666666666666666666667%;
+ }
+
+ .smallPortraitCard {
+ width: 14.285714285714285714285714285714%;
+ }
}
@@ -363,6 +426,10 @@
.smallBackdropCard {
width: 14.285714285714285714285714285714%;
}
+
+ .smallPortraitCard {
+ width: 12.5%;
+ }
}
@@ -508,14 +575,14 @@
}
}
-@media all and (min-width: 1400px) {
+@media all and (min-width: 1100px) {
.homePageSmallBackdropCard {
width: 20%;
}
}
-@media all and (min-width: 1920px) {
+@media all and (min-width: 1440px) {
.homePageSmallBackdropCard {
width: 14.285714285714285714285714285714%;
diff --git a/dashboard-ui/css/detailtable.css b/dashboard-ui/css/detailtable.css
index a79759b8c..e3c47faca 100644
--- a/dashboard-ui/css/detailtable.css
+++ b/dashboard-ui/css/detailtable.css
@@ -9,7 +9,6 @@
text-align: left;
width: 100%;
margin: 0 auto;
- text-shadow: none!important;
}
.stretchedDetailTable {
diff --git a/dashboard-ui/css/images/empty.png b/dashboard-ui/css/images/empty.png
new file mode 100644
index 000000000..42e2b375e
Binary files /dev/null and b/dashboard-ui/css/images/empty.png differ
diff --git a/dashboard-ui/css/images/logo536.png b/dashboard-ui/css/images/logo536.png
new file mode 100644
index 000000000..696b959af
Binary files /dev/null and b/dashboard-ui/css/images/logo536.png differ
diff --git a/dashboard-ui/css/images/server.png b/dashboard-ui/css/images/server.png
deleted file mode 100644
index 85818b8ef..000000000
Binary files a/dashboard-ui/css/images/server.png and /dev/null differ
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 7fd62c529..11d67dcb4 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -30,7 +30,7 @@
.backdropContainer {
position: fixed;
- top: 50px;
+ top: 0;
right: 0;
left: 0;
bottom: 0;
@@ -95,6 +95,13 @@
}
}
+@media all and (min-width: 800px) {
+
+ .hiddenSectionOnNonMobile {
+ display: none;
+ }
+}
+
.firstListHeader + .sectionHeaderButton {
top: 3px;
}
@@ -773,7 +780,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
}
}
-@media all and (max-height: 600px), (max-width: 600px) {
+@media all and (max-height: 540px), (max-width: 540px) {
.itemBackdrop:not(.noBackdrop) {
height: 280px;
@@ -1470,3 +1477,31 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
padding-left: 1em;
}
}
+
+.latestChannelItemsDisabled .latestChannelItemsTab {
+ display: none !important;
+}
+
+.studioTabDisabled .tvStudiosTab, .studioTabDisabled .movieStudiosTab {
+ display: none !important;
+}
+
+.peopleTabDisabled .tvPeopleTab, .peopleTabDisabled .moviePeopleTab {
+ display: none !important;
+}
+
+.tvEpisodesTabDisabled .tvEpisodesTab {
+ display: none !important;
+}
+
+.musicSongsTabDisabled .musicSongsTab {
+ display: none !important;
+}
+
+.musicArtistsTabDisabled .musicArtistsTab {
+ display: none !important;
+}
+
+.homeLatestTabDisabled .homeLatestTab {
+ display: none !important;
+}
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index 5f26e2072..4e4500511 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -3,7 +3,7 @@
}
.libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
- padding-top: 98px !important;
+ padding-top: 99px !important;
}
.libraryMenuDivider {
@@ -124,7 +124,7 @@
}
.libraryViewNav {
- height: 48px;
+ height: 49px;
overflow: hidden;
position: fixed;
right: 0;
@@ -132,7 +132,7 @@
top: 50px;
z-index: 999;
text-align: center;
- font-size: 15px;
+ font-size: 14px;
white-space: nowrap;
padding: 0 0 0;
overflow-x: scroll;
@@ -142,7 +142,7 @@
}
.viewMenuBar {
- background-color: #000;
+ background-color: #111;
}
.libraryViewNav {
@@ -188,7 +188,7 @@
.librarySidebarLinks a {
font-weight: 300 !important;
- padding: .7em 20px .7em 0;
+ padding: .8em 20px .8em 0;
}
.librarySidebarLinks a:hover {
@@ -224,12 +224,12 @@
.libraryViewNav a {
display: inline-block;
padding: 12px 0 9px;
- color: #ddd !important;
+ color: rgba(255,255,255,.8) !important;
text-decoration: none;
margin: 0 0;
position: relative;
font-weight: normal;
- border-bottom: 4px solid transparent;
+ border-bottom: 5px solid transparent;
}
.libraryViewNav a:not(.ui-btn-active):hover {
diff --git a/dashboard-ui/css/livetv.css b/dashboard-ui/css/livetv.css
index dbf3a52b2..75790b092 100644
--- a/dashboard-ui/css/livetv.css
+++ b/dashboard-ui/css/livetv.css
@@ -1,4 +1,8 @@
-
+.tvGuideHeader.headroom--unpinned {
+ -webkit-transform: translateY(-98px);
+ transform: translateY(-98px);
+}
+
.tvProgramSectionHeader {
margin: 0;
}
@@ -90,7 +94,7 @@
}
.tvProgram:hover, .tvProgram:hover .tvProgramInfo {
- background-color: #4d90fe;
+ background-color: #444;
}
.timerCircle {
@@ -215,7 +219,7 @@
}
.channelHeaderCell:hover {
- background-color: #38c;
+ background-color: #444;
}
.channelList {
@@ -254,7 +258,7 @@
}
.programCellInner:hover {
- background-color: #38c;
+ background-color: #444;
}
.timeslotCellInner {
@@ -322,7 +326,7 @@
width: 6500px;
}
- .channelList, .channelTimeslotHeader .accentButton {
+ .channelList, .channelTimeslotHeader .accentButton {
font-size: 14px;
}
diff --git a/dashboard-ui/css/materialize.css b/dashboard-ui/css/materialize.css
index 3600d53bc..c74532bfb 100644
--- a/dashboard-ui/css/materialize.css
+++ b/dashboard-ui/css/materialize.css
@@ -202,11 +202,16 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
vertical-align: middle;
}
-.btn:not(.btn-inline):not(.btnNoText) i {
+.btn:not(.btn-inline):not(.btnNoText):not(.btnIconRight) i {
position: absolute;
left: 10px;
}
+.btnIconRight:not(.btn-inline):not(.btnNoText) i {
+ position: absolute;
+ right: 10px;
+}
+
.btn-large i {
position: absolute;
left: 24px;
diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index 14cbd735b..b7b47742a 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -36,7 +36,7 @@
}
.videoControls {
- padding: 0 .5em;
+ padding: .5em .5em;
background-color: rgba(0, 0, 0, .8);
position: fixed;
left: 0;
@@ -47,7 +47,7 @@
}
.videoTopControls {
- padding: .7em 1em;
+ padding: 1em;
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
@@ -61,10 +61,6 @@
vertical-align: top;
}
-.videoControls .currentTime {
- margin-top: 25px;
-}
-
#slider-tooltip {
z-index: 99999;
position: absolute;
@@ -84,7 +80,7 @@
z-index: 99999;
}
-#videoPlayer .nowPlayingInfo img {
+#videoPlayer .nowPlayingImage img {
height: auto !important;
max-width: 100px;
max-height: 200px;
@@ -135,11 +131,11 @@
#mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track {
border-color: #2ad !important;
- height: 2px!important;
+ height: 2px !important;
}
#videoPlayer .inactive {
- display: none!important;
+ display: none !important;
}
.idlePlayer video {
@@ -149,6 +145,7 @@
#mediaPlayer .sliderContainer {
position: relative;
top: 5px;
+ vertical-align: middle;
}
/****************************************/
@@ -190,10 +187,11 @@
@media all and (max-width: 555px) {
#mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton {
- display: none!important;
+ display: none !important;
}
+
.videoTopControlsLogo {
- display: none!important;
+ display: none !important;
}
}
@@ -204,7 +202,7 @@
}
@media all and (min-width: 1300px) {
- #videoPlayer .nowPlayingInfo img {
+ #videoPlayer .nowPlayingImage img {
height: auto !important;
max-width: 150px;
max-height: 300px;
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 56f5059d9..2bdc9988a 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -1,16 +1,25 @@
/* Now playing bar */
.nowPlayingBar {
- padding: 6px 0 14px 0;
+ padding: 16px 0 16px 0;
border-top: 2px solid green;
text-align: center;
}
-.nowPlayingBarImage {
- vertical-align: bottom;
+.mediaButton {
+ vertical-align: top;
}
.mediaButton {
- vertical-align: top;
+ vertical-align: middle;
+ font-size: 30px;
+ color: #e8e8e8 !important;
+ margin: 0 10px;
+ min-width: 30px;
+ text-align: center;
+}
+
+.videoTopControls .mediaButton {
+ font-size: 26px;
}
#mediaElement {
@@ -23,12 +32,20 @@
font-weight: normal;
position: relative;
top: -7px;
- margin: 0 10px 0 3px;
- max-width: 200px;
+ margin: 0 0 0 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ vertical-align: middle;
text-align: left;
+ font-size: 15px;
+ max-width: 200px;
+}
+
+@media (min-width: 800px) {
+ .nowPlayingText {
+ margin-right: 30px;
+ }
}
.nowPlayingDoubleText {
@@ -37,10 +54,11 @@
.nowPlayingImage {
display: inline-block;
+ vertical-align: middle;
}
.nowPlayingImage img {
- height: 40px;
+ height: 50px;
margin-right: .5em;
vertical-align: bottom;
}
@@ -51,17 +69,12 @@
.currentTime {
display: inline-block;
- position: relative;
- top: -10px;
+ vertical-align: middle;
max-width: 110px;
margin-right: 2em;
font-weight: normal;
}
-.nowPlayingBar .currentTime {
- top: -15px;
-}
-
.mediaSlider {
position: relative;
top: -10px;
@@ -78,7 +91,8 @@
}
.nowPlayingBar .sliderContainer {
- margin-top: 14px;
+ margin-top: 10px;
+ vertical-align: middle;
}
.volumeSliderContainer {
@@ -98,7 +112,7 @@
}
.volumeButton {
- margin-right: .5em!important;
+ margin-right: .5em !important;
}
::-ms-thumb {
@@ -131,7 +145,7 @@ input[type="range"]::-ms-fill-upper {
margin-bottom: 0;
}
- .nowPlayingBar .mediaButton:not(#playButton):not(#pauseButton):not(.remoteControlButton) {
+ .nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton):not(.stopButton) {
display: none;
}
@@ -139,7 +153,7 @@ input[type="range"]::-ms-fill-upper {
float: right;
}
- .nowPlayingBar #playButton, .nowPlayingBar #pauseButton {
+ .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton, .nowPlayingBar .stopButton {
float: right;
}
@@ -148,7 +162,7 @@ input[type="range"]::-ms-fill-upper {
}
.nowPlayingBar {
- padding: 10px 5px 10px 0;
+ padding: 10px 5px 10px 10px;
text-align: left;
}
}
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index 3f7556c8a..cdc7d7835 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -42,6 +42,12 @@
white-space: nowrap;
}
+.smallBackdropPosterItem .cardOverlayInner > div {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
.chapterPosterItem {
width: 240px!important;
cursor: pointer;
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 74d6cd9b9..9b98020ae 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -162,6 +162,30 @@ h1 a:hover {
margin: -10px 0 0 -10px;
}
+/**
+ * Note: I have omitted any vendor-prefixes for clarity.
+ * Adding them is left as an exercise for the reader.
+ */
+.headroom {
+ -webkit-transition: transform 200ms linear;
+ transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+}
+
+.headroom--unpinned {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+}
+
+.libraryViewNav.headroom--unpinned {
+ -webkit-transform: translateY(-200%);
+ transform: translateY(-200%);
+}
+
.largePanel {
width: 270px;
}
@@ -361,7 +385,6 @@ h1 .imageLink {
padding: .6em 20px .6em 0;
text-decoration: none;
color: inherit !important;
- text-shadow: none !important;
font-weight: 500 !important;
font-size: 14px;
vertical-align: middle;
@@ -597,11 +620,10 @@ h1 .imageLink {
z-index: 1097;
color: #fff;
border: 0 !important;
- background-color: #111;
+ background-color: rgba(26,26,26,.9);
}
.footerNotification {
- text-shadow: none;
padding: .75em 1em;
margin: 0;
font-weight: normal;
@@ -1096,3 +1118,38 @@ h1 + .accentButton {
.disabledUserBanner {
margin: 0 0 2em;
}
+
+.modalLoading {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .3);
+ /* One less than jqm loading spinner, so we can combine them */
+ z-index: 9999998;
+}
+
+.nativeApp * {
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -ms-touch-callout: none;
+ touch-callout: none;
+ -webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
+}
+
+.nativeApp input {
+ -webkit-user-select: auto !important;
+ -khtml-user-select: auto !important;
+ -moz-user-select: auto !important;
+ -ms-user-select: auto !important;
+ user-select: auto !important;
+}
diff --git a/dashboard-ui/css/tileitem.css b/dashboard-ui/css/tileitem.css
index df83c3171..d8cd0a49a 100644
--- a/dashboard-ui/css/tileitem.css
+++ b/dashboard-ui/css/tileitem.css
@@ -383,7 +383,6 @@
.posterItem {
margin: 5px 5px;
- text-shadow: none;
font-weight: normal !important;
display: inline-block;
position: relative;
@@ -403,147 +402,5 @@
text-wrap: none;
white-space: nowrap;
padding: 5px 4px 4px;
- text-shadow: none;
font-weight: 400;
-}
-
-.posterItemImage {
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center bottom;
- background-color: #000;
- position: relative;
-}
-
-.myLibraryPosterItem {
- width: 42%;
- min-width: 50px;
-}
-
- .myLibraryPosterItem .posterItemImage {
- height: 34px;
- background-position: 9px center;
- background-size: 14px 14px;
- background-color: rgba(51, 136, 204, 0.7);
- background-color: rgba(82, 181, 75, 0.7);
- }
-
- .myLibraryPosterItem .posterItemText {
- top: 0;
- left: 0;
- line-height: 34px;
- text-align: left;
- padding: 0 0 0 12px;
- position: absolute;
- }
-
- .myLibraryPosterItem i {
- margin-right: 10px;
- }
-
-.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
- background-color: rgba(176, 94, 81, 0.7);
-}
-
-.musicPosterItem .posterItemImage {
- background-color: rgba(217, 145, 67, 0.7);
-}
-
-.tvshowsPosterItem .posterItemImage {
- background-color: rgba(77, 88, 164, 0.7);
-}
-
-.gamesPosterItem .posterItemImage {
- background-color: rgba(183, 202, 72, 0.7);
-}
-
-.channelsPosterItem .posterItemImage {
- background-color: rgba(51, 136, 204, 0.7);
-}
-
-.livetvPosterItem .posterItemImage {
- background-color: rgba(255, 233, 127, 0.7);
-}
-
-.homevideosPosterItem .posterItemImage {
- background-color: rgba(110, 52, 32, 0.7);
-}
-
-.photosPosterItem .posterItemImage {
- background-color: rgba(127, 0, 0, 0.7);
-}
-
-.musicvideosPosterItem .posterItemImage {
- background-color: rgba(143, 54, 168, 0.7);
-}
-
-@media all and (min-width: 600px) {
-
- .myLibraryPosterItem {
- width: 31%;
- /* Specify a min width just in case the container doesn't have a width */
- min-width: 160px;
- }
-}
-
-@media all and (min-width: 800px) {
-
- .myLibraryPosterItem {
- width: 32%;
- /* Specify a min width just in case the container doesn't have a width */
- min-width: 160px;
- }
-}
-
-@media all and (min-width: 1000px) {
-
- .myLibraryPosterItem {
- width: 23.5%;
- /* Specify a min width just in case the container doesn't have a width */
- min-width: 220px;
- }
-}
-
-@media all and (min-width: 1200px) {
-
- .myLibraryPosterItem {
- width: 24.0%;
- }
-}
-
-@media all and (min-width: 1440px) {
-
- .myLibraryPosterItem {
- width: 19.0%;
- /* Specify a min width just in case the container doesn't have a width */
- min-width: 220px;
- }
-}
-
-@media all and (min-width: 1600px) {
-
- .myLibraryPosterItem {
- width: 15.5%;
- }
-}
-
-@media all and (min-width: 1700px) {
-
- .myLibraryPosterItem {
- width: 16%;
- }
-}
-
-@media all and (min-width: 2000px) {
-
- .myLibraryPosterItem {
- width: 13.5%;
- }
-}
-
-@media all and (min-width: 2300px) {
-
- .myLibraryPosterItem {
- width: 13.8%;
- }
-}
+}
\ No newline at end of file
diff --git a/dashboard-ui/episodes.html b/dashboard-ui/episodes.html
index a96363884..79f44499c 100644
--- a/dashboard-ui/episodes.html
+++ b/dashboard-ui/episodes.html
@@ -13,8 +13,8 @@
${TabShows}
${TabEpisodes}
${TabGenres}
-
${TabPeople}
-
${TabNetworks}
+
${TabPeople}
+
${TabNetworks}