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
+    }
+}

src/assets/img/devices/chrome.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Chrome icon</title><path d="M16.214 8.69l6.715-1.679A12.027 12.027 0 0 1 24 11.972C24 18.57 18.569 24 11.968 24c-.302 0-.605-.011-.907-.034l4.905-8.347c.356-.376.655-.803.881-1.271a5.451 5.451 0 0 0-.043-4.748 5.156 5.156 0 0 0-.59-.91zm-3.24 8.575l-2.121 6.682C4.738 23.345 0 18.14 0 11.977 0 9.592.709 7.26 2.038 5.279l4.834 8.377c.18.539 1.119 2.581 3.067 3.327.998.382 2.041.481 3.035.282zM11.973 7.62c-2.006.019-3.878 1.544-4.281 3.512a4.478 4.478 0 0 0 1.237 4.032c1.214 1.186 3.14 1.578 4.734.927 1.408-.576 2.47-1.927 2.691-3.431.272-1.856-.788-3.832-2.495-4.629a4.413 4.413 0 0 0-1.886-.411zM7.046 9.962L2.259 4.963A12.043 12.043 0 0 1 11.997 0c4.56 0 8.744 2.592 10.774 6.675H12.558c-1.811-.125-3.288.52-4.265 1.453a5.345 5.345 0 0 0-1.247 1.834z" fill="#fff"/></svg>

src/assets/img/devices/edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Microsoft Edge icon</title><path d="M23.158 14.25H7.821c0 .578.086 1.103.262 1.575.188.465.431.881.743 1.245.31.364.675.675 1.102.938.413.262.863.48 1.343.648.476.173.975.3 1.48.383a10.078 10.078 0 0 0 3.311-.026c.564-.105 1.111-.244 1.651-.42.54-.177 1.061-.387 1.583-.627.525-.24 1.057-.502 1.605-.795v5.085c-.612.3-1.212.552-1.812.769-.6.21-1.2.394-1.81.54-.612.15-1.23.263-1.865.33a18.41 18.41 0 0 1-1.957.105c-.9 0-1.77-.105-2.606-.311a10.217 10.217 0 0 1-2.355-.893 9.869 9.869 0 0 1-2.018-1.417 8.957 8.957 0 0 1-2.595-4.148 9.359 9.359 0 0 1-.356-2.61c0-.986.135-1.924.405-2.82.274-.9.66-1.717 1.17-2.467a8.92 8.92 0 0 1 1.856-1.999A9.82 9.82 0 0 1 9.426 5.91a5.206 5.206 0 0 0-1.163 1.774 7.671 7.671 0 0 0-.536 2.055h8.542c0-.863-.086-1.613-.262-2.258-.176-.645-.458-1.181-.851-1.605-.39-.427-.893-.75-1.512-.96-.618-.214-1.365-.322-2.238-.322-1.032 0-2.063.15-3.094.461-1.031.3-2.01.731-2.94 1.275-.93.551-1.785 1.2-2.565 1.942-.78.75-1.436 1.557-1.969 2.43a14 14 0 0 1 .649-2.913C1.798 6.863 2.21 6 2.706 5.2a11.606 11.606 0 0 1 1.74-2.152c.663-.645 1.398-1.2 2.212-1.65C7.472.949 8.334.585 9.272.34A13.4 13.4 0 0 1 12.257 0c.615 0 1.226.056 1.837.165.612.113 1.208.263 1.79.458 1.154.397 2.185.952 3.093 1.657a10.553 10.553 0 0 1 2.287 2.449c.62.926 1.088 1.95 1.41 3.063.323 1.114.488 2.273.488 3.477v2.981z" fill="#fff"/></svg>

src/assets/img/devices/firefox.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Mozilla Firefox icon</title><path d="M23.41 10.98c-.03-.21-.07-.34-.07-.34s-.08.1-.22.28c-.04-.51-.13-1.02-.27-1.51-.18-.62-.41-1.22-.7-1.79-.18-.38-.39-.75-.64-1.09-.13-.2-.24-.35-.26-.38-.43-.7-.91-1.12-1.48-1.92-.36-.61-.61-1.29-.73-1.99-.16.42-.28.86-.36 1.3-.57-.58-1.08-1-1.38-1.28C15.8.86 15.98.14 15.98.14s-2.8 3.12-1.59 6.37c.42 1.1 1.14 2.07 2.09 2.78 1.17.96 2.43 1.72 3.09 3.67-.53-1.03-1.34-1.88-2.33-2.47.3.71.45 1.46.44 2.23 0 2.92-2.37 5.29-5.3 5.29-.39 0-.79-.04-1.17-.13-.46-.09-.9-.24-1.31-.45-.62-.37-1.16-.86-1.58-1.45v-.01c.05.02.08.03.09.03.22.08.44.14.67.18.9.19 1.83.08 2.66-.31.84-.47 1.35-.81 1.76-.68.41.13.72-.26.44-.67-.5-.65-1.32-.96-2.12-.82-.84.12-1.61.71-2.7.14-.08-.04-.14-.08-.21-.12-.07-.05.24.06.16.01-.24-.12-.47-.25-.69-.41-.01-.01.17.05.15.04-.28-.19-.53-.44-.72-.73-.19-.35-.21-.78-.05-1.15.11-.19.26-.33.45-.42.14.07.23.12.23.12s-.07-.12-.1-.18c.01-.01.02 0 .04-.01.12.05.39.19.54.28.1.05.18.13.25.22 0 0 .05-.02.01-.13-.05-.13-.14-.24-.26-.31h.02c.11.06.21.12.31.2.09-.22.14-.44.13-.67.01-.13-.01-.26-.05-.37-.04-.08.02-.11.09-.03-.01-.06-.03-.12-.06-.18 0 0 .04-.06.06-.07.05-.05.1-.1.16-.13.35-.22.71-.41 1.09-.56.31-.13.56-.24.61-.27.08-.05.15-.1.22-.16.26-.22.43-.52.49-.85.01-.05.01-.09.01-.13V7.75c-.04-.17-.33-.29-1.84-.44-.53-.08-.96-.48-1.08-1.01v.01c-.02.05-.04.11-.06.17.02-.06.04-.11.06-.17V6.3c.29-.75.81-1.4 1.48-1.84.04-.03-.15.01-.11-.02.12-.06.25-.12.39-.17.07-.02-.29-.16-.61-.13-.19.01-.38.06-.56.13.08-.06.3-.14.25-.14-.41.07-.8.22-1.15.43 0-.04.01-.07.02-.1-.28.12-.53.31-.71.55v-.13c-.13.1-.24.21-.35.33h-.01c-.83-.32-1.73-.4-2.61-.22l-.01-.01h.01c-.18-.14-.34-.32-.46-.52l-.01.01-.02-.02c-.06-.08-.11-.18-.17-.29-.05-.07-.09-.16-.14-.25 0 0 0-.01-.01-.01s-.03.09-.04.06c-.15-.4-.23-.83-.21-1.25h-.01c-.25.17-.44.41-.53.7-.05.1-.08.15-.11.21v-.03l.03-.15c-.01.01-.01.02-.02.03-.07.08-.13.17-.18.27-.05.09-.09.19-.12.29v-.05c0-.04.01-.1 0-.08l-.01.03c-.32.71-.53 1.47-.6 2.25-.02.14-.02.27-.02.4v.02c-.23.25-.43.52-.61.81-.58.98-1.01 2.04-1.28 3.15.19-.42.42-.83.69-1.21C.76 10.66.5 12.04.5 13.44c.09-.41.2-.81.33-1.21-.08 1.65.24 3.3.93 4.81.93 2.08 2.47 3.83 4.43 5.01.79.54 1.66.96 2.57 1.24.12.04.25.09.37.13-.04-.02-.07-.04-.11-.05 1.08.32 2.21.49 3.34.49 4.01 0 5.33-1.53 5.46-1.68.19-.18.36-.39.47-.64.08-.03.15-.06.23-.1l.05-.02c.06-.03.09-.04.09-.04.61-.29 1.18-.64 1.7-1.06.78-.56 1.33-1.38 1.57-2.31.15-.34.15-.71.03-1.06.06-.1.11-.19.12-.21.86-1.38 1.35-2.96 1.42-4.59v-.01-.13c0-.34-.03-.69-.09-1.03z" fill="#fff"/></svg>

src/assets/img/devices/html5.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>HTML5 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z" fill="#fff"/></svg>

src/assets/img/devices/msie.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Internet Explorer icon</title><path d="M22.8 7.381c1.125-2.7 1.2-4.95-.15-6.3-1.5-1.499-5.1-1.05-8.924.75h-.45c-2.7 0-5.324.976-7.274 2.7-1.65 1.5-2.85 3.45-3.375 5.625.375-.45 2.475-2.925 4.875-4.275.075 0 .675-.375.675-.375-.075 0-1.2 1.125-1.425 1.35-5.25 5.4-8.324 13.574-5.924 15.973 1.574 1.575 4.424 1.2 7.724-.6 1.425.675 3 .975 4.724.975 2.25 0 4.35-.6 6.15-1.8 1.874-1.2 3.224-3.074 4.05-5.249h-5.85c-.75 1.425-2.475 2.4-4.275 2.4-2.55 0-4.65-2.1-4.724-4.5V13.83h15.298v-.225c0-.375.075-.825.075-1.124 0-1.8-.45-3.525-1.2-5.1zM2.477 22.38c-1.2-1.2-.824-3.524.6-6.299.675 1.875 1.8 3.525 3.225 4.725.45.375.975.75 1.5 1.05-2.4 1.274-4.35 1.5-5.325.524zm15.374-11.398H8.702v-.075c.15-2.325 2.324-4.35 4.874-4.35 2.4 0 4.35 1.875 4.5 4.35v.075zm4.574-4.2c-.45-.75-1.05-1.5-1.725-2.1a11.213 11.213 0 0 0-3.6-2.25c2.4-1.124 4.425-1.274 5.475-.224.825.975.75 2.624-.15 4.574 0 .075 0 .075 0 0 0 .075 0 .075 0 0z" fill="#fff"/></svg>

src/assets/img/devices/opera.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Opera icon</title><path d="M8.051 5.238c-1.328 1.566-2.186 3.883-2.246 6.48v.564c.061 2.598.918 4.912 2.246 6.479 1.721 2.236 4.279 3.654 7.139 3.654 1.756 0 3.4-.537 4.807-1.471C17.879 22.846 15.074 24 12 24c-.192 0-.383-.004-.57-.014C5.064 23.689 0 18.436 0 12 0 5.371 5.373 0 12 0h.045c3.055.012 5.84 1.166 7.953 3.055-1.408-.93-3.051-1.471-4.81-1.471-2.858 0-5.417 1.42-7.14 3.654h.003zM24 12c0 3.556-1.545 6.748-4.002 8.945-3.078 1.5-5.946.451-6.896-.205 3.023-.664 5.307-4.32 5.307-8.74 0-4.422-2.283-8.075-5.307-8.74.949-.654 3.818-1.703 6.896-.205C22.455 5.25 24 8.445 24 12z" fill="#fff"/></svg>

src/assets/img/devices/other.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z" fill="#fff"/></svg>

src/assets/img/devices/playstation.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PlayStation icon</title><path d="M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z" fill="#fff"/></svg>

src/assets/img/devices/safari.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>safari icon</title><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-.75c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75.75 5.787.75 12 5.787 23.25 12 23.25zM12 2a.25.25 0 0 1 .25.25v1a.25.25 0 1 1-.5 0v-1A.25.25 0 0 1 12 2zm0 18.5a.25.25 0 0 1 .25.25v1a.25.25 0 1 1-.5 0v-1a.25.25 0 0 1 .25-.25zm7.071-15.571a.25.25 0 0 1 0 .353l-.707.708a.25.25 0 0 1-.354-.354l.708-.707a.25.25 0 0 1 .353 0zM5.99 18.01a.25.25 0 0 1 0 .354l-.708.707a.25.25 0 1 1-.353-.353l.707-.708a.25.25 0 0 1 .354 0zM4.929 4.93a.25.25 0 0 1 .353 0l.708.707a.25.25 0 0 1-.354.354l-.707-.708a.25.25 0 0 1 0-.353zM18.01 18.01a.25.25 0 0 1 .354 0l.707.708a.25.25 0 1 1-.353.353l-.708-.707a.25.25 0 0 1 0-.354zM2 12a.25.25 0 0 1 .25-.25h1a.25.25 0 1 1 0 .5h-1A.25.25 0 0 1 2 12zm18.5 0a.25.25 0 0 1 .25-.25h1a.25.25 0 1 1 0 .5h-1a.25.25 0 0 1-.25-.25zm-4.593-9.205a.25.25 0 0 1 .133.328l-.391.92a.25.25 0 1 1-.46-.195l.39-.92a.25.25 0 0 1 .328-.133zM8.68 19.825a.25.25 0 0 1 .132.327l-.39.92a.25.25 0 0 1-.46-.195l.39-.92a.25.25 0 0 1 .328-.133zM21.272 8.253a.25.25 0 0 1-.138.325l-.927.375a.25.25 0 1 1-.188-.464l.927-.374a.25.25 0 0 1 .326.138zm-17.153 6.93a.25.25 0 0 1-.138.326l-.927.374a.25.25 0 1 1-.188-.463l.927-.375a.25.25 0 0 1 .326.138zM8.254 2.728a.25.25 0 0 1 .325.138l.375.927a.25.25 0 0 1-.464.188l-.374-.927a.25.25 0 0 1 .138-.326zm6.93 17.153a.25.25 0 0 1 .326.138l.374.927a.25.25 0 1 1-.463.188l-.375-.927a.25.25 0 0 1 .138-.326zM2.795 8.093a.25.25 0 0 1 .328-.133l.92.391a.25.25 0 0 1-.195.46l-.92-.39a.25.25 0 0 1-.133-.328zm17.03 7.228a.25.25 0 0 1 .327-.132l.92.39a.25.25 0 1 1-.195.46l-.92-.39a.25.25 0 0 1-.133-.328zM12.879 12.879L11.12 11.12l-4.141 5.9 5.899-4.142zm6.192-7.95l-5.834 8.308-8.308 5.834 5.834-8.308 8.308-5.834z" fill="#fff"/></svg>

src/assets/img/devices/samsungtv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Samsung icon</title><path d="M19.8166 10.2808l.0459 2.6934h-.023l-.7793-2.6934h-1.2837v3.3925h.8481l-.0458-2.785h.023l.8366 2.785h1.2264v-3.3925zm-16.149 0l-.6418 3.427h.9284l.4699-3.1175h.0229l.4585 3.1174h.9169l-.6304-3.4269zm5.1805 0l-.424 2.6132h-.023l-.424-2.6132H6.5788l-.0688 3.427h.8596l.023-3.0832h.0114l.573 3.0831h.8711l.5731-3.083h.023l.0228 3.083h.8596l-.0802-3.4269zm-7.2664 2.4527c.0343.0802.0229.1949.0114.2522-.0229.1146-.1031.2292-.3324.2292-.2177 0-.3438-.126-.3438-.3095v-.3323H0v.2636c0 .7679.6074.9971 1.2493.9971.6189 0 1.1346-.2178 1.2149-.7794.0458-.298.0114-.4928 0-.5616-.1605-.722-1.467-.9283-1.5588-1.3295-.0114-.0688-.0114-.1375 0-.1834.023-.1146.1032-.2292.3095-.2292.2063 0 .321.126.321.3095v.2063h.8595v-.2407c0-.745-.6762-.8596-1.1576-.8596-.6074 0-1.1117.2063-1.2034.7564-.023.149-.0344.2866.0114.4585.1376.7106 1.364.9169 1.5358 1.3524m11.152 0c.0343.0803.0228.1834.0114.2522-.023.1146-.1032.2292-.3324.2292-.2178 0-.3438-.126-.3438-.3095v-.3323h-.917v.2636c0 .7564.596.9857 1.2379.9857.6189 0 1.1232-.2063 1.2034-.7794.0459-.298.0115-.4814 0-.5616-.1375-.7106-1.4327-.9284-1.5243-1.318-.0115-.0688-.0115-.1376 0-.1835.0229-.1146.1031-.2292.3094-.2292.1948 0 .321.126.321.3095v.2063h.848v-.2407c0-.745-.6647-.8596-1.146-.8596-.6075 0-1.1004.1948-1.192.7564-.023.149-.023.2866.0114.4585.1376.7106 1.341.9054 1.513 1.3524m2.8882.4585c.2407 0 .3094-.1605.3323-.2522.0115-.0343.0115-.0917.0115-.126v-2.533h.871v2.4642c0 .0688 0 .1948-.0114.2292-.0573.6419-.5616.8482-1.192.8482-.6303 0-1.1346-.2063-1.192-.8482 0-.0344-.0114-.1604-.0114-.2292v-2.4642h.871v2.533c0 .0458 0 .0916.0115.126 0 .0917.0688.2522.3095.2522m7.1518-.0344c.2522 0 .3324-.1605.3553-.2522.0115-.0343.0115-.0917.0115-.126v-.4929h-.3553v-.5043H24v.917c0 .0687 0 .1145-.0115.2292-.0573.6303-.596.8481-1.2034.8481-.6075 0-1.1461-.2178-1.2034-.8481-.0115-.1147-.0115-.1605-.0115-.2293v-1.444c0-.0574.0115-.172.0115-.2293.0802-.6419.596-.8482 1.2034-.8482s1.1347.2063 1.2034.8482c.0115.1031.0115.2292.0115.2292v.1146h-.8596v-.1948s0-.0803-.0115-.1261c-.0114-.0802-.0802-.2521-.3438-.2521-.2521 0-.321.1604-.3438.2521-.0115.0458-.0115.1032-.0115.1605v1.5702c0 .0458 0 .0916.0115.126 0 .0917.0917.2522.3323.2522" fill="#fff"/></svg>

src/assets/img/devices/windows.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Windows icon</title><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" fill="#fff"/></svg>

src/assets/img/devices/xbox.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Xbox icon</title><path d="M4.102 21.033C6.211 22.881 8.977 24 12 24c3.026 0 5.789-1.119 7.902-2.967 1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912C23.002 17.48 24 14.861 24 12.004c0-3.34-1.365-6.362-3.57-8.536 0 0-.027-.022-.082-.042-.063-.022-.152-.045-.281-.045-.592 0-1.985.434-4.805 3.246zM3.654 3.426c-.057.02-.082.041-.086.042C1.365 5.642 0 8.664 0 12.004c0 2.854.998 5.473 2.661 7.533-1.401-2.605 3.579-9.951 6.08-12.91-2.82-2.813-4.216-3.245-4.806-3.245-.131 0-.223.021-.281.046v-.002zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545v.006z" fill="#fff"/></svg>