平行 经典版头
2025年8月10日
修订 6
评分
17
↑ 18
↓ 1
支持率
95%
总票数 19
Wilson 95% 下界
75.4%
在相同票数下更稳健的支持率估计
争议指数
0.199
评分趋势
按周聚合 加载图表中...
最近修订
1 / 3
SOURCE_CHANGED
1 个月前
SOURCE_CHANGED
1 个月前
unknown
1 个月前
将父页面设置为: "theme:parallel".
最近投票
1 / 2
2025-09-08
2025-08-18
2025-08-13
2025-08-13
2025-08-10
2025-08-10
2025-08-10
2025-08-09
2025-08-09
2025-08-09
相关页面
暂无推荐
页面源码
[[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]]