被放逐者的精装书

[[iftags +组件]]

被放逐者的精装书是由[[*user EstrellaYoshte]]制作的自定义 CSS 元组件，并由其自行​​更新。

此组件旨在“重置”黑色标记笔和护封版式的一些特殊 CSS，从而减轻版式开发的负担。

> @@[[include :scp-wiki-cn:wanderers:component:hardcover]]@@

使用此组件的页面示例：
* [[[https://wanderers-library.wikidot.com/component:cafe|咖啡店版式]]]
* [[[https://wanderers-library.wikidot.com/anthology-2023-hub|2023文选中心页]]]

@@ @@

[[code type="CSS"]]
/*------- RESET -------*/
div#extra-div-1,
div#extrac-div-1, div#extrac-div-1 span {
    all: unset;
}

#container {
    grid-template-columns: minmax(0,1fr);
}

#header, #top-bar {
    max-width: 100%;
}
#header h1, #header h1 a, #header h1 a::before, #header h1 a::after {
    height: auto;
}

/*-------------------------------*/
/*------- REFORMAT -------*/
/*-------------------------------*/
:root {
    --gradient-topmenu: linear-gradient( to bottom, rgb(var(--swatch-topmenu-border-color)) 0, rgb(var(--swatch-topmenu-bg-color)) 0.125rem, rgb(var(--swatch-topmenu-bg-color)) calc(100% - 0.125rem), rgb(var(--swatch-topmenu-border-color)) 100% );
    --topbar-height-on-desktop: 1.95rem;
    --header-height-on-mobile: 13.5rem;
    --topbar-height-on-mobile: 2.675rem;
    --sidebar-width-on-mobile: calc(var(--base-font-size) * (266 / 12.8));

    --top-bar-link-scalar: 1;
}

body {
    background: unset;
    background-color: rgb(Var(--swatch-background));
}


/*------- Header -------*/
#header {
    width: 100%;
    background-image: var(--gradient-header);
    background-size: cover;
    background-position: center;

    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr min(90%, var(--header-width-on-desktop)) 1fr;

    height: var(--final-header-height-on-desktop);
}

#login-status {
    position: relative;
    inset: 0;
    margin: 0;
    translate: unset;
    height: 2.325rem;
    grid-row: 1/2;
    grid-column: 2/3;
    align-self: center;
    justify-self: start;
    max-width: max-content;
    margin-inline-end: calc(var(--search-height) + 0.5rem);
}

#search-top-box {
    box-shadow: 0 0 0 0 rgb(var(--search-focus-outline-color));
    will-change: unset;
    position: relative;
    inset: initial;
    grid-row: 1/2;
    grid-column: 2/3;
    translate: none;
    align-self: center;
    justify-self: end;
}

#header::before {
    position: static; inset: initial;
    height: 100%;
    grid-row: 1/3;
    grid-column: 1/4;
}
#header h1 {
    position: static;
    grid-row: 1/3;
    grid-column: 2/3;
}
#header h1 a {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: max-content;
    height: auto;
}
#header > h1>a > span,
#header h1 a::before,
#header h1 a::after {
    position: static;
    inset: unset;
    grid-column: 1;
    grid-row: 1;
    height: auto;
}

#header div#top-bar {
    width: 100%;
    display: flex;
    position: static;
    margin: 0;
    grid-row: 3/4;
    grid-column: 1/4;
    background: var(--gradient-topmenu);
}

#top-bar .top-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#header div[class*=top-bar]>ul>li>a {
    font-size: calc(1em * var(--top-bar-link-scalar));
}


/*------- Topbar -------*/

#header div[class*=top-bar]>ul>li ul>li>ul::before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%);
    top: 1rem;
    width: 5.75em;
    height: min(calc(100% - 1rem), 57.5%);
}

/*------- Sidebar -------*/

#side-bar {
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-ufld-link-hover-color);
    box-sizing: border-box;
}

/* experimental :has() feature */

@media only screen and (min-width: 56.25rem) {

#side-bar:has(:where(:not(.close-menu)):hover) {
    left: 0;

    & ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
    & .close-menu::before, & .close-menu::after { opacity: 0; }
}

}

#side-bar .side-block {
    margin-top: 0;
}

#side-bar div.menu-item>p {
    height: auto;
}
#side-bar div.menu-item :is(.text, a) {
    height: auto;
    box-sizing: border-box;
    line-height: 1.375;
}

#side-bar div.sub-item :is(.text, a)  {
    padding-left: .75em;
}
#side-bar div.sub-item :is(.text, a)::after {
    position: static;
    inset: initial;
    order: -1;
}

#side-bar div.menu-item .new-page-box {
    grid: unset;
    justify-content: initial;
}

/*------- Content Body -------*/

#content-wrap {
    margin-top: 0!important;
}

#main-content {
    margin: 0 auto;
    padding: 1.25rem;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
}

div:is(.image-block,.scp-image-block) {
    display: grid;
    flex-flow: unset;
    min-width: 15%;
}
div:is(.image-block,.scp-image-block) :is(.image-caption,.scp-image-caption, img) {
    width: 100%!important;
    box-sizing: border-box;
}

#page-content table.wiki-content-table th {
    text-align: center;
}

.hovertip { background-color: transparent!important; }
.hovertip::before { background-color: rgb(var(--hoverblock-bg)); }

/*------- Bottom -------*/

div#page-options-bottom, div#page-options-bottom-2 {
    width: auto;
    max-width: initial;
}

div.page-watch-options a:hover, div.page-watch-options a:active {
    color: rgb(var(--swatch-text-general));
}

table.page-files tbody tr th, table.page-files thead tr th,
table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7))::before {
    color: rgb(var(--swatch-text-general));
}

table.page-files tr>td>a:not(.btn):is(:hover,:active,:focus,:focus-within),
#action-area h1+h2~ul li a:is(:hover,:active,:focus,:focus-within) {
    color: rgb(var(--swatch-text-general));
}

/*------- Mobile Query -------*/
@media only screen and (max-width: 56.25rem) {
    #header {
        height: var(--final-header-height-on-mobile);
        top: calc((var(--header-height-on-mobile) + .125rem) * -1);
    }
    #header div[class*=top-bar]>ul>li>a {
        font-size: calc(min(calc(0.425em + 1.5vw), 1.175em) * var(--top-bar-link-scalar));
    }
    #header div[class*=top-bar]>ul>li ul>li { min-height: 100%; }
    #login-status { justify-self: end; }

    #header div[class*=top-bar]>ul>li ul>li>ul::before { display: none; }
}
[[/code]]

[[/iftags]]

[[module CSS]]
@import url(https://wanderers-library.wdfiles.com/local--code/component%3Ahardcover/1);
[[/module]]