官僚部門 - SCP-JPサンドボックスⅢ

官僚部門

SCP-JP SB3 » ponhiroの砂箱 » 官僚部門

クレジット

タイトル: SCP-XXXX-JP - 官僚部門
著者: ©︎ponhiro
作成年: 2023

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        bottom: 0.5em;
        left: 0.5em;
        z-index: 15;
        font-family: san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
        text-decoration: none!important;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
 
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
 
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        z-index: -1;
    }
}

▷ コードを表示 ◁

△ コードを隠す △

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma-9
 * [2021 Wikidot Component]
 * By Lt Flops (CC BY-SA 3.0)
 * Forked from:
   * Penumbra Theme by EstrellaYoshte
 * Also based on:
   * Centered Header BHL by Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7522555-167-g69b/logo.svg");
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 10.55em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP財団");
}
 
 #header h2::before{
     content: var(--header-subtitle, "確保 - 収容 - 保護");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 0;
}
 
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-size: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}