WhiteStyle Theme
評価: +4+x
blank.png

テーマ名: WhiteStyle Theme
作成者: teruteru_5teruteru_5, RuRItechRuRItech

このテーマを使用するには、次のコードをページに貼り付けてください。

[[include :pseudo-scp-jp:ruristyle]]

このテーマは、RuRItechRuRItech及びteruteru_5teruteru_5が自分の記事に使用するために作成したものであり、以下のコンポーネント及び既存CSSテーマから引用されたコードが含まれています:

ご利用は自己責任でお願いします。

使用例

分割線は5個のハイフン(-----)で作ることができ、何かの中でない限り(例えば引用ブロック)ページ全体に展開されます。この文章を区切る線が分割線です。


見出しは行の先頭に1から6個のプラス(+)を置くことで作れます。

これはタブです。

これは引用ブロックです。各行の先頭に大なり記号と半角スペース(> )を置くことで作れます。
追加の文章


分割線

入れ子になった引用ブロック

これは テーブルです
もう既に 作り方は
知っていますね
@import url("http://scp-jp.wikidot.com/component:fade-in/code/1");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
 
/* WhiteStyle Theme
by RuRItech & teruteru_5, 2022 */
 
.anom-bar-container{
    filter: sepia(80%) hue-rotate(180deg) saturate(60%);
}
.anom-bar-container *{
    font-family: 'Noto Sans JP', sans-serif !important;
}
blockquote,
div.blockquote {
    border: 2px double #444444 !important;
    background: #DDDDDD !important;
}
 
@media screen and (max-width:768px) {
    #side-bar {
        background: #FFFFFF;
    }
 
    .side-block {
        border-radius: 0px !important;
        background: rgba(255, 255, 255, .6);
    }
}
 
a {
    color: #2d2c81;
}
 
a.newpage {
    color: #4dAcA1;
}
 
.menu-item img {
    filter: grayscale(100%);
}
 
@media screen and (min-width:768px) {
    #top-bar>.top-bar {
        display: flex;
    }
 
    #top-bar>.top-bar>ul {
        display: flex;
        width: 80%;
        margin: 0 auto;
    }
 
    #top-bar>.top-bar>ul>li {
        flex: 1;
    }
}
 
.hovertip {
    background: #000000 !important;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif !important;
    border: none !important;
}
 
h1 {
    color: #000000;
    font-weight: 700;
}
 
::selection {
    color: #FFFFFF;
    background-color: #455765;
}
 
div#side-bar div.side-block {
    border: 2px solid #455765 !important;
}
 
div#side-bar div.side-block div.heading,
div#side-bar div.collapsible-block-unfolded-link,
div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link {
    color: #2e2930;
    border-color: #2e2930;
}
 
a.collapsible-block-link {
    font-weight: 700 !important
}
 
div#side-bar * {
    font-family: 'Noto Sans JP', sans-serif !important;
}
 
div.yui-navset div.yui-content {
    background: #c8c2c6;
}
 
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
    background: #dcd6d9;
    color: #485859;
    border: solid #a3a3a3;
}
 
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
    background: #6c848d;
    color: #485859;
}
 
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
    background: #393f4c;
    color: #e7e7eb;
    border: solid #243356;
}
 
div.page-rate-widget-box {
    border-radius: 0px !important;
}
 
div.page-rate-widget-box,
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel {
    background-color: #455765 !important;
    border: solid #455765 1px !important;
}
 
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    border: solid #455765 !important;
    border-width: 1px 0 !important;
}
 
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel a,
div.page-rate-widget-box span.cancel a:hover {
    color: #d3cfd9;
}
 
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    background-color: #455765 !important;
}
 
div.page-rate-widget-box span.rateup a,
div.page-rate-widget-box span.ratedown a {
    color: #d3cfd9 !important;
}
 
div.page-rate-widget-box span.cancel a:hover,
div.page-rate-widget-box span.rateup a:hover,
div.page-rate-widget-box span.ratedown a:hover {
    background: transparent !important;
    color: transparent !important;
}
 
.creditbutton {
    background-color: #455765 !important;
    color: #d3cfd9 !important;
}
 
#page-title {
    color: #000000;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
#login-status * {
    color: #4d4c61 !important;
}
 
#search-top-box-input {
    background-color: #000000 !important;
    color: #FFF !important;
    border-radius: 0px;
}
 
#search-top-box-form .btn {
    background: #000000 !important;
    color: #FFF !important;
    border-radius: 0px !important;
    border: none !important;
}
 
#top-bar ul li a {
    font-weight: 700;
}
 
#top-bar ul li a::before {
    content: "[";
}
 
#top-bar ul li.sfhover a {
    color: #4d4c61 !important;
}
 
#top-bar ul li a::after {
    content: "]";
}
 
.top-bar * {
    font-family: 'Noto Sans JP', sans-serif !important;
}
 
div#header h1 a span {
    font-size: 0px;
}
 
div#header h1 a:before {
    content: "SCP Foundation";
    color: #000000;
    text-shadow: transparent 0px 0px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
div#header h2 span {
    font-size: 0px;
    padding: 4px;
}
 
div#header h2:after {
    content: "Secure Contain Protect";
    font-weight: bold;
    color: #000000;
    text-shadow: transparent 0px 0px;
    padding: 19px 0;
    white-space: pre;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
div#container-wrap {
    background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-55-ztdp/unknown-3.png) top left repeat-x;
}
 
div#header {
    background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-56-39ro/1652613263733.png) 10px 40px no-repeat;
    background-position: 0.5em 3.3em;
    background-size: 100px 100px;
}
 
#page-content .wiki-content-table tr td {
    border: 1px #000 solid;
}
 
#page-content .wiki-content-table tr td {
    border: 1px #000 solid;
}
 
#page-content .table1 tr th {
    background-color: #D7EFE7 !important;
}
 
#page-content .table1 .st {
    color: #D7EFE7;
}
 
#page-content .table2 tr th {
    background-color: #D8ECF4;
}
 
#page-content .table2 .st {
    color: #D8ECF4;
}
 
#page-content .table3 tr th {
    background-color: #FDF6D7;
}
 
#page-content .table3 .st {
    color: #FDF6D7;
}
 
#page-content .table4 tr th {
    background-color: #FFDABF;
}
 
#page-content .table4 .st {
    color: #FFDABF;
}
 
.blockquote {
    display: block;
    color: #524348;
    background-color: #c8c2be;
    border: dashed 1px #544a47;
    padding: 0 1em;
    float: center;
    margin: 1em 40px;
}
 
.modal {
    padding: 15px;
    box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px;
    width: auto;
    margin: auto;
    background: #c0c6c9;
    border: 2px solid #5D5D5D;
}
.danger-diamond .newpage{
    color:transparent !important;
}
 
.smallmodal {
    padding: 15px;
    box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px;
    width: 75%;
    margin: auto;
    background: #c0c6c9;
    border: 2px solid #5D5D5D;
}
 
#page-content .table5 tr th {
    background-color: #F5D8E0;
}
 
#page-content .table5 .st {
    color: #F5D8E0;
}
 
#page-content .table6 tr th {
    background-color: rgba(146, 0, 255, 0.2);
}
 
#page-content .table6 .st {
    color: rgb(146, 0, 255);
}
 
.tableb .wiki-content-table {
    border-collapse: separate;
    border-spacing: 5px;
    padding-left: -100px;
}
 
/* Copy from Collapsible sidebar
https://scp-wiki.wikidot.com/component:collapsible-sidebar */
@media only screen and (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: 0 auto;
        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: 0 auto;
    }
 
    #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:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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("http://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
     background-repeat: no-repeat;
     background-position: center left 1rem;
     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: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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:
     left 300ms 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;
     }
    }
}
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License