第一出·初见

---

+ 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; 
        }
    }

著作信息

---

第一出·初见
作者：(sccount-deleted)

---

【上一出】

---

（众上，以杯盏碗器象征酒肆之景）

【山坡羊】岁次某年，官廨之内，振臂高呼拒斥夷狄之凌逼，遂成众矢之的，终日为宵小之辈所挤，竟至官场失怙。其人落魄无依，唯有借酒消愁，对月当歌，以抒胸中块垒。

（副末）“噫吁嚱，尔孺子何为复至斯地，于暗夜中独饮闷酒耶？（唱）嘻笑之余，颇有讽意，尔之昔日，荣光盖世，文采飞扬，才情横溢，仕途畅达，何等英姿！今朝，落拓草莽，潦倒市井，徒增人笑耳，哀哉笑矣！（叹）啧啧称奇，哀哉笑矣，而汝独坐暗角，对影自怜，何其悲也！”

（小生上）

【油葫芦】语落惊堂，目聚如炬，纷争之眼，皆注此一戏中人。

（小生）夫子何以杖履自矜，而欲凌驾于人也？余窃惑之。群议者，非无事而生非，即小人之长戚戚耳。吾辈当以酒为乐，岂可因杯中物而生嫌隙？酒酣耳热之际，言行或有失检，乃人之常情，何足深究？然则，君非但醉于酒，亦醉于言辞，此非真醉乎？

（副末）君之语，于余耳畔，仅作一噱耳。

（小生）唯君之悯，方为此般挑逗，事端微起，亦足戏言。

（副末）嗤！

（小生）与君此等，吾争何益？邂逅君颜，实损吾雅。别矣，不识。

（副末）罢了。（下）

语讫，其人遂杳，斯地复归宁寂。

（正旦手持裳步入）

（正旦）严冬时分，朔风凛冽，先生何缘立于道边？观君衣单，风雪侵肌，其凉可怖。余有外裳，可御风寒，愿披于君身，以融冬日之凛冽。相见即有缘，愿君得安。

（小生）君恩厚意，感佩于心间。然吾心安，无须劳君添衣暖。君之关怀，吾已铭感，何须外物显？君勿忧，吾身无恙，不值君挂念。

（正旦）君勿解裳，自当保暖。吾心已慰，君善自珍。

（小生）唉，罢矣，君之盛情，心实感之。（下）

【脱布衫】于是乎，两条迥异之径，行者各趋。冥冥中，于斯相遇，恍若前缘已定，非巧事也。

（正旦）天公不作美，风云变幻无常，心已归家，遗下衣物，权当赠予。此中情谊，便当“赠人玫瑰，手有余香”了。

（正旦）近期之世态，日渐纷扰，局势之变，如疾风骤雨，令人忧心忡忡。在这乱世洪流之中，一介微小之组织，其命运何其渺茫，宛如飘零之舟，于狂澜之中，未知其能撑度几何。

（正旦）予之所虑，究有何益？罢了罢了，守余本分，尽余职守，方能于心无愧。处此摇摇欲坠之团体，更应恪尽职守，以求心安，不以物喜，不以己悲，唯以职责为重，方能于乱世中，保有一份清明。

【前腔】世乱思茫茫，心难定。何处是归途，何处是归乡？泪满江河畔，愁云长。

（正旦）吁嗟乎！

【尾声】步履微光寻，心犹明。前路难测远，回望在心间。终有光微照，终有归时。

---

【下一出】