BHL Collapsible Sidebar
STÁT
Tuto šablonu interně používá SCP Wiki.
Pokud chcete opravit chybu nebo provést jakékoliv změny,
poraďte se nejdříve s jedním z techniků stránky.
!!!VAROVÁNÍ!!!
Tento component je tak trochu experimentální a je možné, že nebude na pár prohlížečích fungovat.
Pro použití přidejte do kódu stránky následující:[[include :scp-cs:theme:black-highlighter-theme]]
[[include :scp-cs:component:collapsible-sidebar]]
@mediaonlyscreenand (min-width: 769px) {#content-wrap{display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction:normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction:normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack:center; width: -webkit-calc(100vw - (100vw - 100%)); width: -moz-calc(100vw - (100vw - 100%)); width: calc(100vw - (100vw - 100%)); min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem))); min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem))); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); -webkit-box-flex:2; -webkit-flex-grow:2; -moz-box-flex:2; -ms-flex-positive:2; flex-grow:2; height:auto; position: initial; margin:0auto; max-width:inherit; margin-left: -11em; margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem); }#main-content{width:100%; position: initial; max-height:100%; padding:2rem 1rem; width:45.8rem; max-width:45.8rem; margin:0auto; }#sidebar::-webkit-scrollbar{width:0; -webkit-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1); }#sidebar:hover::-webkit-scrollbar, #sidebar:active::-webkit-scrollbar, #sidebar:focus-within::-webkit-scrollbar { width: 0.5rem; -webkit-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1); }#side-bar{ -webkit-transform: translateX(-14.6rem); -moz-transform: translateX(-14.6rem); -ms-transform: translateX(-14.6rem); -o-transform: translateX(-14.6rem); transform: translateX(-14.6rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem)); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear; transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear, -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; grid-area: side-bar; -ms-grid-row:1; -ms-grid-column:1; padding-right:2rem; background-color:transparent; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 0); top:1rem; max-height:100vh; position: -webkit-sticky; position: sticky; left:0.5rem; padding-left:1rem; scrollbar-width:thin; -ms-scroll-chaining:none; overscroll-behavior: contain; scrollbar-color: rgba(170, 170, 170, 0) rgba(170, 170, 170, 0); }#side-bar::-webkit-scrollbar-track{width:0; background-color: rgba(170, 170, 170, 0); }#side-bar::-webkit-scrollbar-thumb{width:0; background-color: rgba(170, 170, 170, 0); }#side-bar:hover, #side-bar:active{background-color:white; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1); padding-right:0; margin-right:2rem; -webkit-transform: translateX(-0.5rem); -moz-transform: translateX(-0.5rem); -ms-transform: translateX(-0.5rem); -o-transform: translateX(-0.5rem); transform: translateX(-0.5rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); overflow-y:auto; overflow-x:hidden; scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1); }#side-bar:focus-within{background-color:white; background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1); padding-right:0; margin-right:2rem; -webkit-transform: translateX(-0.5rem); -moz-transform: translateX(-0.5rem); -ms-transform: translateX(-0.5rem); -o-transform: translateX(-0.5rem); transform: translateX(-0.5rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem)); overflow-y:auto; overflow-x:hidden; scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1); }#side-bar:hover::-webkit-scrollbar-track{width:0.5rem; background-color: rgba(252, 252, 252, 1); }#side-bar:hover::-webkit-scrollbar-thumb{width:0.375rem; background-color: rgba(170, 170, 170, 1); }#main-content::after{content: " "; position:fixed; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; width:1rem; height:100%; max-height:100%; top:0; -webkit-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); left:1rem; background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-repeat:no-repeat; background-position:centerleft1rem; background-attachment:fixed; -webkit-background-size:1rem 12.875rem; -moz-background-size:1rem 12.875rem; -o-background-size:1rem 12.875rem; background-size:1rem 12.875rem; pointer-events:none; }#side-bar:hover + #main-content::after, #side-bar:active + #main-content::after{left: -17em; left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft -17em; background-position:centerleft -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft calc(var(--sidebar-width-on-desktop, 17em) * -1); -webkit-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity:0; width:0rem; font-size:0em; }#side-bar:focus-within + #main-content::after{left: -17em; left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); left: calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft -17em; background-position:centerleft -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1); background-position:centerleft calc(var(--sidebar-width-on-desktop, 17em) * -1); -webkit-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity:0; width:0rem; font-size:0em; }#main-content::before{ --not-ie:absolute; content: " "; background-color:black; background-color: rgb(var(--black-monochrome, 0, 0, 0)); position:fixed; position: var(--not-ie); top:0; top: var(--final-header-height-on-desktop, 0); left:0; -webkit-transform: translateX(-12.6rem); -moz-transform: translateX(-12.6rem); -ms-transform: translateX(-12.6rem); -o-transform: translateX(-12.6rem); transform: translateX(-12.6rem); -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem)); width:17em; width: var(--sidebar-width-on-desktop, 17em); height: -webkit-calc(100% - 3rem); height: -moz-calc(100% - 3rem); height: calc(100% - 3rem); height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); -webkit-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity:0.5; pointer-events:none; z-index:9; margin-bottom:0; margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); }#side-bar:hover + #main-content::before, #side-bar:active + #main-content::before{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity:0; }#side-bar:focus-within + #main-content::before{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity:0; }#side-bar.side-block{margin-top:1rem; background-color: rgb(0,0,0,0); border-radius:0; border-left-width:0px; border-right-width:0px; }@supports (-ms-ime-align: auto) {#side-bar{overflow-y:hidden; overflow-x:hidden; -webkit-transform: translateX(-90%) !important; -moz-transform: translateX(-90%) !important; -ms-transform: translateX(-90%) !important; -o-transform: translateX(-90%) !important; transform: translateX(-90%) !important; }#side-bar:hover, #side-bar:active{overflow-y:auto; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -o-transform: translateX(0) !important; transform: translateX(0) !important; margin-left: -0.5rem; }#side-bar:focus-within{overflow-y:auto; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -o-transform: translateX(0) !important; transform: translateX(0) !important; margin-left: -0.5rem; }#main-content::before{left:1rem; -webkit-transform: translateX(-100%) !important; -moz-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; -o-transform: translateX(-100%) !important; transform: translateX(-100%) !important; }} } /*Thisbringsalltheitemsinthesidebarabittotheright (basicallyafixofafix) */ .menu-itema{padding-left:15px !important; }
revize stránky: 11, naposledy editováno: 27 Mar 2021 01:53