merge branch master into itemdetailpage-layout

src/assets/css/clearbutton.css

@@ -0,0 +1,12 @@
+.clearButton {
+    background: transparent;
+    border: 0 !important;
+    padding: 0 !important;
+    cursor: pointer;
+    outline: none !important;
+    color: inherit;
+    width: 100%;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+}

src/assets/css/dashboard.css

@@ -0,0 +1,427 @@
+.dashboardColumn,
+.dashboardSections {
+    flex-direction: column;
+}
+
+.dashboardFooter {
+    margin-top: 3.5em;
+    text-align: center
+}
+
+.dashboardFooter a {
+    margin: 0 .7em
+}
+
+progress {
+    appearance: none;
+    margin: 0;
+    background: #ccc !important
+}
+
+progress[role]:after {
+    background-image: none
+}
+
+progress::-webkit-progress-bar {
+    background: #ccc
+}
+
+progress::-moz-progress-bar {
+    background-color: #00a4dc
+}
+
+progress::-webkit-progress-value {
+    background-color: #00a4dc
+}
+
+progress[aria-valuenow]:before {
+    border-radius: .4em;
+    background-color: #00a4dc
+}
+
+.localnav {
+    margin-bottom: 2.2em !important
+}
+
+@media all and (min-width:50em) {
+
+    .type-interior>.ui-panel-content-wrap>div[data-role=content],
+    .type-interior>div[data-role=content] {
+        padding-right: 0;
+        padding-left: 0;
+        padding-top: 0;
+        overflow: hidden
+    }
+}
+
+.dashboardDocument .dashboardEntryHeaderButton,
+.dashboardDocument .lnkManageServer {
+    display: none !important
+}
+
+.adminDrawerLogo {
+    padding: 1.5em 1em 1.2em;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 1em;
+    display: block
+}
+
+.adminDrawerLogo img {
+    height: 4em
+}
+
+div[data-role=controlgroup] a[data-role=button] {
+    display: inline-block !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    border-radius: 0
+}
+
+div[data-role=controlgroup] a[data-role=button]:first-child {
+    border-bottom-left-radius: .3125em;
+    border-top-left-radius: .3125em
+}
+
+div[data-role=controlgroup] a[data-role=button]:last-child {
+    border-bottom-right-radius: .3125em;
+    border-top-right-radius: .3125em
+}
+
+div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
+    border-left-width: 0 !important;
+    margin: 0 0 0 -.4em !important
+}
+
+div[data-role=controlgroup] a.ui-btn-active {
+    background: #00a4dc !important;
+    color: #292929 !important
+}
+
+.header .imageLink {
+    display: inline-block
+}
+
+.header .imageLink img {
+    height: 2.1em;
+    vertical-align: middle
+}
+
+.content-primary {
+    padding-top: 6em;
+    padding-right: 1em;
+    padding-left: 1em
+}
+
+.withTabs .content-primary {
+    padding-top: 9em !important
+}
+
+@media all and (min-width:40em) {
+    .content-primary {
+        padding-top: 7em
+    }
+
+    .withTabs .content-primary {
+        padding-top: 10em !important
+    }
+}
+
+@media all and (min-width:84em) {
+    .withTabs .content-primary {
+        padding-top: 7em !important
+    }
+}
+
+.content-primary ul:first-child {
+    margin-top: 0
+}
+
+.dashboardSections {
+    display: flex;
+    flex-direction: column
+}
+
+.dashboardColumn {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    flex-grow: 1
+}
+
+.activeSession:not(.playingSession) .sessionNowPlayingContent {
+    display: none
+}
+
+.dashboardSection {
+    flex-shrink: 0;
+    margin: 0 0 2em
+}
+
+.dashboardSection h3 {
+    margin-top: .5em;
+    margin-bottom: .5em
+}
+
+.activeRecordingItems>.card {
+    width: 50%
+}
+
+@media all and (min-width:70em) {
+    .dashboardSections {
+        flex-wrap: wrap;
+        flex-direction: row
+    }
+
+    .dashboardColumn-2-60 {
+        width: 46%
+    }
+
+    .dashboardColumn-2-40 {
+        width: 27%
+    }
+
+    .dashboardSection {
+        padding: 0 1.5em
+    }
+
+    .activeRecordingItems>.card {
+        width: 25%
+    }
+}
+
+.premiumBanner img {
+    position: absolute;
+    text-align: right;
+    top: 0;
+    right: 0;
+    width: 4.4em;
+    height: 4.4em
+}
+
+.wizardContent {
+    max-width: 62em;
+    padding: .5em 2em 1em;
+    margin: 0 auto;
+    background: #fff
+}
+
+.wizardNavigation {
+    text-align: right
+}
+
+.wizardContent form {
+    max-width: 100%
+}
+
+.wizardContent h2 img {
+    height: 2.5em;
+    vertical-align: middle;
+    margin-right: .5em;
+    position: relative;
+    top: -.3em
+}
+
+.scheduledTaskPaperIconItem {
+    outline: 0 !important
+}
+
+.activeSession {
+    width: 100% !important
+}
+
+.activitylogUserPhoto {
+    height:1.71em;
+    width:1.71em;
+    border-radius:100%;
+    margin-right:.5em;
+    background-size:cover;
+    background-repeat:no-repeat;
+    background-position:center;
+}
+
+@media all and (min-width:40em) {
+    .activeSession {
+        width: 100% !important
+    }
+}
+
+@media all and (min-width:50em) {
+    .activeSession {
+        width: 50% !important
+    }
+}
+
+.sessionCardFooter {
+    padding-top: .5em !important;
+    padding-bottom: 1em !important;
+    border-top: 1px solid #eee;
+    text-align: center;
+    position: relative
+}
+
+.sessionAppInfo {
+    padding: 0.5em;
+    overflow: hidden;
+}
+
+.sessionCardButtons {
+    min-height: 2.7em
+}
+
+.sessionCardButton {
+    margin: 0
+}
+
+.sessionNowPlayingContent {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0
+}
+
+.sessionNowPlayingInnerContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-weight: 400
+}
+
+.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent {
+    color: #fff !important;
+    background: rgba(0, 0, 0, .7)
+}
+
+.sessionAppName {
+    vertical-align: top;
+    max-width: 200px
+}
+
+.sessionNowPlayingDetails {
+    display: flex;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
+
+.sessionNowPlayingInfo {
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    padding: 0.8em 0.5em;
+}
+
+.sessionAppInfo img {
+    max-width: 40px;
+    max-height: 40px;
+    margin-right: 8px;
+}
+
+.sessionNowPlayingTime {
+    flex-shrink: 0;
+    align-self: flex-end;
+    text-overflow: ellipsis;
+    padding: 0.8em 0.5em;
+}
+
+.sessionNowPlayingStreamInfo {
+    white-space: nowrap;
+}
+
+.activeSession .playbackProgress,
+.activeSession .transcodingProgress {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 6px;
+    width: 100%;
+}
+
+.playbackProgress,
+.transcodingProgress {
+    margin: 0px;
+    width: 100%;
+    background: transparent !important;
+}
+
+.playbackProgress > div {
+    z-index: 1000;
+    background-color: #00a4dc;
+}
+
+.transcodingProgress > div {
+    background-color: #dd4919;
+}
+
+@media all and (max-width:34.375em) {
+    .sessionAppName {
+        max-width: 160px
+    }
+}
+
+@media all and (max-width:31.25em) {
+    .sessionAppName {
+        max-width: 150px
+    }
+}
+
+.disabledUser {
+    filter: grayscale(100%)
+}
+
+.disabledUserBanner {
+    margin: 0 0 2em
+}
+
+.appLinks a {
+    text-decoration: none !important
+}
+
+.appLinks a+a {
+    margin-left: 5px
+}
+
+.appLinks img {
+    height: 36px
+}
+
+a[data-role=button] {
+    background-clip: padding-box;
+    cursor: pointer !important;
+    font-family: inherit !important;
+    font-weight: 500 !important;
+    margin: 0 .25em !important;
+    display: inline-block;
+    padding: .8em 1em;
+    text-align: center;
+    text-decoration: none !important;
+    background: #292929 !important;
+}
+
+@keyframes rotating {
+    from {
+        transform: rotate(0)
+    }
+
+    to {
+        transform: rotate(360deg)
+    }
+}
+
+.rotatingCircle {
+    animation: rotating 2s linear infinite
+}
+
+.pluginPreviewImg {
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
+}
+
+.ui-bar-a{
+    text-align: center;
+    padding: 0 20px;
+}

src/assets/css/detailtable.css

@@ -0,0 +1,19 @@
+.detailTableBodyCell,
+.detailTableHeaderCell {
+    border-spacing: 0;
+    padding: .4em
+}
+
+.detailTable {
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-align: left;
+    width: 100%;
+    margin: 0 auto
+}
+
+.detailTableHeaderCell {
+    font-weight: 700;
+    text-align: left;
+    vertical-align: top
+}

src/assets/css/flexstyles.css

@@ -0,0 +1,47 @@
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-direction-column {
+    flex-direction: column;
+}
+
+.flex-direction-row {
+    flex-direction: row;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
+.flex-shrink-zero {
+    flex-shrink: 0;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.align-items-flex-start {
+    align-items: flex-start;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.justify-content-flex-end {
+    justify-content: flex-end;
+}
+
+.flex-wrap-wrap {
+    flex-wrap: wrap;
+}
+
+.align-self-flex-end {
+    align-self: flex-end;
+}

src/assets/css/fonts.css

@@ -0,0 +1,36 @@
+html {
+    font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
+}
+
+html {
+    font-size: 93%;
+    text-size-adjust: 100%;
+}
+
+h1, h2, h3 {
+    /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
+}
+
+h1 {
+    font-weight: 500;
+    font-size: 1.8em;
+}
+
+h2 {
+    font-weight: 500;
+    font-size: 1.5em;
+}
+
+h3 {
+    font-weight: 500;
+    font-size: 1.17em;
+}
+
+.layout-tv {
+    font-size: 2.5vh;
+}
+
+.layout-mobile {
+    font-size: 90%;
+}

src/assets/css/fonts.sized.css

@@ -0,0 +1,31 @@
+h1 {
+    font-weight: 500;
+    font-size: 1.8em;
+}
+
+.layout-desktop h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-weight: 500;
+    font-size: 1.5em;
+}
+
+h3 {
+    font-weight: 500;
+    font-size: 1.17em;
+}
+
+@media all and (min-height: 720px) {
+    html {
+        font-size: 20px;
+    }
+}
+
+/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
+@media all and (min-height: 1000px) {
+    html {
+        font-size: 27px;
+    }
+}

src/assets/css/ios.css

@@ -0,0 +1,8 @@
+html {
+    font-size: 82% !important
+}
+
+.formDialogFooter {
+    position: static !important;
+    margin: 0 -1em !important
+}

src/assets/css/librarybrowser.css

@@ -0,0 +1,940 @@
+.headerUserImage,
+.navMenuOption,
+.pageTitle {
+    vertical-align: middle
+}
+
+.detailButton-mobile,
+.itemLinks,
+.listPaging,
+.sectionTabs,
+.viewSettings {
+    text-align: center
+}
+
+.headerSelectedPlayer,
+.itemMiscInfo,
+.navMenuOptionText {
+    text-overflow: ellipsis;
+    overflow: hidden
+}
+
+.libraryPage {
+    padding-top: 7em !important
+}
+
+.itemDetailPage {
+    padding-top: 4em !important
+}
+
+.standalonePage {
+    padding-top: 4.5em !important
+}
+
+.wizardPage {
+    padding-top: 7em !important
+}
+
+.libraryPage:not(.noSecondaryNavPage) {
+    padding-top: 7.5em !important
+}
+
+.absolutePageTabContent {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    margin: 0 !important;
+    top: 6.9em !important;
+    transition: transform .2s ease-out
+}
+
+.pageTabContent:not(.is-active) {
+    display: none !important
+}
+
+.headerUserImage {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: 100em;
+    display: inline-block
+}
+
+.headerUserButtonRound div {
+    border-radius: 100em;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.headerButton {
+    flex-shrink: 0
+}
+
+.hideMainDrawer .mainDrawerButton {
+    display: none
+}
+
+.noHeaderRight .headerRight,
+.noHomeButtonHeader .headerHomeButton {
+    display: none !important
+}
+
+.pageTitle {
+    display: inline-flex;
+    margin: .3em 0 0 .5em;
+    height: 1.7em;
+    align-items: center;
+    flex-shrink: 1
+}
+
+.headerLeft,
+.skinHeader {
+    display: flex;
+}
+
+.detailButton-mobile,
+.skinHeader {
+    flex-direction: column;
+}
+
+.pageTitleWithLogo {
+    background-position: left center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 13.2em
+}
+
+.skinHeader {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 999;
+    top: 0;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    contain: layout style paint
+}
+
+.headerLeft,
+.headerRight {
+    justify-content: center;
+}
+
+.hiddenViewMenuBar .skinHeader {
+    display: none
+}
+
+.headerTop {
+    padding: .54em 0
+}
+
+.headerLeft {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    overflow: hidden;
+    justify-content: left;
+}
+
+.sectionTabs {
+    width: 100%
+}
+
+.headerRight {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end
+}
+
+.selectedMediaFolder {
+    background-color: #f2f2f2 !important
+}
+
+.navMenuOption {
+    display: flex !important;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    padding: .9em 0 .9em 2.4em !important;
+    flex-grow: 1;
+    font-weight: 400 !important;
+    margin: 0 !important;
+    border-radius: 0 !important
+}
+
+.navMenuOptionIcon {
+    margin-right: 1.2em;
+    flex-shrink: 0
+}
+
+.navMenuOptionText {
+    white-space: nowrap
+}
+
+.sidebarHeader {
+    padding-left: 1.2em;
+    margin: 1em 0 .5em
+}
+
+.dashboardDocument .skinBody {
+    transition: left ease-in-out .3s, padding ease-in-out .3s;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.layout-desktop .searchTabButton,
+.layout-mobile .searchTabButton,
+.layout-tv .headerSearchButton {
+    display: none !important
+}
+
+.mainDrawer-scrollContainer {
+    padding-bottom: 10vh
+}
+
+@media all and (min-width:40em) {
+
+    .dashboardDocument .adminDrawerLogo,
+    .dashboardDocument .mainDrawerButton {
+        display: none !important
+    }
+
+    .dashboardDocument .mainDrawer {
+        z-index: inherit !important;
+        left: 0 !important;
+        top: 0 !important;
+        transform: none !important;
+        box-shadow: none !important;
+        width: 20.205em !important;
+        font-size: 94%
+    }
+
+    .dashboardDocument .mainDrawer-scrollContainer {
+        margin-top: 5em !important
+    }
+
+    .dashboardDocument .skinBody {
+        left: 20em
+    }
+}
+
+@media all and (max-width:60em) {
+    .libraryDocument .mainDrawerButton {
+        display: none
+    }
+}
+
+@media all and (max-width:84em) {
+    .withSectionTabs .headerTop {
+        padding-bottom: 0.2em;
+    }
+
+    .sectionTabs {
+        font-size: 83.5%;
+    }
+}
+
+@media all and (min-width:84em) {
+    .headerTop {
+        padding: 1.489em 0
+    }
+
+    .headerTabs {
+        align-self: center;
+        width: auto;
+        align-items: center;
+        justify-content: center;
+        margin-top: -3.34em;
+        position: relative;
+        top: -1.05em
+    }
+
+    .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: 4.6em !important
+    }
+
+    .pageWithAbsoluteTabs:not(.noSecondaryNavPage) {
+        padding-top: 6.7em !important
+    }
+
+    .absolutePageTabContent {
+        top: 5.7em !important
+    }
+
+    .dashboardDocument .mainDrawer-scrollContainer {
+        margin-top: 6em !important;
+    }
+}
+
+.headerSelectedPlayer {
+    max-width: 10em;
+    white-space: nowrap
+}
+
+@media all and (max-width:37.5em) {
+    .headerSelectedPlayer {
+        display: none
+    }
+}
+
+.hidingAnimatedTab {
+    visibility: hidden
+}
+
+.headerArrowImage {
+    height: 20px;
+    margin-left: .5em
+}
+
+.backdropContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1
+}
+
+.libraryPage .header {
+    padding-bottom: 0
+}
+
+.flexPageTabContent.is-active {
+    display: flex !important
+}
+
+.viewSettings {
+    margin: 0 0 .25em
+}
+
+.viewControls+.listTopPaging {
+    margin-left: .5em !important
+}
+
+.criticReview {
+    margin: 1.5em 0;
+    background: #222;
+    padding: .8em .8em .8em 3em;
+    border-radius: .3em;
+    position: relative
+}
+
+.detailLogo,
+.itemBackdrop {
+    background-repeat: no-repeat;
+    background-position: center center
+}
+
+.criticReview:first-child {
+    margin-top: .5em
+}
+
+.criticReview img {
+    width: 2.4em
+}
+
+.criticRatingScore {
+    margin-bottom: .5em
+}
+
+.itemTag {
+    display: inline-block;
+    margin-right: 1em
+}
+
+.itemOverview {
+    white-space: pre-wrap
+}
+
+.itemLinks {
+    padding: 0
+}
+
+.itemLinks p {
+    margin: .5em 0
+}
+
+.reviewLink,
+.reviewerName {
+    margin-top: .5em
+}
+
+.reviewerName {
+    color: #ccc
+}
+
+.reviewDate {
+    margin-left: 1em
+}
+
+.reviewScore {
+    position: absolute;
+    left: .8em
+}
+
+.itemBackdrop {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 50vh;
+    position: relative
+}
+
+.itemBackdropProgressBar {
+    position: absolute !important;
+    bottom: 0;
+    left: 0;
+    right: 0
+}
+
+.desktopMiscInfoContainer {
+    position: absolute;
+    bottom: .75em
+}
+
+.layout-mobile .detailPagePrimaryContainer {
+    display: block;
+    position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+    position: relative;
+}
+
+.detailPagePrimaryContainer {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.infoWrapper {
+    flex: 1 0 0;
+}
+
+.infoText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+.detailPageSecondaryContainer {
+    margin: 1.25em 0;
+    display: flex;
+    flex-direction: column;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.layout-mobile .detailImageContainer,
+.layout-tv .detailImageContainer {
+    position: relative;
+}
+
+.detailImageContainer {
+    margin: 1.25em 0;
+    position: sticky;
+    top: 15%;
+    float: left;
+    width: 22.786458333333332vw;
+}
+
+.detailPagePrimaryContent {
+    position: relative;
+    flex-grow: 1
+}
+
+.detailLogo {
+    width: 25em;
+    height: 9.375em;
+    position: absolute;
+    top: 14.5%;
+    right: 10.5%;
+    background-size: contain
+}
+
+@media all and (max-width:87.5em) {
+    .detailLogo {
+        right: 5%
+    }
+}
+
+@media all and (max-width:75em) {
+    .detailLogo {
+        right: 2%
+    }
+}
+
+@media all and (max-width:68.75em) {
+    .detailLogo {
+        width: 14.91em;
+        height: 3.5em;
+        right: 5%;
+        bottom: 5%;
+        top: auto;
+        background-position: center right;
+        display: none
+    }
+}
+
+.itemDetailImage {
+    width: 100% !important;
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+}
+
+@media all and (max-width:62.5em) {
+    .detailPageContent {
+        position: relative
+    }
+
+    .btnPlaySimple {
+        display: none !important
+    }
+}
+
+@media all and (max-width:75em) {
+    .lnkSibling {
+        display: none !important
+    }
+}
+
+.parentName {
+    display: block;
+    margin-bottom: .5em
+}
+
+.emby-button.detailFloatingButton {
+    position: absolute;
+    background-color: rgba(0, 0, 0, .5) !important;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    margin: -2.2em 0 0 -2.2em;
+    border: 2.7px solid rgba(255, 255, 255, .6);
+    padding: .38em !important;
+    color: rgba(255, 255, 255, .76)
+}
+
+.emby-button.detailFloatingButton i {
+    font-size: 3.5em
+}
+
+@media all and (max-width:62.5em) {
+    .parentName {
+        margin-bottom: 1em
+    }
+
+    .itemDetailPage {
+        padding-top: 0 !important
+    }
+
+    .detailimg-hidemobile {
+        display: none
+    }
+}
+
+@media all and (min-width:31.25em) {
+    .mobileDetails {
+        display: none
+    }
+}
+
+@media all and (max-width:31.25em) {
+    .desktopDetails {
+        display: none !important
+    }
+}
+
+.detailButton-mobile,
+.mainDetailButtons {
+    display: flex;
+}
+
+.itemName {
+    margin: .5em 0
+}
+
+.empty {
+    margin: 0
+}
+
+.detailCollapsibleSection:not(.hide)+.detailCollapsibleSection {
+    margin-top: -2em
+}
+
+.detailPageCollabsible {
+    margin-top: 0
+}
+
+.mainDetailButtons {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 1em 0;
+}
+
+.recordingFields button {
+    margin-left: 0;
+    margin-right: .5em;
+    flex-shrink: 0
+}
+
+.mainDetailButtons.hide+.recordingFields {
+    margin-top: 1.5em !important
+}
+
+.detailButton-mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 !important;
+    padding: .5em .7em !important
+}
+
+.detailButton {
+    margin: 0 .5em 0 0 !important
+}
+
+@media all and (min-width:29em) {
+    .detailButton-mobile {
+        padding-left: .75em !important;
+        padding-right: .75em !important
+    }
+}
+
+@media all and (min-width:32em) {
+    .detailButton-mobile {
+        padding-left: .8em !important;
+        padding-right: .8em !important
+    }
+}
+
+@media all and (min-width:35em) {
+    .detailButton-mobile {
+        padding-left: .85em !important;
+        padding-right: .85em !important
+    }
+}
+
+.detailButton-mobile-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center
+}
+
+.detailButton-mobile-icon {
+    font-size: 1.6em !important;
+    width: 1em;
+    height: 1em
+}
+
+.detailImageProgressContainer {
+    margin-left: 6px;
+    width: 21.886458333333332vw;
+}
+
+.detailButton-mobile-text {
+    margin-top: .7em;
+    font-size: 80%;
+    font-weight: 400
+}
+
+@media all and (max-width:62.5em) {
+    .mainDetailButtons {
+        margin-left: -.5em
+    }
+
+    .detailButton {
+        display: none !important
+    }
+}
+
+@media all and (min-width:62.5em) {
+    .detailFloatingButton {
+        display: none !important
+    }
+
+    .mainDetailButtons {
+        font-size: 108%;
+        margin: 1.25em 0
+    }
+}
+
+.listTopPaging,
+.viewControls {
+    display: inline-block
+}
+
+@media all and (max-width:50em) {
+    .editorMenuLink {
+        display: none
+    }
+}
+
+.itemMiscInfo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center
+}
+
+@media all and (max-width:31.25em) {
+    .mobileDetails .itemMiscInfo {
+        text-align: center;
+        justify-content: center
+    }
+
+    .itemMiscInfo .endsAt {
+        display: none
+    }
+}
+
+.layout-tv .detailVerticalSection {
+    margin-bottom: 3.4em !important
+}
+
+.detailPageContent {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+@media all and (max-width:62.5em) {
+    .detailPageContent-nodetailimg {
+        padding-top: 0;
+    }
+}
+
+.mediaInfoStream {
+    margin: 0 3em 0 0;
+    display: inline-block;
+    vertical-align: top
+}
+
+.mediaInfoStreamType {
+    display: block;
+    margin: 1em 0
+}
+
+.mediaInfoAttribute,
+.mediaInfoLabel {
+    display: inline-block
+}
+
+.mediaInfoLabel {
+    margin-right: 1em;
+    font-weight: 600
+}
+
+.recordingProgressBar::-moz-progress-bar {
+    background-color: #c33
+}
+
+.recordingProgressBar::-webkit-progress-value {
+    background-color: #c33
+}
+
+.recordingProgressBar[aria-valuenow]:before {
+    background-color: #c33
+}
+
+.timelineHeader {
+    margin-bottom: .25em;
+    line-height: 1.25em;
+    line-height: initial
+}
+
+.itemsContainer {
+    margin: 0 auto
+}
+
+@media all and (max-height:31.25em) {
+    .itemBackdrop {
+        height: 52vh
+    }
+}
+
+@media all and (max-width:75em) {
+    .listViewUserDataButtons {
+        display: none !important
+    }
+}
+
+@media all and (max-width:62.5em) {
+    .detailsHiddenOnMobile {
+        display: none
+    }
+}
+
+.btnSyncComplete {
+    background: #673AB7 !important
+}
+
+.btnSyncComplete i {
+    border-radius: 100em
+}
+
+.bulletSeparator {
+    margin: 0 .35em
+}
+
+.mediaInfoIcons {
+    display: flex;
+    align-items: center;
+    margin: 1em 0;
+    flex-wrap: wrap
+}
+
+.verticalSection-extrabottompadding {
+    margin-bottom: 2.7em
+}
+
+.sectionTitleButton,
+.sectionTitleIconButton {
+    margin-right: 0 !important;
+    display: inline-block;
+    vertical-align: middle
+}
+
+.sectionTitleContainer {
+    margin: 1.25em 0;
+}
+
+.sectionTitleContainer > .sectionTitle {
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* these next two rules are for the scroller element headers */
+.sectionTitleContainer-cards {
+    margin: 0;
+    padding-top: 1.25em;
+}
+
+div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
+    margin: 0;
+    padding-top: 1.25em;
+}
+
+.sectionTitleButton {
+    margin-left: 1.5em !important;
+    flex-shrink: 0
+}
+
+.sectionTitleButton + .sectionTitleButton {
+    margin-left: .5em !important
+}
+
+.sectionTitleIconButton {
+    margin-left: 1.5em !important;
+    flex-shrink: 0;
+    font-size: 84% !important;
+    padding: .5em !important
+}
+
+.horizontalItemsContainer {
+    display: flex
+}
+
+.sectionTitleTextButton {
+    margin: 0 !important;
+    display: inline-flex !important;
+    color: inherit !important
+}
+
+.sectionTitleTextButton:not(.padded-left) {
+    padding: 0 !important
+}
+
+.sectionTitleTextButton.padded-left {
+    padding-bottom: 0 !important;
+    padding-right: 0 !important;
+    padding-top: 0 !important
+}
+
+.sectionTitleTextButton>.sectionTitle {
+    margin-bottom: 0;
+    margin-top: 0
+}
+
+.padded-left {
+    padding-left: 3.3%;
+}
+
+.padded-right {
+    padding-right: 3.3%;
+}
+
+.padded-top {
+    padding-top: 1em;
+}
+
+.padded-bottom {
+    padding-bottom: 1em;
+}
+
+.layout-tv .padded-top-focusscale {
+    padding-top: 1em;
+    margin-top: -1em;
+}
+
+.layout-tv .padded-bottom-focusscale {
+    padding-bottom: 1em;
+    margin-bottom: -1em;
+}
+
+@media all and (min-height:31.25em) {
+    .padded-left-withalphapicker {
+        padding-left: 7.5%;
+    }
+
+    .padded-right-withalphapicker {
+        padding-right: 7.5%;
+    }
+}
+
+.searchfields-icon {
+    color: #aaaaaa;
+}
+
+.button-accent-flat {
+    color: #00a4dc !important;
+}
+
+.clearLink {
+    text-decoration: none;
+    font-weight: inherit !important;
+    vertical-align: middle;
+    color: inherit !important
+}
+
+.itemsViewSettingsContainer {
+    justify-content: center
+}
+
+@media all and (min-width:40em) {
+    .listIconButton-autohide {
+        display: none !important
+    }
+}
+
+@media all and (max-width:40em) {
+    .listTextButton-autohide {
+        display: none !important
+    }
+}
+
+.itemsViewSettingsContainer>.button-flat {
+    margin: 0
+}

src/assets/css/livetv.css

@@ -0,0 +1,9 @@
+.guideVerticalScroller {
+    padding-bottom: 15em
+}
+
+@media all and (min-width:62.5em) {
+    #guideTab {
+        padding-left: .5em
+    }
+}

src/assets/css/material-icons/style.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff');
+}
+
+.md-icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga" 1;
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
+}

src/assets/css/metadataeditor.css

@@ -0,0 +1,75 @@
+.editPageSidebar {
+    display: block
+}
+
+.editPageSidebar-withcontent {
+    display: none
+}
+
+.libraryTree {
+    margin-left: .25em
+}
+
+.offlineEditorNode {
+    color: #c33
+}
+
+.editorNode img {
+    height: 18px;
+    margin: 0 .35em;
+    vertical-align: middle;
+    position: relative;
+    top: -2px
+}
+
+.jstree-anchor {
+    font-weight: 400 !important
+}
+
+.jstree-wholerow-hovered {
+    background: #38c !important;
+    border-radius: 0 !important;
+    box-shadow: none !important
+}
+
+.jstree-default .jstree-hovered {
+    background: 0 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: #fff !important
+}
+
+.jstree-default .jstree-wholerow-clicked {
+    background: #00a4dc !important
+}
+
+.metadataSidebarIcon {
+    margin-right: .4em
+}
+
+@media all and (min-width:50em) {
+    .editPageSidebar {
+        position: fixed;
+        top: 5.2em;
+        bottom: 0;
+        left: 0;
+        width: 30%;
+        border-right: 1px solid #555;
+        display: block
+    }
+
+    .editPageInnerContent {
+        float: right;
+        width: 68.5%
+    }
+}
+
+@media all and (min-width:112.5em) {
+    .editPageSidebar {
+        width: 25%
+    }
+
+    .editPageInnerContent {
+        width: 73.5%
+    }
+}

src/assets/css/scrollstyles.css

@@ -0,0 +1,46 @@
+.scrollX {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.smoothScrollX {
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollX, .layout-tv .scrollX {
+    scrollbar-width: none;
+}
+
+.hiddenScrollX-forced {
+    scrollbar-width: none;
+}
+
+.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
+    height: 0 !important;
+    display: none;
+}
+
+.scrollY {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.smoothScrollY {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollY, .layout-tv .smoothScrollY {
+    scrollbar-width: none;
+}
+
+.hiddenScrollY-forced {
+    scrollbar-width: none;
+}
+
+.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+}

src/assets/css/site.css

@@ -0,0 +1,87 @@
+body,
+html {
+    margin: 0;
+    padding: 0;
+    height: 100%
+}
+
+.backgroundContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    contain: strict
+}
+
+html {
+    line-height: 1.35
+}
+
+.layout-mobile,
+.layout-tv {
+    user-select: none
+}
+
+body {
+    overflow-x: hidden;
+    background-color: transparent !important;
+}
+
+.mainAnimatedPage {
+    contain: style size !important
+}
+
+.pageContainer {
+    overflow-x: visible !important
+}
+
+.bodyWithPopupOpen {
+    overflow-y: hidden !important
+}
+
+div[data-role=page] {
+    outline: 0
+}
+
+.pageTitle {
+    margin-top: 0;
+    font-family: inherit
+}
+
+.fieldDescription {
+    padding-left: .15em;
+    font-weight: 400;
+    white-space: normal !important
+}
+
+.fieldDescription+.fieldDescription {
+    margin-top: .3em
+}
+
+.content-primary,
+.padded-bottom-page,
+.page,
+.pageWithAbsoluteTabs .pageTabContent {
+    /* provides room for the music controls */
+    padding-bottom: 5em !important;
+}
+
+@media all and (min-width:50em) {
+    .readOnlyContent,
+    form {
+        max-width: 54em
+    }
+}
+
+.headerHelpButton {
+    margin-left: 1.25em !important;
+    padding-bottom: .4em !important;
+    padding-top: .4em !important
+}
+
+.mediaInfoContent {
+    margin-left: auto;
+    margin-right: auto;
+    width: 85%
+}

src/assets/css/videoosd.css

@@ -0,0 +1,222 @@
+.chapterThumbTextContainer,
+.videoOsdBottom {
+    user-select: none;
+}
+
+.osdPoster img,
+.pageContainer,
+.videoOsdBottom {
+    bottom: 0;
+    left: 0;
+    right: 0
+}
+
+.osdHeader {
+    transition: opacity .3s ease-out;
+    position: relative;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.7) !important;
+    backdrop-filter: none !important;
+    color: #eee !important;
+}
+
+.osdHeader-hidden {
+    opacity: 0
+}
+
+.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
+    display: none
+}
+
+.chapterThumbContainer {
+    box-shadow: 0 0 1.9vh #000;
+    flex-grow: 1;
+    position: relative
+}
+
+.chapterThumb {
+    background-position: center center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    border: 0;
+    height: 20vh;
+    min-width: 20vh
+}
+
+@media all and (orientation:portrait) {
+    .chapterThumb {
+        height: 30vw;
+        min-width: 30vw
+    }
+}
+
+@media all and (max-height:50em) and (orientation:landscape) {
+    .chapterThumb {
+        height: 30vh;
+        min-width: 30vh
+    }
+}
+
+.chapterThumbTextContainer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .7);
+    padding: .25em .5em;
+    user-select: none
+}
+
+.chapterThumbText {
+    padding: .25em 0;
+    margin: 0;
+    opacity: 1
+}
+
+.chapterThumbText-dim {
+    opacity: .6
+}
+
+.videoOsdBottom {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 1%;
+    display: flex;
+    flex-direction: row;
+    will-change: opacity;
+    transition: opacity 0.3s ease-out;
+    color: #fff;
+    user-select: none
+}
+
+.videoOsdBottom-hidden {
+    opacity: 0
+}
+
+.osdControls {
+    flex-grow: 1
+}
+
+.videoOsdBottom .buttons {
+    padding: .25em 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center
+}
+
+.osdVolumeSliderContainer {
+    width: 9em;
+    flex-grow: 1
+}
+
+.osdMediaInfo,
+.volumeButtons {
+    display: flex;
+    align-items: center;
+}
+
+.volumeButtons {
+    margin: 0 .5em 0 auto;
+    display: flex;
+    align-items: center
+}
+
+.osdTimeText {
+    margin-left: 1em;
+    user-select: none
+}
+
+.osdPoster {
+    width: 10%;
+    position: relative;
+    margin-right: .5em
+}
+
+.osdPoster img {
+    position: absolute;
+    height: auto;
+    width: 100%;
+    box-shadow: 0 0 1.9vh #000;
+    border: .08em solid #222;
+    user-drag: none;
+    user-select: none
+}
+
+.osdTitle,
+.osdTitleSmall {
+    margin: 0 1em 0 0
+}
+
+.osdMediaInfo {
+    display: flex;
+    align-items: center
+}
+
+.osdSecondaryMediaInfo {
+    padding-left: .6em !important
+}
+
+.osdTextContainer {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    margin-bottom: .7em;
+    padding-left: .5em
+}
+
+.osdMainTextContainer {
+    align-items: baseline
+}
+
+.osdMediaStatus {
+    margin-left: auto;
+}
+
+@keyframes spin {
+    100% {
+        transform:rotate(360deg);
+    }
+}
+
+.osdMediaStatus .animate {
+    animation:spin 4s linear infinite;
+}
+
+.pageContainer {
+    top: 0;
+    position: fixed
+}
+
+@media all and (max-width:30em) {
+
+    .btnFastForward,
+    .btnRewind,
+    .osdMediaInfo,
+    .osdPoster {
+        display: none !important
+    }
+}
+
+@media all and (max-width:33.75em) {
+    .videoOsdBottom .paper-icon-button-light {
+        margin: 0
+    }
+}
+
+@media all and (max-width:43em) {
+    .videoOsdBottom .volumeButtons,
+    .osdMediaStatus span {
+        display: none !important
+    }
+}
+@media all and (max-width:50em) {
+    .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
+        display: none !important
+    }
+}
+
+@media all and (max-width:75em) {
+    .videoOsdBottom .endsAtText {
+        display: none !important
+    }
+}