平行 经典版头

[[iftags +组件]]

[[module CSS]]
@import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1");

#page-title {
    display: none;
}
[[/module]]

[[div class="meta-title"]]
{{##rgb(var(--basalt-dark-element-color))|@@//@@##}}平行 经典版头
[[/div]]

[[>]]
[[module rate]]
[[/>]]

[[=image https://ah-sandbox.wikidot.com/local--files/theme:parallel/parallel-widget.svg width="80%"]]

+++ 使用方法

将以下代码置于一个[[[theme:parallel|平行]]]版式的{{@@[[include]]@@}}**之后**：

[[div class="code"]]
{{@@[[include :scp-wiki-cn:component:parallel-classic-header]]@@}}
[[/div]]

绝大部分未对平行版头做出重大修改的版式可应用这一组件。与[[[theme:yore|往昔]]]不完全兼容，与[[[theme:foundom|Foundom]]]完全不兼容。

若需使用居中版头，则可将引入代码替换为：

[[div class="code"]]
{{@@[[include :scp-wiki-cn:component:parallel-classic-header centered=*]]@@}}
[[/div]]

----

+++ 相关参数

[[code type="CSS"]]
:root {
    --title-size: 2.25rem;
    --subtitle-size: 1rem;

    --header-title-height: 3.5rem;
    --header-button-size: 2.5rem;
    --login-status-box-size: 2rem;
    --login-status-box-height: var(--login-status-box-size);
    --login-status-box-width: calc(2 * var(--login-status-box-size));
    --login-status-button-width: var(--login-status-box-size);
    --user-button-width: var(--header-button-size);
    --side-bar-button-width: var(--header-button-size);
    --side-bar-button-height: var(--side-bar-button-width);
    --header-final-height: calc(var(--header-title-height) + 2 * var(--header-button-size));

    --top-bar-gradient: var(--header-gradient);
    --top-bar-border-width: var(--base-border-width);
    --top-bar-border-color: var(--basalt-undertone);
}
[[/code]]

[[/iftags]]

[[module CSS]]
:root {
    --title-size: 2.25rem;
    --subtitle-size: 1rem;

    --header-title-height: 3.5rem;
    --header-button-size: 2.5rem;
    --login-status-box-size: 2rem;
    --login-status-box-height: var(--login-status-box-size);
    --login-status-box-width: calc(2 * var(--login-status-box-size));
    --login-status-button-width: var(--login-status-box-size);
    --user-button-width: var(--header-button-size);
    --side-bar-button-width: var(--header-button-size);
    --side-bar-button-height: var(--side-bar-button-width);
    --header-final-height: calc(var(--header-title-height) + 2 * var(--header-button-size));

    --top-bar-gradient: var(--header-gradient);
    --top-bar-border-width: var(--base-border-width);
    --top-bar-border-color: var(--basalt-undertone);
}

div#header {
    position: static;
    grid-template-areas: ".         user    search"
                         "h-link    h-link  h-link"
                         "open-menu top-bar .     ";
    grid-template-columns: var(--header-button-size) 1fr var(--header-button-size);
    grid-template-rows: var(--header-button-size) var(--header-title-height) var(--header-button-size);
    max-width: 100%;
}

#login-status {
    width: var(--login-status-box-width);
    height: var(--login-status-box-height);
    justify-self: right;
    align-self: center;
    background-color: rgb(var(--header-color-one));
    right: calc((var(--header-button-size) - var(--login-status-box-size)) / 2);
}

#login-status:has(> a:first-child + span) {
    width: var(--login-status-button-width);
}

#login-status > a:first-child + span {
    width: var(--login-status-button-width);
    height: 100%;
    mask-size: 65%;
    -webkit-mask-size: 65%;
}

#login-status span.printuser > a {
    left: 0;
    right: unset;
    width: var(--login-status-button-width);
    padding: calc(var(--login-status-button-width) * 0.175);
}

#login-status::after {
    width: var(--login-status-button-width);
}

#login-status:has(a#account-topbutton):is(:hover, :focus-within)::after {
    height: 0%;
    transition: height var(--header-link-transition-2nd);
}

#login-status:has(a#account-topbutton:is(:hover, :focus-within), #account-options:is(:hover, :focus-within)):is(:hover, :focus-within)::after {
    height: 100%;
    transition: height var(--header-link-transition-1st);
}

#login-status span.printuser > a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    pointer-events: auto;
    cursor: pointer;
    background-color: rgb(var(--user-icon-button-background-hover));
    z-index: 0;
    transition: height var(--header-link-transition-2nd);
}

#login-status span.printuser > a:is(:hover, :focus-within)::before {
    height: 100%;
    transition: height var(--header-link-transition-1st);
}

a#account-topbutton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    margin: 0;
    padding: 0;
    border: none;
    width: var(--login-status-button-width); 
    color: rgb(var(--top-bar-link-color));
    pointer-events: auto;
    height: 100%;
    z-index: 2;
    transition: color var(--header-link-transition-1st);
}

a#account-topbutton:is(:hover, :focus-within),
#login-status:has(#account-options:is(:hover, :focus-within)) a#account-topbutton {
    color: rgb(var(--top-bar-link-color-hover));
    transition: color var(--header-link-transition-2nd);
}

:where(#login-status):is(:hover, :focus-within) > #account-options {
    clip-path: inset(0 0 0 100%);
}

a#account-topbutton:is(:hover, :focus-within) ~ #account-options,
#account-options:is(:hover, :focus-within) {
    clip-path: inset(0);
}

#header h1 {
    display: flex;
    overflow: visible;
    width: var(--main-content-width);
    justify-self: center;
    max-width: 100vw;
}

#header h1 a {
    align-self: end;
    padding-left: 0;
    margin-bottom: var(--top-bar-border-width);
    height: calc(var(--header-title-height) + var(--header-button-size) - var(--top-bar-border-width));
}

div#header h1 a::before,
div#header h1 a::after {
    width: calc(var(--header-title-height) + var(--header-button-size) - var(--top-bar-border-width));
    /* margin-right: calc((var(--header-title-height) + var(--header-button-size) - var(--top-bar-border-width)) * -0.45); */
}

#header h1 a span::before {
    font-weight: 700;
}

#top-bar div[class*="top-bar"] > ul {
    width: min(var(--main-content-width), calc(100% - 2 * var(--header-button-size)));
    max-width: calc(100vw - 2 * var(--header-button-size));
    justify-self: center;
    justify-content: center;
}

#top-bar div[class*="top-bar"] > ul > li {
    flex-grow: 1;
}

#header-extra-div-3 {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    background-image: var(--top-bar-gradient);
    box-shadow: 0 calc(-1 * var(--top-bar-border-width)) rgb(var(--top-bar-border-color));
}

#side-bar::after,
#side-bar::before,
#side-bar:hover::before {
    height: var(--side-bar-button-height);
    transition: var(--side-bar-transition);
}

#side-bar::before {
    background-color: rgb(var(--header-color-two));
}

#side-bar:hover::after,
#side-bar:hover::before {
    left: var(--side-bar-width);
    opacity: 0;
}

#side-bar {
    margin-top: 0;
    height: 100%;
}

@media (max-width: 1024px) {
    div#header {
        grid-template-areas: ".         user    search "
                             "h-link    h-link  h-link "
                             "open-menu top-bar top-bar";
        position: sticky;
        top: calc((var(--header-button-size) + var(--header-title-height)) * -1);
    }

    #top-bar div[class*="top-bar"] > ul {
        width: 100%;
        max-width: calc(100vw - var(--header-button-size));
    }
}

/* {$centered}/

:root {
    --header-title-height: 5rem;
}

#header h1 {
    justify-content: center;
}

#header h1 a {
    display: grid;
    grid-template-areas: 'a';
    padding-right: 0;
}

#header h1 a::before,
#header h1 a span {
    grid-area: a;
    justify-self: center;
}

#header h1 a::before {
    margin: 0;
    opacity: 0.4;
}

#header h1 a span {
    text-align: center;
}

/{$centered} */
[[/module]]