first commit

modules/layout/layout.css

@@ -0,0 +1,385 @@
+:root {
+    /* Need the px or it won't work inside calc expression */
+    --window-inset-top: 0px;
+    --window-inset-bottom: 0px;
+    --window-inset-left: 0px;
+    --window-inset-right: 0px;
+    /* this is the height of headerLeft + 1.2em padding top + 1.2em padding bottom */
+    --header-height: 5.527em;
+    /* this is here for now instead of headroom.css to ensure it is loaded in time for the js */
+    --env-inset-top: env(safe-area-inset-top);
+    --logo-object-position: left center;
+}
+
+/* this @supports shouldn't be necessary because browsers should ignore what they don't support, but that doesn't seem to be the case with tizen or legacy edge
+   don't use env as part of the supports check because then tizen falsely considers it supported
+*/
+@supports (height: calc(3.125em + 2 * max(3em,4em))) {
+
+    :root {
+        --header-height: calc(4.327em + max(1.2em, env(safe-area-inset-top, 0)));
+    }
+}
+
+.rtl:root {
+    --logo-object-position: right center;
+}
+
+.skinHeader {
+    /* This will ensure it is on top of the main body */
+    z-index: 1;
+    display: -webkit-flex;
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    box-sizing: border-box;
+    height: var(--header-height);
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+    contain: strict;
+    padding-top: 1.2em;
+    padding-left: 0;
+    padding-left: env(safe-area-inset-left, 0);
+    padding-right: 0;
+    padding-right: env(safe-area-inset-right, 0);
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+:root, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 100%;
+    /* Needed to prevent a horizontal scrollbar when animating */
+    overflow-x: hidden;
+    overflow-anchor: none;
+}
+
+.noScrollY {
+    overflow-y: hidden;
+}
+
+/* Used on document.body to lock document level scrolling when dialogs are open */
+.withDialogOpen {
+    overflow-y: hidden !important;
+    /* Have to use this instead of none, otherwise the slideshow can't zoom */
+    touch-action: pinch-zoom !important;
+}
+
+.backgroundContainer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    contain: strict;
+    /* Can't do this. It causes loss of scrolling on Firefox Android
+        https://emby.media/community/index.php?/topic/81799-firefox-android-cannot-swipe-scroll-on-any-listing-page
+    touch-action: none; */
+}
+
+.transparentDocument, .backgroundContainer-transparent {
+    background: none !important;
+    background-color: transparent !important;
+}
+
+.skinBody {
+    contain: style size;
+}
+
+.hide {
+    display: none !important;
+}
+
+.page {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    contain: strict;
+}
+
+    .page.withTabs {
+        container-type: inline-size;
+        container-name: viewwithtabs;
+    }
+
+/* Until there's a better place for these */
+.itemsViewSettingsContainer {
+    -webkit-justify-content: center;
+    justify-content: center;
+    padding: 1em 0 1.75em !important;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-align-items: center;
+    align-items: center;
+    font-size: 88%;
+    /* this is a workaround to make it smaller so that pressing the right arrow on an items list doesn't result in navigation moving up to this bar */
+    max-width: 95%;
+    margin: 0 auto;
+    container-type: inline-size;
+    container-name: itemsviewsettingscontainer;
+}
+
+.itemsViewSettingsContainer-align-start {
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+    margin: 0;
+}
+
+.itemsViewSettingsContainer-fixed {
+    position: fixed;
+    top: 6.25em;
+    top: calc(var(--header-height) + 1em);
+    left: 0;
+    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+}
+
+.itemsViewSettingsContainer-fixed-scrollx {
+    top: 5.25em;
+    top: var(--header-height);
+    padding: 1em 0 !important;
+}
+
+.itemsContainer_header_fixed {
+    left: 0;
+    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: 3.18em;
+}
+
+/* dirty hack to detect support for column-gap in combination with flexbox, which is in Chrome 66+ and iOS 14.1+.
+   support for @supports with a selector became available around the same time
+*/
+@supports selector(:hover) and (display: revert) and (column-gap: 1em) {
+
+    .itemsViewSettingsContainer {
+        -webkit-column-gap: 1.1ch;
+        column-gap: 1.1ch;
+        row-gap: 1em;
+    }
+
+    .itemsViewSettingsContainer-button, .listTotalRecordCount {
+        margin: 0 !important;
+    }
+}
+
+.padded-top {
+    padding-top: 1em;
+}
+
+.padded-top-page {
+    padding-top: 6em;
+    padding-top: var(--header-height);
+}
+
+    .padded-top-page.verticalSections {
+        padding-top: calc(.85em + var(--header-height));
+    }
+
+    .padded-top-page.horizontalSections {
+        margin-top: calc(.85em + var(--header-height));
+        padding-top: 0;
+        container-type: size;
+    }
+
+.itemMainScrollSlider {
+    padding-top: var(--header-height) !important;
+}
+
+.margin-top-page-listheader {
+    padding-top: 0 !important;
+    margin-top: 14.3em !important;
+    margin-top: calc(var(--header-height) + 8.7em) !important;
+}
+
+/*
+    Forms
+    */
+form, .readOnlyContent {
+    max-width: 80ch;
+}
+
+.auto-center {
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+    -webkit-margin-end: auto;
+    margin-inline-end: auto;
+}
+
+.page.dialog {
+    position: static;
+    -webkit-flex-grow: 0;
+    flex-grow: 0;
+}
+
+.listTotalRecordCount {
+    margin: 0 .75em;
+}
+
+.fieldDescription {
+    margin-top: .2em;
+    font-weight: normal;
+    white-space: normal !important;
+}
+
+.legendDescription {
+    margin-top: 0;
+}
+
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+/* Need a better spot for this. used by directory picker and other areas */
+.infoBanner {
+    margin-bottom: 2em;
+    padding: 1em;
+    border-radius: .42em;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.infoBanner-primaryText {
+    margin: 0;
+    font-weight: bold;
+}
+
+/* Need a better spot for this. used by directory picker and other areas */
+.warningBanner, .errorBanner {
+    padding: 1em;
+    border-radius: .42em;
+    font-weight: 500;
+}
+
+.infoBannerIconContainer {
+    -webkit-margin-end: 1em;
+    margin-inline-end: 1em;
+}
+
+.infoBannerIcon {
+    font-size: 2em;
+}
+
+.rtl .autortl, .rtl-arabic .autortl-arabic {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}
+
+fieldset {
+    contain: style;
+    margin: 2em 0;
+    padding: 0;
+    border: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+.fieldset-fields {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.fieldset-fields-nested {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    padding: 0;
+}
+
+.fieldset-actions {
+    margin-top: 1em;
+}
+
+.fieldsets {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.legendWithContent {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.legendActions {
+    -webkit-margin-start: 1em;
+    margin-inline-start: 1em;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    font-size: 1rem;
+}
+
+.legend-incontainer {
+    margin: 0;
+}
+
+/* dirty hack to detect support for column-gap in combination with flexbox, which is in Chrome 66+ and iOS 14.1+.
+   support for @supports with a selector became available around the same time
+*/
+@supports selector(:hover) and (display: revert) and (column-gap: 1em) {
+    .fieldsets {
+        row-gap: 2em;
+    }
+
+    .fieldset-fields, .fieldset-fields-nested {
+        row-gap: 1.6em;
+    }
+
+    .fieldset-fields-listitems {
+        row-gap: 1em;
+    }
+
+    .fieldset-fields-fieldmargins {
+        row-gap: 0;
+    }
+
+    .fieldset-field {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+    fieldset, .fieldsets-item {
+        margin: 0;
+    }
+}

modules/layout/layout_nocssvars.css

@@ -0,0 +1 @@
+.withheadernowplaying:root .skinHeader{height:9.125em}:root .padded-top-page{padding-top:5.925em!important}:root .padded-top-page.horizontalSections{padding-top:0!important;margin-top:6.5em}.withheadernowplaying:root .padded-top-page{padding-top:9.525em!important}.withheadernowplaying:root .padded-top-page.horizontalSections{padding-top:0!important;margin-top:8.5em}

modules/layout/layout_nontv.css

@@ -0,0 +1 @@
+@media not all and (pointer:fine){:root{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}@media all and (pointer:fine){.hidepointerfine{display:none!important}}@media not all and (pointer:fine){.hidetouch{display:none!important}.withDialogOpen .view.scrollY:not(.dialog){overflow-y:hidden!important;touch-action:pinch-zoom!important}}@media not all and (min-width:60em){.drawer-docked{display:none!important}}@media all and (min-width:60em){.drawer-docked{left:0!important;right:initial!important;inset-inline-start:0%!important;inset-inline-end:initial!important;-webkit-transform:none!important;transform:none!important;box-shadow:none!important}.page-withFullDrawer,.page-withFullDrawer .viewContent-fixed{left:33.15ch;left:clamp(33.15ch,30%,45.5ch);right:0;inset-inline-start:33.15ch;inset-inline-start:clamp(33.15ch,30%,45.5ch);inset-inline-end:0}.skinHeader-withfulldrawer{-webkit-margin-start:33.15ch;margin-inline-start:33.15ch;-webkit-margin-start:clamp(33.15ch,30%,45.5ch);margin-inline-start:clamp(33.15ch,30%,45.5ch)}@media all and (pointer:fine){.page-withFullDrawer,.page-withFullDrawer .viewContent-fixed{left:16.5em;left:calc(16.5em + env(safe-area-inset-left,0));right:0;inset-inline-start:16.5em;inset-inline-start:calc(16.5em + env(safe-area-inset-left,0));inset-inline-end:0}.rtl.withFullDrawer:root .page,.rtl.withFullDrawer:root .viewContent-fixed{inset-inline-start:calc(16.5em + env(safe-area-inset-right,0))}.skinHeader-withfulldrawer{-webkit-margin-start:16.5em;margin-inline-start:16.5em;-webkit-margin-start:calc(16.5em + env(safe-area-inset-left,0));margin-inline-start:calc(16.5em + env(safe-area-inset-left,0))}.rtl:root .skinHeader-withfulldrawer{-webkit-margin-start:calc(16.5em + env(safe-area-inset-right,0));margin-inline-start:calc(16.5em + env(safe-area-inset-right,0))}}.withTabs .viewContent-fixed{inset-inline-start:0!important}.page-withMiniDrawer{left:10ch;right:0;inset-inline-start:10ch;inset-inline-end:0}.skinHeader-withminidrawer{-webkit-margin-start:10ch;margin-inline-start:10ch}}@supports not (container-type:inline-size){@media not all and (min-width:28em){.listTotalRecordCount{display:none!important}}}@container itemsviewsettingscontainer not (min-width:50ch){.listTotalRecordCount{display:none!important}}.page-withDockedDrawer .auto-center{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0}@media not all and (min-width:126em){.withHeaderTabs.withFullDrawer:root{--header-height:9.104em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withHeaderTabs.withFullDrawer:root{--header-height:calc(7.904em + max(1.2em, env(safe-area-inset-top, 0)))}}.withheadernowplaying.withHeaderTabs.withFullDrawer:root{--header-height:13.904em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withheadernowplaying.withHeaderTabs.withFullDrawer:root{--header-height:calc(12.704em + max(1.2em, env(safe-area-inset-top, 0)))}}}@media not all and (min-width:120em){.withHeaderTabs:root{--header-height:9.104em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withHeaderTabs:root{--header-height:calc(7.904em + max(1.2em, env(safe-area-inset-top, 0)))}}.withheadernowplaying.withHeaderTabs:root{--header-height:13.904em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withheadernowplaying.withHeaderTabs:root{--header-height:calc(12.704em + max(1.2em, env(safe-area-inset-top, 0)))}}}@media not all and (min-width:66em){.withHeaderTabs.withFullDrawer:root,.withHeaderTabs:root{--header-height:8.027em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withHeaderTabs.withFullDrawer:root,.withHeaderTabs:root{--header-height:calc(6.827em + max(1.2em, env(safe-area-inset-top, 0)))}}.withheadernowplaying.withHeaderTabs.withFullDrawer:root,.withheadernowplaying.withHeaderTabs:root{--header-height:12.827em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withheadernowplaying.withHeaderTabs.withFullDrawer:root,.withheadernowplaying.withHeaderTabs:root{--header-height:calc(11.627em + max(1.2em, env(safe-area-inset-top, 0)))}}}@media all and (min-width:50em){.listIconButton-autohide{display:none!important}}@media not all and (min-width:50em){.listTextButton-autohide{display:none!important}}

modules/layout/layout_tv.css

@@ -0,0 +1 @@
+:root{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.withheadernowplaying:root{--header-height:10.327em}@supports (height:calc(3.125em + 2 * max(3em,4em))){.withheadernowplaying:root{--header-height:calc(9.127em + max(1.2em, env(safe-area-inset-top, 0)))}}.focusPreviewContainer{position:fixed;top:0;left:0;right:0}.focusPreviewContainer-clip{max-width:40%}.focusPreviewContainer-horizontal{top:85%;height:12%}.scrollSliderX-withfocusPreview{margin-bottom:20vh}.horizontalSections.scrollSliderX-withfocusPreview{margin-bottom:calc(20vh + 1.25em)}.focusPreviewContainer-inner{height:100%}.focusPreviewImageElement{-webkit-margin-end:1em;margin-inline-end:1em;background-position:center center;background-size:contain;background-repeat:no-repeat;height:100%;width:18vh;-webkit-flex-shrink:0;flex-shrink:0;border-radius:.42em}.focusPreviewImageCard{width:100%!important}.focusPreviewImageCardBox{margin:0!important}.focusPreviewImageContainer{background-color:transparent!important}.focusPreviewTitle{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.focusPreviewTitleImg{height:2em;max-width:97%;margin:0!important;border:0!important;object-fit:contain;object-position:left center;object-position:var(--logo-object-position)}.focusPreviewMediaInfo{-webkit-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.focusPreviewSecondaryTitle{margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.focusPreviewOverview{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.focusPreviewOverview-horizontal{-webkit-line-clamp:1}.tab-scroller-withfocuspreview{margin-top:48vh;contain:size style!important}.tab-scroller-withfocuspreview-padded-top-page{padding-top:0!important}.tab-scroller-withfocuspreview:focus-within .verticalSection:has(~ .verticalSection:focus-within){opacity:0}@supports (height:calc(3.125em + 2 * max(3em,4em))){.backdropContainer-withfocuspreview{left:initial;right:0;inset-inline-start:initial;inset-inline-end:0;-webkit-transform:scale(.7);transform:scale(.7);-webkit-transform-origin:top right;transform-origin:top right;opacity:initial}.backdropContainer-withfocuspreview.withBackdrop{background-color:#000;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 50%,black 100%),linear-gradient(to top,transparent 0%,black 50%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 50%,black 100%),linear-gradient(to top,transparent 0%,black 50%,black 100%);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}.backdropContainer-withfocuspreview-rtl.withBackdrop{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 50%,black 100%),linear-gradient(to top,transparent 0%,black 50%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 50%,black 100%),linear-gradient(to top,transparent 0%,black 50%,black 100%);-webkit-transform-origin:top left;transform-origin:top left}.backgroundContainer-withfocuspreview{z-index:-2}}.settingsContentContainer{max-width:initial;-webkit-padding-end:6%;padding-inline-end:6%}.listIconButton-autohide{display:none!important}.horizontalSection{-webkit-margin-end:1.5em;margin-inline-end:1.5em;-webkit-flex-shrink:0;flex-shrink:0}.wideSpotlightCard:focus>.cardBox-focustransform{-webkit-transform:scale(1.04,1.04)!important;transform:scale(1.04,1.04)!important}