dashboard-ui/modules/navdrawer/navdrawer.css
2023-08-31 15:30:17 +02:00

1 line
8.1 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 .4s ease-out,-webkit-transform .4s ease-out;transition:width .4s ease-out,transform .4s ease-out}.drawer-open{box-shadow:.14em 0 .84em rgba(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 .38s ease-out normal both;animation:drawer-backdrop-fadein .38s ease-out normal both;overflow:hidden;overscroll-behavior:contain}.drawer-backdrop-fadeout{-webkit-animation:drawer-backdrop-fadeout .38s ease-out normal both;animation:drawer-backdrop-fadeout .38s ease-out normal both}@-webkit-keyframes drawer-backdrop-fadein{from{opacity:0}to{opacity:.5}}@keyframes drawer-backdrop-fadein{from{opacity:0}to{opacity:.5}}@-webkit-keyframes drawer-backdrop-fadeout{from{opacity:.5}to{opacity:0}}@keyframes drawer-backdrop-fadeout{from{opacity:.5}to{opacity:0}}.navDrawerCollapseSection{margin:0 0 .25em!important}.navDrawerCollapseButton{margin:0!important;border:0!important;padding:.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:.7em!important;padding-inline-start:.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:.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:.2em!important;margin-inline-start:.2em!important;-webkit-margin-end:0!important;margin-inline-end:0!important;-webkit-flex-grow:0;flex-grow:0}.navDrawerLogo-tv{-webkit-margin-start:.5em!important;margin-inline-start:.5em!important}.navDrawerHeader{margin:.75em 0;position:relative}.navDrawerHeader-tv{margin-top:.5em}.btnNavDrawerLogo{margin:0!important;padding:0!important}.btnPinNavDrawer{font-size:84%!important;margin:0 -.35em 0 0!important}.btnPinNavDrawer-iconpin{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.navMenuOptionIcon{-webkit-margin-end:.7em;margin-inline-end:.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:.3em!important;padding-inline-start:.3em!important;margin:.75em 0 .15em;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:.19em .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:.85!important}.mainDrawer-mini.darkContentContainer{--theme-text-color-alpha:.85}.mainDrawer-mini,[dir=rtl]:root .mainDrawer-mini{width:10ch}.mainDrawer-mini .navDrawerHeader{margin:0!important;padding:.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 .8em}.mainDrawer-mini .navDrawerListItemImageContainer-padded .listItemImage{border-radius:100em}.mainDrawer-mini .listItem{box-sizing:border-box;width:100%}.mainDrawer-mini .listItem-content{padding: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:.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:.35em;right:0;inset-inline-start:.25em;inset-inline-end:0;width:1.25em}.txtNavDrawerSearch{border-radius:.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}}