黑标居中页眉
注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
[フレーム]
这是干什么用的
重排页眉,使标题和标志居中
使用方法
1. 复制以下代码。
2. 粘贴至黑色标记笔及其他版式 include 之后。
[[include :scp-wiki:component:centered-header-bhl]]
@supports(display: grid) { :root{ /*headermeasurements*/ --header-height-on-desktop:10rem; --header-height-on-mobile:10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); }#header{ --search-textbox-text-color: var(--swatch-secondary-color); background:none; }#header::before{content: " "; position:absolute; width:100%; height:100%; left:0; top:0.75rem; background-image: var(--logo-image); background-repeat:no-repeat; background-position:center0; background-size:auto calc(var(--header-height-on-desktop) - 1.5rem); opacity:0.8; pointer-events:none; }#headerh1, #headerh2{margin:0; padding:0; width:100%; height: var(--header-height-on-desktop); display: flex; align-items:center; justify-content:center; display: flex; align-items:center; justify-content:center; }#headerh1a, #headerh1a::before, #header h2 span, #header h2 span::before { margin: 0; padding:0; z-index:0; display:block; text-align:center; }#headerh1{z-index:1; }#headerh1a::before, #headerh1a::after{content: var(--header-title); }#headerh1a::before{color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke:0.325rem rgb(var(--swatch-text-tertiary-color)); }#headerh1a::after{color: rgb(var(--swatch-headerh1-color)); z-index:1; }#headerh2{z-index:0; text-transform:uppercase; pointer-events:none; }#headerh2span{margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); }#headerh2span::before, #headerh2span::after{ --wght:600; content: var(--header-subtitle); position:absolute; left:50%; transform: translateY(-50%) translateX(-50%); width:100%; text-align:center; }#headerh2span::before{ -webkit-text-stroke:0.25rem rgb(var(--swatch-text-tertiary-color)); }#headerh2span::after{color: rgb(var(--swatch-headerh2-color)); z-index:1; }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{color: rgba(0, 0, 0, 0); }@media (min-width: 36rem) {#login-status{flex-grow:1; left:3%; right: initial; }#login-status::before{ --mask-image:none; background-color:transparent; }#login-status:not(:focus-within) {color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; }#login-status#account-topbutton, #login-status:not(:focus-within) #account-topbutton{ --clip-path: polygon( 00, 100%0, 100%100%, 0100% ); background-color: rgba(var(--login-arrow-color), 0); }#login-status#account-topbutton::before{ --clip-path: polygon( 30%35%, 70%35%, 50%60%, 50%60% ); --mask-image: initial; content: ""; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }#login-status#account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30%35%, 70%35%, 50%60%, 50%60% ); --mask-image: initial; }#login-status:not(:focus-within) #account-topbutton::after{display:none; }#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 00, 100%0, 100%100%, 0100% ); pointer-events:all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {opacity:1; }#login-status#my-account{ --wght:300; }#account-options{background: var(--gradient-header); }#search-top-box{top:1.5em; right:3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); }#search-top-box:focus-within ~ #login-status{opacity:1; }#search-top-box::after{transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); }#search-top-box:not(:focus-within)::after{ --clip-path: polygon( 00, 100%0, 100%100%, 0%100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }#search-top-box:not(:focus-within):hover::after{ --clip-path: polygon( 00, 100%0, 100%100%, 0100% ); background-color: rgb(var(--search-icon-hover-bg-color)); }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) {max-width: var(--search-width); }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{max-width: var(--search-width); padding:0 var(--search-height) 01em; outline-width:0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor:pointer; }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-boxform[id="search-top-box-form"]:focus-withininput[type="submit"]{pointer-events:all; border:none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before{content: ""; flex-grow:1; height:0.0625rem; background: rgb(var(--swatch-primary)); }#page-title::before, .meta-title::before{margin:auto1.25rem autoauto; } }
页面版本: 14, 最后编辑于: 12 Jan 2025 05:01