.replace { margin-left: var(--btn_)!important; } .dashboard aside.main.left { bottom: 0; } .dashboard .qtoggle { left: 0; bottom: 0; margin: 0!important; } nav.sidebar { --wrap: nowrap; --align: flex-start; position: fixed; bottom: 0; top: var(--btn); z-index: var(--z-4); height: calc(100% - var(--btn)); background-color: rgb(var(--base)); box-shadow: rgba(var(--base), var(--op-45)) var(--shdw); width: var(--btn); transition: var(--trans-size); overflow: hidden auto; margin-left: 0!important; padding-bottom: var(--btn); } nav.sidebar.left { left: 0; } nav.sidebar.right { right: 0; } nav.sidebar .icon { --w: var(--chip_); width: var(--w); transition: var(--trans-size); } nav.sidebar.open { width: fit-content; max-width: 85vw; } nav.sidebar.open .icon { --w: var(--chip); } nav.sidebar ul { height: max-content; width: 100%; --gap: 0; --dir: column; } nav.sidebar li { --justify: center; --wrap: nowrap; --align: flex-start; overflow: hidden; height: max-content; } nav.sidebar ul ul { max-height: 0; overflow: hidden; transform: scaleY(0); transform-origin: top; transition: var(--trans-base); } nav.sidebar li.open > ul { max-height: max-content; transform: scaleY(1); } nav.sidebar.open li > div { width: 100%; padding-right: var(--btn); } nav.sidebar.open li.has-submenu > div { padding-right: 0; } nav.sidebar.open li.has-submenu > ul { padding-left: var(--chip); } nav.sidebar .title { display: none; } nav.sidebar.open .title { display: block; white-space: nowrap; } nav.sidebar a { --justify: flex-start; } nav.sidebar .a { gap: .5rem; display:flex; width: 100%; justify-content: flex-start; align-items: center; min-height: var(--btn); padding: var(--padding); } nav.sidebar .toggle:not(.main) { display: none; width: var(--btn); height: var(--chipchip); } nav.sidebar.open .toggle { display: flex; } nav.sidebar .toggle.main { position: fixed; left: unset; bottom: 0; right: 0; width: var(--btn); height: var(--btn); z-index: var(--z-8); box-shadow: rgba(var(--base), var(--op-45)) var(--shdw); } /********************************************************************** FILTERS **********************************************************************/ /*** details.all-filters ALL FILTERS ***/ .all-filters { font-size: var(--txt-x-small); } .all-filters[open] { border: 2px solid rgb(var(--action-0)); padding: 0; border-radius: 0 0 var(--radius-outer) var(--radius-outer); } .all-filters[open] summary, .all-filters summary:hover { background-color: rgb(var(--action-0)); color: rgb(var(--action-contrast)); } .all-filters summary:hover::after { background-color: rgb(var(--action-contrast)); } .all-filters summary { width: 100%; } .all-filters >.row.row { padding: 0 .75rem; width: var(--content); position: relative; } .all-filters > .row > .label, .all-filters > .row > .row > .label { font-family: var(--heading); font-weight: var(--fw-h-bold); text-transform: uppercase; } .all-filters > .row > .label { width: 20%; } .all-filters > .row > .row > .label { white-space: nowrap; } .all-filters button, .all-filters .btn + label { width: var(--chipchip); min-height: var(--chipchip); padding: 0; } .all-filters button, .all-filters .btn + label { position: unset; } .all-filters button .label, .all-filters .row:has(> .btn:not(:checked) + label:hover) :checked + label .label, .btn + label .label { position: absolute; top: 2rem; left: 1rem; width: max-content; white-space: nowrap; opacity: 0; z-index: var(--z-4); } .all-filters .radio-options.order > .row { position: relative; padding-bottom: 2rem; } .all-filters .radio-options .row .btn + label .label { bottom: 0; top: unset; left: 0; height: max-content; } .all-filters button:hover .label, .btn:checked + label .label, .btn + label:hover .label { opacity: 1; } .all-filters .radio-options.order > .row { max-width: 49%; } .all-filters .radio-options.order { margin-top: 1rem; } .all-filters .filters >.row, .all-filters .filters select { width: max-content; } /********************************************************************** SEARCH **********************************************************************/ .search-container:not(.open) input[type=search], .search-container:not(.open) .clear-search { transform: scaleX(0); transform-origin: left; width: 0; padding: 0; transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); } .search-container button { padding: .5rem; } .search-container .icon { --w: 1.5rem; } .search-container.open input[type=search], .search-container.open .clear-search { transform: scaleX(1); transform-origin: left; transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); } .all-filters > .search, input[type=search], .search-container { width: 100%; } section.main-actions.main-actions { padding: 0; position:absolute; left: var(--offScreen); } .dashboard main>footer { padding: 0; margin: 0; position: absolute; left: var(--offScreen); } .item .select-item-label { width: 100%; height: 100%; aspect-ratio: 1; }