423 lines
9.7 KiB
CSS
423 lines
9.7 KiB
CSS
:root {
|
|
--main-drawer-transform: translateX(-100%);
|
|
}
|
|
[dir="rtl"]:root {
|
|
--main-drawer-transform: translateX(100%);
|
|
}
|
|
.mainDrawer {
|
|
padding-top: calc(1em + env(safe-area-inset-top, 0));
|
|
-webkit-padding-start: 1.8ch;
|
|
padding-inline-start: 1.8ch;
|
|
-webkit-padding-start: calc(1.8ch + env(safe-area-inset-left, 0));
|
|
padding-inline-start: calc(1.8ch + env(safe-area-inset-left, 0));
|
|
-webkit-padding-end: 1.8ch;
|
|
padding-inline-end: 1.8ch;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
overscroll-behavior-y: contain;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: initial;
|
|
bottom: 0;
|
|
contain: strict;
|
|
z-index: 1099;
|
|
width: 33.15ch;
|
|
width: clamp(33.15ch, 30%, 45.5ch);
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
-webkit-transform: var(--main-drawer-transform);
|
|
transform: var(--main-drawer-transform);
|
|
box-sizing: border-box;
|
|
will-change: transform, width;
|
|
scrollbar-gutter: stable;
|
|
transition:
|
|
width 340ms ease-out,
|
|
-webkit-transform 340ms ease-out;
|
|
transition:
|
|
width 340ms ease-out,
|
|
transform 340ms ease-out;
|
|
}
|
|
[dir="rtl"]:root .mainDrawer {
|
|
-webkit-padding-start: calc(1.8ch + env(safe-area-inset-right, 0));
|
|
padding-inline-start: calc(1.8ch + env(safe-area-inset-right, 0));
|
|
}
|
|
.mainDrawer.scrollY {
|
|
overflow-y: overlay;
|
|
}
|
|
@media all and (pointer: fine) {
|
|
.mainDrawer {
|
|
width: 32ch;
|
|
width: calc(32ch + env(safe-area-inset-left, 0));
|
|
}
|
|
[dir="rtl"]:root .mainDrawer {
|
|
width: calc(32ch + env(safe-area-inset-right, 0));
|
|
}
|
|
.mainDrawerScrollSlider-autofont {
|
|
font-size: 96%;
|
|
}
|
|
}
|
|
@media not all and (pointer: fine) {
|
|
.mainDrawer:not(.drawer-docked) {
|
|
width: min(80%, 35.5ch);
|
|
}
|
|
}
|
|
.mainDrawer-tv {
|
|
width: 20%;
|
|
transition:
|
|
width 0.4s ease-out,
|
|
-webkit-transform 0.4s ease-out;
|
|
transition:
|
|
width 0.4s ease-out,
|
|
transform 0.4s ease-out;
|
|
}
|
|
.drawer-open {
|
|
box-shadow: 0.14em 0 0.84em rgba(0, 0, 0, 0.4);
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
.drawer-opening {
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
-webkit-transform: var(--main-drawer-transform);
|
|
transform: var(--main-drawer-transform);
|
|
}
|
|
.drawer-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
background-color: #000;
|
|
opacity: 0;
|
|
z-index: 1098;
|
|
will-change: opacity;
|
|
contain: strict;
|
|
-webkit-animation: drawer-backdrop-fadein 0.38s ease-out normal both;
|
|
animation: drawer-backdrop-fadein 0.38s ease-out normal both;
|
|
overflow: hidden;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.drawer-backdrop-fadeout {
|
|
-webkit-animation: drawer-backdrop-fadeout 0.38s ease-out normal both;
|
|
animation: drawer-backdrop-fadeout 0.38s ease-out normal both;
|
|
}
|
|
@-webkit-keyframes drawer-backdrop-fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
@keyframes drawer-backdrop-fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
@-webkit-keyframes drawer-backdrop-fadeout {
|
|
from {
|
|
opacity: 0.5;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes drawer-backdrop-fadeout {
|
|
from {
|
|
opacity: 0.5;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.navDrawerCollapseSection {
|
|
margin: 0 0 0.25em !important;
|
|
}
|
|
.navDrawerCollapseButton {
|
|
margin: 0 !important;
|
|
border: 0 !important;
|
|
padding: 0.25em 0 !important;
|
|
}
|
|
.navDrawerCollapseButton.emby-collapsible-button-collapsed::after {
|
|
display: none;
|
|
}
|
|
.navDrawerCollapseContent {
|
|
border: 0 !important;
|
|
padding: 0 1em !important;
|
|
margin: 0 -1em !important;
|
|
}
|
|
.navMenuOption {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
font-weight: 400 !important;
|
|
margin: 0 !important;
|
|
}
|
|
.navMenuOption .listItem-content {
|
|
-webkit-padding-start: 0.7em !important;
|
|
padding-inline-start: 0.7em !important;
|
|
}
|
|
.navMenuOption.emby-button-focusscale:focus {
|
|
-webkit-transform: scale(1.025);
|
|
transform: scale(1.025);
|
|
}
|
|
.navMenuOption-selected .listItemBodyText {
|
|
font-weight: 700 !important;
|
|
}
|
|
.navMenuOption-selected .listItem-content::before {
|
|
position: absolute;
|
|
content: " ";
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 0.6em;
|
|
}
|
|
.navMenuOption:hover .listItem-content::before {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.navDrawerLogo {
|
|
width: 100%;
|
|
background-size: contain;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
-webkit-margin-start: 0.2em !important;
|
|
margin-inline-start: 0.2em !important;
|
|
-webkit-margin-end: 0 !important;
|
|
margin-inline-end: 0 !important;
|
|
-webkit-flex-grow: 0;
|
|
flex-grow: 0;
|
|
}
|
|
.navDrawerLogo-tv {
|
|
-webkit-margin-start: 0.5em !important;
|
|
margin-inline-start: 0.5em !important;
|
|
}
|
|
.navDrawerHeader {
|
|
margin: 0.75em 0;
|
|
position: relative;
|
|
}
|
|
.navDrawerHeader-tv {
|
|
margin-top: 0.5em;
|
|
}
|
|
.btnNavDrawerLogo {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.btnPinNavDrawer {
|
|
font-size: 84% !important;
|
|
margin: 0 -0.35em 0 0 !important;
|
|
}
|
|
.btnPinNavDrawer-iconpin {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
.navMenuOptionIcon {
|
|
-webkit-margin-end: 0.7em;
|
|
margin-inline-end: 0.7em;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
font-size: 1.7em;
|
|
}
|
|
.navMenuOptionText {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.navMenuHeader {
|
|
-webkit-padding-start: 0.3em !important;
|
|
padding-inline-start: 0.3em !important;
|
|
margin: 0.25em 0.25em 0.25em;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
-webkit-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.navDrawerCollapseIcon {
|
|
inset-inline-end: 0 !important;
|
|
}
|
|
.navDrawerListItemImageContainer {
|
|
width: 1.9em !important;
|
|
height: 1.9em !important;
|
|
}
|
|
.navDrawerListItemImageContainer-tv {
|
|
border-radius: 100em;
|
|
background-color: transparent !important;
|
|
}
|
|
.navDrawerListItemImageContainer-transparent {
|
|
background-color: transparent !important;
|
|
}
|
|
.navDrawerListItemBody {
|
|
padding: 0.19em 0.65em !important;
|
|
}
|
|
@media all and (pointer: fine) {
|
|
.navDrawerListItemIcon {
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
.navDrawerListItemIcon-tv {
|
|
font-size: 120%;
|
|
}
|
|
@media all and (pointer: fine) {
|
|
.mainDrawer .navDrawerListItemBody {
|
|
min-height: 2.3em;
|
|
}
|
|
}
|
|
.mainDrawer:not(.drawer-docked) .navDrawerItemsSection {
|
|
display: none !important;
|
|
}
|
|
@media all and (min-width: 60em) {
|
|
.mainDrawer-mini {
|
|
-webkit-padding-start: 1.2ch;
|
|
padding-inline-start: 1.2ch;
|
|
-webkit-padding-end: 1.2ch;
|
|
padding-inline-end: 1.2ch;
|
|
padding-top: 5em;
|
|
-webkit-border-end: 0 !important;
|
|
border-inline-end: 0 !important;
|
|
--theme-text-color-alpha: 0.85 !important;
|
|
}
|
|
.mainDrawer-mini.darkContentContainer {
|
|
--theme-text-color-alpha: 0.85;
|
|
}
|
|
.mainDrawer-mini,
|
|
[dir="rtl"]:root .mainDrawer-mini {
|
|
width: 10ch;
|
|
}
|
|
.mainDrawer-mini .navDrawerHeader {
|
|
margin: 0 !important;
|
|
padding: 0.75em 0;
|
|
height: 4em;
|
|
box-sizing: border-box;
|
|
}
|
|
.mainDrawer-mini .navDrawerListItemBody {
|
|
padding: 0 !important;
|
|
visibility: hidden;
|
|
}
|
|
.mainDrawer-mini .navMenuHeader,
|
|
.mainDrawer-mini .navDrawerCollapseButton,
|
|
.mainDrawer-mini .navDrawerItemsSection {
|
|
display: none !important;
|
|
}
|
|
.mainDrawer-mini .navDrawerHeader,
|
|
.mainDrawer-mini .navDrawerListItemBody,
|
|
.mainDrawer-mini .navDrawerItemsSection {
|
|
display: none !important;
|
|
}
|
|
.mainDrawer-mini .navDrawerListItemImageContainer {
|
|
width: 6.39ch !important;
|
|
height: 2.8em !important;
|
|
}
|
|
.mainDrawer-mini .navDrawerListItemImageContainer-padded {
|
|
box-sizing: border-box;
|
|
padding: 0 0.8em;
|
|
}
|
|
.mainDrawer-mini .navDrawerListItemImageContainer-padded .listItemImage {
|
|
border-radius: 100em;
|
|
}
|
|
.mainDrawer-mini .listItem {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
.mainDrawer-mini .listItem-content {
|
|
padding: 0 0.42em !important;
|
|
box-sizing: border-box;
|
|
min-width: 100%;
|
|
width: auto;
|
|
}
|
|
.mainDrawer-mini .listItemBody {
|
|
-webkit-flex-grow: 0;
|
|
flex-grow: 0;
|
|
}
|
|
.listItem[data-id="btnExpandMiniDrawer"] {
|
|
margin-top: -3.5em !important;
|
|
}
|
|
.mainDrawer:not(.mainDrawer-mini) .listItem[data-id="btnExpandMiniDrawer"] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media not all and (min-width: 60em) {
|
|
.btnPinNavDrawer {
|
|
display: none !important;
|
|
}
|
|
.listItem[data-id="btnExpandMiniDrawer"] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.navDrawerItemsContainer {
|
|
container-name: initial !important;
|
|
container-type: initial !important;
|
|
}
|
|
@media not all and (min-width: 50em) {
|
|
.drawer-search {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.navDrawerSearchFieldContainer {
|
|
margin: 0.5em 0;
|
|
position: relative;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
}
|
|
.navDrawerSearchFieldContainer label {
|
|
display: none;
|
|
}
|
|
.navDrawerSearchIcon {
|
|
position: absolute;
|
|
font-size: 160%;
|
|
left: 0.35em;
|
|
right: 0;
|
|
inset-inline-start: 0.25em;
|
|
inset-inline-end: 0;
|
|
width: 1.25em;
|
|
}
|
|
.txtNavDrawerSearch {
|
|
border-radius: 0.6em;
|
|
-webkit-padding-start: 2em;
|
|
padding-inline-start: 2em;
|
|
}
|
|
@media all and (pointer: fine) {
|
|
.drawer-docked:not(.mainDrawer-mini) .drawer-search {
|
|
display: none !important;
|
|
}
|
|
.mainDrawer-mini .navDrawerSearchFieldContainer,
|
|
.mainDrawer:not(.drawer-docked) .navDrawerSearchFieldContainer {
|
|
display: none !important;
|
|
}
|
|
.drawer-docked:not(.mainDrawer-mini) ~ .page .searchFields {
|
|
margin-bottom: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
@media all and (min-width: 60em) {
|
|
.drawer-docked:not(.mainDrawer-mini) ~ .page .searchInputContainer {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
@media not all and (pointer: fine) {
|
|
.navDrawerSearchFieldContainer {
|
|
display: none !important;
|
|
}
|
|
}
|