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
Není-li uvedeno jinak, obsah této stránky je pod licencí Creative Commons Attribution-ShareAlike 3.0 License
Klikněte zde pro editaci stránky.
Klikněte zde pro přepnutí na editaci jednotlivých sekcí stránky (jeli to možné). Pokud bude tato funkce dostupná, u nadpisů se zobrazí odkaz pro editaci.
Přidat obsah, aniž by se editovala celá stránka
Podívat se, jak se stránka vyvíjela v minulosti.
Pokud chceš diskutovat o obsahu této stránky, tak je toto ten nejlepší způsob, jak tomu tak učinit.
Zobraz a uprav připnuté soubory k této stránce.
Několik užitečných nástrojů pro správu vašich Stránek.
Změnit název (také URL adresu, dodatečně i kategorii) stránky.
Zobrazení (wiki) zdrojového kódu stránky bez možnosti editace.
Náled/nastavení nadřazené stránky (využito při vytváření cest a struktury stránky).
Notify administrators if there is objectionable content in this page.
Něco nefunguje, jak má? Zjisti, co se s tím dá dělat.
Základní Wikidot.com dokumentace a sekce nápověd.
Podmínky Užití Wikidot.com - co můžeš a nemůžeš dělat apod.
Zásady Ochrany Osobních Údajů Wikidot.com

AltStyle によって変換されたページ (->オリジナル) /