rework detail page a little

dashboard-ui/css/librarybrowser.css

@@ -50,13 +50,8 @@
 @media all and (max-width: 1200px) {
 
     .libraryPage > .ui-content {
-        padding-left: .4em !important;
-        padding-right: .4em !important;
-    }
-
-    .detailSection {
-        margin-left: .25em;
-        margin-right: .25em;
+        padding-left: .5em !important;
+        padding-right: .5em !important;
     }
 }
 
@@ -140,10 +135,14 @@
 }
 
 .detailButtonsContainer {
-    padding: .35em 0 .35em;
+    padding: 0 0 .5em;
     text-align: center;
 }
 
+    .detailButtonsContainer a, .detailButtonsContainer button {
+        margin-top: 0;
+    }
+
 .viewSettings {
     margin: 0 0 .25em;
     text-align: center;
@@ -260,7 +259,7 @@
     display: inline-block;
     font-size: 12px;
     text-align: center;
-    padding: 2px 4px;
+    padding: 1px 6px 0;
     border-radius: 2px;
 }
 
@@ -371,7 +370,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-size: cover;
     background-position: center 15%;
     background-repeat: no-repeat;
-    height: 600px;
+    height: 500px;
     position: relative;
 }
 
@@ -384,14 +383,11 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .noBackdrop {
-    height: auto;
-    border: 0;
+    height: 260px;
 }
 
     .noBackdrop .itemBackdropContent {
         background-color: transparent;
-        position: static;
-        margin-top: 1em;
     }
 
 .lnkSibling {
@@ -410,12 +406,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         text-decoration: underline;
     }
 
-@media all and (max-width: 1000px) {
-
-    .lnkSibling {
-        display: none !important;
+    .lnkSibling:not(.hide) {
+        display: block;
     }
-}
+
 
 .lnkPreviousItem {
     left: 10px;
@@ -425,19 +419,34 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     right: 0;
 }
 
+.detailImageContainer {
+    position: absolute;
+}
+
+.detailImageContainer {
+    top: -66px;
+}
+
 .itemDetailImage {
-    max-height: 280px;
-    max-width: 320px;
     -moz-box-shadow: 0px 0 20px #000;
     -webkit-box-shadow: 0px 0 20px #000;
     box-shadow: 0px 0 20px #000;
     border: solid 1px #222;
-    margin-top: -20px;
-    margin-bottom: 10px;
 }
 
-.noBackdrop .itemDetailImage {
-    margin-top: 0;
+.thumbDetailImage {
+    max-width: 360px;
+    max-height: 360px;
+}
+
+.squareDetailImage {
+    max-width: 240px;
+    max-height: 240px;
+}
+
+.portraitDetailImage {
+    max-width: 240px;
+    max-height: 360px;
 }
 
 .itemDetailGalleryLink img:hover {
@@ -446,9 +455,31 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     box-shadow: 0 0 20px 3px #38c;
 }
 
-.itemByNameImageContainer .itemDetailImage {
-    margin: 0 !important;
-    max-height: 220px;
+.detailContentEffectedByThumbImage:not(.lastDetailContentEffectedByImage) {
+    margin-left: 380px;
+}
+
+.detailContentEffectedBySquareImage:not(.lastDetailContentEffectedByImage) {
+    margin-left: 260px;
+}
+
+.detailContentEffectedByPortraitImage {
+    margin-left: 260px;
+}
+
+.detailContentEffectedByImage a {
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedByThumbImage {
+    padding: 0 .5em;
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedBySquareImage {
+    padding: 0 .5em;
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
+    min-height: 140px;
 }
 
 .parentName {
@@ -457,6 +488,57 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     margin-bottom: .5em;
 }
 
+@media all and (min-width: 800px) {
+    .lastDetailContentEffectedByImage.detailContentEffectedBySquareImage {
+        margin-top: 2em;
+    }
+}
+
+@media all and (max-width: 1000px) {
+    .detailImageContainer {
+        margin-left: 20px;
+    }
+
+    .thumbDetailImage {
+        max-width: 340px;
+    }
+
+    .squareDetailImage {
+        max-width: 220px;
+    }
+
+    .portraitDetailImage {
+        max-width: 220px;
+    }
+
+    .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
+        min-height: 110px;
+    }
+}
+
+@media all and (max-width: 800px) {
+    .detailContentEffectedByThumbImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+    .detailContentEffectedBySquareImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+    .detailContentEffectedByPortraitImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+
+
+    .parentName {
+        margin-bottom: 1em;
+    }
+}
+
 .inlineItemName {
     font-size: 22px;
 }
@@ -609,7 +691,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .detailImageProgressContainer {
     position: absolute;
-    bottom: 10px;
+    bottom: 3px;
     right: 0;
     left: 0;
     text-align: center;
@@ -642,19 +724,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         display: none;
     }
 
-    .itemBackdrop {
-        height: auto;
-    }
-
-    .itemBackdropContent {
-        position: static;
-        padding: 1em 1em .5em;
+    .itemBackdrop:not(.noBackdrop) {
+        height: 280px;
     }
 
     .itemDetailImage {
         max-height: 240px;
         max-width: 100px;
-        margin-top: 0;
     }
 
     .mobileOverview:not(.hide), .mobileGenres, .mobileDetailButtons {
@@ -669,34 +745,28 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         font-size: 18px;
     }
 
-        .inlineItemName + .itemMiscInfo {
-            margin-left: 0 !important;
-            margin-top: 1em;
-            display: block !important;
-        }
-
-    .primaryDetailPageContent .userDataIcons {
-        margin-left: 0 !important;
-        margin-top: 1em;
-        display: block;
-    }
-}
-
-
-@media all and (min-width: 750px) {
-
-    .lnkSibling:not(.hide) {
-        display: block;
+    .primaryDetailPageContent p {
+        margin: 1em 0 !important;
     }
 
-    .itemBackdrop:not(.noBackdrop) {
-        border-bottom: 1px solid #111;
+    .backdropDetailPageContent {
+        text-align: center;
+    }
+
+    .detailImageContainer {
+        display: none;
+    }
+
+    .noBackdrop .detailImageContainer {
+        display: block;
+        position: static;
+        text-align: center;
     }
 }
 
 @media all and (min-width: 750px) {
     .detailPageContent {
-        max-width: 900px;
+        max-width: 1000px;
         width: auto;
     }
 }
@@ -1312,3 +1382,27 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         margin-right: 1em;
     }
 }
+
+.smallDetailImageContainer img {
+    -moz-box-shadow: 0px 0 20px #000;
+    -webkit-box-shadow: 0px 0 20px #000;
+    box-shadow: 0px 0 20px #000;
+    border: solid 1px #222;
+    max-width: 240px;
+    max-height: 240px;
+}
+
+@media all and (max-width: 800px) {
+
+    .smallDetailImageContainer img {
+        max-width: 120px;
+        max-height: 120px;
+    }
+}
+
+@media all and (max-width: 1000px) {
+
+    .smallDetailImageContainer {
+        padding-left: 1em;
+    }
+}

dashboard-ui/css/librarymenu.css

@@ -186,10 +186,6 @@
         color: #fff !important;
     }
 
-.musicViewMenu {
-    background-image: url(images/items/folders/music.png);
-}
-
 .homeViewMenu {
     background-image: url(images/mblogoicon.png) !important;
     background-size: 39px 26px !important;

dashboard-ui/css/materialize.css

@@ -123,9 +123,13 @@
     padding: 1em 2em;
 }
 
-    .btn-large i {
-        font-size: 1.6rem;
-    }
+.btn.btn-inline {
+    padding: .6em 1.25em .6em 34px;
+}
+
+.btn-large i {
+    font-size: 1.6rem;
+}
 
 .btn-floating-large i {
     font-size: 1.6rem;
@@ -155,6 +159,10 @@
     font-family: Roboto !important;
 }
 
+.btnSmall {
+    font-size: 13px;
+}
+
 .btnCancel {
     background-color: #444;
 }
@@ -172,6 +180,7 @@
     display: inline-block;
     width: auto;
     margin-bottom: 0;
+    padding: .6em .5em .6em .5em!important;
 }
 
 button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
@@ -182,7 +191,7 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
     vertical-align: middle;
 }
 
-.btn i {
+.btn:not(.btn-inline):not(.btnNoText) i {
     position: absolute;
     left: 10px;
 }
@@ -192,3 +201,11 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
     left: 24px;
     top: 22px;
 }
+
+.btnNoText {
+    padding: .6em .5em!important;
+}
+
+.btnNoText {
+    border-radius: 5px;
+}

dashboard-ui/css/site.css

@@ -1001,11 +1001,12 @@ progress {
 
 .accentButton {
     display: inline-block;
-    background: rgba(51, 136, 204, .8);
+    background: rgba(51, 136, 204, .9);
     border-radius: 1000px;
     padding: 4px 10px;
     color: #fff !important;
-    font-weight: normal !important;
+    font-size: 13px;
+    font-weight: 400 !important;
     text-decoration: none;
     vertical-align: middle;
     border: 0;

dashboard-ui/css/tileitem.css

@@ -415,14 +415,6 @@
     position: relative;
 }
 
-.posterItemDefaultText {
-    position: absolute;
-    top: 30%;
-    left: 0;
-    right: 0;
-    text-align: center;
-}
-
 .myLibraryPosterItem {
     width: 42%;
     min-width: 50px;
@@ -436,12 +428,17 @@
         background-color: rgba(82, 181, 75, 0.7);
     }
 
-    .myLibraryPosterItem .posterItemDefaultText {
+    .myLibraryPosterItem .posterItemText {
         top: 0;
         left: 0;
         line-height: 34px;
         text-align: left;
-        padding: 0 0 0 34px;
+        padding: 0 0 0 12px;
+        position: absolute;
+    }
+
+    .myLibraryPosterItem i {
+        margin-right: 10px;
     }
 
 .moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
@@ -479,6 +476,7 @@
 .musicvideosPosterItem .posterItemImage {
     background-color: rgba(143, 54, 168, 0.7);
 }
+
 @media all and (min-width: 600px) {
 
     .myLibraryPosterItem {
@@ -487,6 +485,7 @@
         min-width: 160px;
     }
 }
+
 @media all and (min-width: 1000px) {
 
     .myLibraryPosterItem {
@@ -494,4 +493,4 @@
         /* Specify a min width just in case the container doesn't have a width */
         min-width: 220px;
     }
-}
+}