追憶のアディトゥム

+ コンポーネントのコードを表示

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
    #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: 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 {
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: 45.75rem;
     width: var(--body-width-on-desktop, 45.75rem);
     max-width: 45.75rem;
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
    }
 
    #page-content {
     max-width: min(90vw, 45.75rem);
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #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);
     border: none;
     border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
     width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     grid-area: side-bar;
     padding-right: 2rem;
     background-color: transparent;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
     top: 0;
     max-height: 100vh;
     position: -webkit-sticky;
     position: sticky;
     left: 0;
     padding-left: 0.5rem;
     direction: rtl;
     scrollbar-width: thin;
     -ms-scroll-chaining: none;
         overscroll-behavior: contain;
     overflow-y: scroll;
     scrollbar-color:
     rgba(170, 170, 170, 0)  /* Thumb */
     rgba(252, 252, 252, 0); /* Track */
     scrollbar-color:
     rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
     rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
    }
 
    #side-bar::-webkit-scrollbar-track {
     background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    }
 
    #side-bar::-webkit-scrollbar,
    #side-bar::-webkit-scrollbar-thumb,
    #side-bar::-webkit-scrollbar-corner {
     width: 0.5rem;
     border-right-width: -webkit-calc(100vw + 100vh);
     border-right-width: calc(100vw + 100vh);
     border-right-style: inset;
     border-color: inherit;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 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("https://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(--swatch-alternate-color, 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: 1em;
     padding-left: 0.25em;
     background-color: rgb(0, 0, 0, 0);
     -webkit-border-radius: 0;
        -moz-border-radius: 0;
             border-radius: 0;
     border-left-width: 0rem;
     border-right-width: 0rem;
     direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
     direction: ltr;
    }
 
    @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;
     }
    }
    /* Print Friendly Formatting by Estrella */
    body.print-body {
     --sidebar-width-on-desktop: 0;
    }
    body.print-body #main-content::before,
    body.print-body #main-content::after {
     display: none;
    }
}

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 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;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            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);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            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;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }

In Memoria, Adytum
─追憶のアディトゥム─

⁵…そしてイオンは、かつてキティラなる街の門であった遺址に立たれた。彼の名によりて、さきに鋳造されし荒墟は打ち砕かれた。彼は周囲を見渡し、在りし日に彼が解放を願ったものたちの苦しみを見て、彼らの殊勲が圧し潰されてきたことを、その手によりて悟られた。

イオンは彼らを見、そして涙を流された。

- 陥落の書 13:5; ソロモナリ 《ヴァルカザロン》

╡サーキシズム-ハブ╞

序幕: 初めに言葉があったIn Principio Erat Verbum

財団脅威認識: [ | | | | ]

• SCP-2095: ギャロス包囲戦 by Metaphysician
• SCP-2480: 未完の儀式 by Metaphysician
• Karcist Halyna Ieva, or The Mother Who Demands One's Toes by naepicfael & TheMightyMcB
• Of Lovataar and the Throne by MalyceGraves

---

第一幕: 青白き馬を見よEt Ecce Equus Pallidus

財団脅威認識: [█ | | | ]

正典 - メインストーリー

• 瘟疫 - SCP-3862: The Gentleman Karcist by MalyceGraves
• 戦争 - Another Soul Joins the Halkost by TheMightyMcB
• 飢餓 - SCP-4786: The Mouth that Hungers by MalyceGraves
• 死没 - Case Study 03: The Darkwater Lodge by MalyceGraves

• Et Ecce Equus Pallidus by MalyceGraves

補助 - 補足ストーリー

• SCP-4476: La Famille Natau by MalyceGraves
• SCP-2408: オロクの没地 by Metaphysician
• SCP-4197: Hollow by Dyslexion
• Lance and Bernard's Culinary Capers by Dyslexion
• Mornings Are Sometimes Like That by MalyceGraves

結末 - 最終シーン

• 世界の皇 - SCP-3911: The Thorn of God by MalyceGraves

---

第二幕: その手に勝利をExierunt ut Vinceret

財団脅威認識: [██ | | ]

正典 - メインストーリー

• 瘟疫 - SCP-5862: Faulkner's Wake by MalyceGraves & cybersqyd
• 死没 - SCP-5038: La Rue Macabre is CLOSED by MalyceGraves and plaidypus

補助 - 補足ストーリー

• SCP-5207: Fit for the King by MalyceGraves & DrAkimoto
• SCP-5407: "нектар" by DrAkimoto
• Re: 5862 (補足記事) by MalyceGraves & cybersqyd

結末 - 最終シーン

---

第三幕: 世界の征服In Conquestum Mundi

財団脅威認識: [███ | ]

正典 - メインストーリー

補助 - 補足ストーリー

結末 - 最終シーン

---

第四幕: 画して世界は燃え落ちぬEt Mundum Incendio

財団脅威認識: [█████]

---

著者ポスト

現在の著者陣:

1. MalyceGraves - {Author Page}
2. DrAkimoto - {Author Page}
3. TheMightyMcB - {Author Page}
4. n_aepic_fael does not match any existing user name - {Author Page}
5. Dyslexion - {Author Page}
6. cybersqyd - {Author Page}

氏の素晴らしき作品無しにこれを成し遂げることはできなかったでしょう - Metaphysician - {Author Page}

This canon represents months and months of work, planning, and execution.

あなたも『追憶のアディトゥム』で執筆しませんか？

覚えておくべきは、これはまごうことなきサーキックであるということです。カノンはMetaphysicianの執筆したサーキックロアの上に組み上げられています。ただ、”サーキック”でタグ付けされたものすべてを含むわけではありません。このカノンは喜劇的にも健全にもなり得ません。もちろん、そうしたものもここに存在できますが、このカノン(の核心)は復讐 ─ 幾千年にも渡り、自らの方が”良い”と考えた者たちの手により齎されてきた苦痛と死の報復にまつわる物語です。

各幕は、何が起こっているかを財団がどれだけ認識できているかによって分割されています。そして、各幕はその幕題を冠するTaleと、最終となる"Imperator Mundi"の記事の2つによって締められます。

”補助”のセクションは、メインストーリーに属するわけではないものの、カノン自体には含まれている記事用です。ストーリーボードの追加をお望みでしたら、気兼ねなく私までご連絡ください。

お望みならテーマもありますよ。

---

オマケ: 各章解説

下書きから発掘したもの。

序幕: In Principio Erat Verbum
これぞサイクルが始まる前の世界。”肉の戦争”の概観だ。

第一幕: Et Ecce Equus Pallidus
舞台は整った。世界はイオンを掲げるものたちについてほとんど認知していない。この幕では、すべてのピースがボード上に配置される。

第二幕: Eros Porro, ut Vincere
ピースが行動を開始し、財団が注目を向け始める。ソーンの獲得、そしてイオンの復活の完成形。この幕では、財団は世界全体のサーキックの違反事象を封じ込めようと足掻き、ヴェールは弱体化する。

第三幕: In Conquestum Mundi
イオンは征服へ駆け抜ける。ヴェールは千々に裂け、世界はイオンを止めるべく結集する。壊れた神の教会はこれほどに大きな脅威に立ち向かう算段がついておらず、完全に破壊されてしまう。財団は世界で唯一の希望だ。

結局のところ、それでは役不足だ。この幕ではイオンが勝ち誇り、征服が完了するからである。

第四幕: Et Mundum Incendio
情報未公開。座して待たれよ。

---

http://scp-wiki.wikidot.com/memoria-adytum
http://ko.scp-wiki.net/memoria-adytum
http://scp-wiki-cn.wikidot.com/memoria-adytum
http://firedawnfolder.wikidot.com/memoria-adytum