Toggle Sidebar BHL

STÁTI

Tuten šablon jest používati jen SCP Wiki.

PROSITI NECHATI TUTEN STRÁNKA
BEZ POVOLENIE ZŘIEDITELE

---

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

• Does NOT work on Sigma-9. This ONLY functions with Black Highlighter.
• Use this component by EstrellaYoshte instead if you intend to use Sigma-9.
• If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.
  The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.

---

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

---

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
@media only screen and (min-width: 769px) {
 
    .mobile-top-bar, #top-bar .open-menu {
        display: block;
    }    
 
#header {
        -webkit-filter: initial !important;
        filter: initial !important;
    }
    #top-bar>div.mobile-top-bar>div.open-menu a,
    #top-bar>div.mobile-top-bar>div.open-menu a:hover {        
        position: fixed;
        display: block;
        font-family: var(--body-font);
        font-size: 2rem;
        text-align: center;
        top: 0.25em;
        left: 0.5em;
        z-index: 5;
        width: 1.125em;
        height: 1.125em;
        background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-light-color))) !important;
        color: var(--toggle-icon-color, rgb(var(--swatch-menutxt-dark-color))) !important;
        -webkit-border-radius: var(--toggle-roundness, 50%);
           -moz-border-radius: var(--toggle-roundness, 50%);
                border-radius: var(--toggle-roundness, 50%);
        border: var(--toggle-border-color, rgb(var(--swatch-menubg-medium-color))) var(--toggle-border-width, 0.25rem) solid;
        line-height: 1.1825em;
        text-decoration: none;
    }
 
    #top-bar>div.mobile-top-bar {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }
 
    #top-bar>div.mobile-top-bar ul {
        display: none;
    }
 
    #sidebar::-webkit-scrollbar {
        width: 0;
        -webkit-transition: width var(--sidebar-transition-timing);
        transition: width var(--sidebar-transition-timing);
    }
 
    #sidebar:target::-webkit-scrollbar {
        width: 0.5rem;
        -webkit-transition: width var(--sidebar-transition-timing);
        transition: width var(--sidebar-transition-timing);
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
        left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
        left: calc(var(--sidebar-width-on-desktop)*-1);
        z-index: 10;
        -webkit-transition: left var(--sidebar-transition-timing);
        -o-transition: left var(--sidebar-transition-timing);
        -moz-transition: left var(--sidebar-transition-timing);
        transition: left var(--sidebar-transition-timing);
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
 
    #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:target {
        left: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1rem;
        background-color: rgb(0, 0, 0, 0);
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border-left-width: 0px;
        border-right-width: 0px;
    }
 
    #side-bar .close-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
        -webkit-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        -o-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        -moz-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        margin-left: var(--sidebar-width-on-desktop);
        background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
        padding-right: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
    }
 
    #side-bar:target .close-menu {
        width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
        width: -moz-calc(100% - var(--sidebar-width-on-desktop));
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    #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;
        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: relative;
        margin: 0 auto;
        max-width: inherit;
    }
 
    #main-content {
        width: 100%;
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        width: 45.8rem;
        max-width: 45.8rem;
        margin: 0 auto;
    }
 
    @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;
        }
    }
}
}