网站版式

之前使用的版式:[[include :pin-wiki:theme:dficf-foundation-theme]]
很抱歉，之前因为技术原因依托别人，现在我们已经几乎可以独立改进版式
————

现在我们正在使用的版式外部链接为:“https://dficf-wiki-cn.wikidot.com/local--files/theme:site/DFICFC.CSS”

源代码为:

/*
    创作时间：2026-07-13
    作者：矩阵
    授权协议：CC BY-SA 3.0
    基于 SCP 基金会 Sigma 主题版式修改
*/
@import url("https://scpwiki.github.io/sigma/css/sigma.min.css");
body {
    background-color: #051122;
}
:where(:root) {
    --header-title: "DFICF";
    --header-subtitle: "探查 · 保护 · 搜索 · 摧毁";
 
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw));
    --sp_header-title-scale: 1;
    --sp_header-subtitle-scale: 1;
 
    --sp_header-logo: url(https://dficf-wiki-cn.wikidot.com/local--files/theme:site/DFICF-LOGO-%E9%95%BF%E6%9C%9F%E4%BD%BF%E7%94%A8);
    --sp_header-logo-size: 6.25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw));
    --sp_header-height: 8.75rem;
 
    --sp_header-gradient-top-color: #051122;
    --sp_header-gradient-top-stop: .4;
    --sp_header-gradient-bottom-color: #022F41;
    --sp_header-gradient-bottom-stop: .95;
 
    --sp_diagonal-stripes-angle: 45deg;
    --sp_diagonal-stripes-width: .08rem;
    --sp_diagonal-stripes-gap: .22rem;
    --sp_diagonal-stripes-color: #FFAFAF09;
 
    --sp_top-bar-height: 1.375rem;
    --sp_top-bar-gradient-top-color: #535353;
    --sp_top-bar-gradient-bottom-color: #3B3B3B;
 
    --sp_top-bar-link-color: #fff;
    --sp_top-bar-link-hover-color: #0F5B79;
    --sp_top-bar-link-hover-background: #fff;
 
    --sp_dropdown-width: calc(8.25rem + 2.25vw);
    --sp_dropdown-background: #eee;
    --sp_dropdown-link-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-background: transparent;
    --sp_dropdown-link-border: 0.05rem solid #ddd;
    --sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background);
 
    --sp_side-bar-width: 14rem;
 
    --sp_area-max-width: 62.5rem;
    --sp_area-min-margin: 1.25rem;
    --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin));
    --sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height));
 
    --sp_rate-module-text-color: #FFF;
    --sp_rate-module-background: #022F41;
    --sp_rate-module-sub-color: #0F5B79;
    --sp_rate-module-active-color: var(--sp_rate-module-text-color);
 
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: #fff6f0;
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: var(--sp_rate-module-background);
 
    --sp_tab-text-color: #000;
    --sp_tab-background: #fefefe;
    --sp_tab-border-color: #a3a3a3;
    --sp_tab-hover-text-color: var(--sp_tab-text-color);
    --sp_tab-hover-background: #d3eaff;
    --sp_tab-hover-border-color: var(--sp_tab-border-color);
    --sp_tab-selected-text-color: #fff;
    --sp_tab-selected-background: #0F5B79;
    --sp_tab-selected-border-color: #0a82a8;
 
    --sp_hovertip-background: #051122;
    --sp_hovertip-border: 0.05rem solid #0a82a8;
}
 
textarea, input { font-family: inherit; }
 
/*--------------*/
/*--- HEADER ---*/
/*--------------*/
 
/* unset the faux header bg */
div#container-wrap { background-image: none; }
 
#header {
    /* Recreating (sans top bar) with gradients */
    background-image:
 
        /* Diagonal stripes */
        repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
            var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width),
            transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)),
 
        /* Header gradient colors */
        linear-gradient(to bottom,
            var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)),
            var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height))
        );
    background-repeat: repeat-x;
    background-size: auto;
    background-position: initial;
 
    /* De-styling sigma */
    padding-bottom: 0;
    height: auto;
    width: 100%;
    max-width: unset;
    min-height: var(--sp_final-header-height);
    z-index: initial;
 
    /* Grid layout */
    display: grid;
    grid-template-areas:
        ". login login ."
        ". . . ."
        ". h1 search ."
        ". h2 search ."
        ". . . ."
        "top-bar top-bar top-bar top-bar";
    grid-template-rows: auto 1fr auto auto 1fr auto;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin);
}
 
/* Header logo */
#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 2/6;
    grid-column: 2/3;
    width: var(--sp_header-logo-adaptive-size);
}
 
/*--------------*/
/*--- TOP BAR ---*/
/*--------------*/
 
#top-bar {
    grid-area: top-bar;
 
    /* De-styling sigma-9 */
    position: relative;
    z-index: initial;
    top: initial; right: initial;
    max-width: unset;
    line-height: unset;
    height: 100%;
    font-size: .875em;
 
    padding-inline: var(--sp_area-min-margin);
    box-sizing: border-box;
    min-height: var(--sp_top-bar-height);
 
    /* Recreating top bar image with gradients */
    background-image:
        linear-gradient(to bottom,
            var(--sp_top-bar-gradient-top-color) 0%,
            var(--sp_top-bar-gradient-bottom-color) 100%);
}
 
#top-bar > div[class*="top-bar"] {
    max-width: var(--sp_area-max-width);
    height: 100%;
    margin: auto;
    position: static;
    left: initial;
    bottom: initial;
    z-index: initial;
}
#top-bar ul, #top-bar li {
    float: none;
}
#top-bar div[class*="top-bar"] > ul {
    height: 100%;
    display: flex;
    justify-content: end;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    max-height: unset;
    border: none;
    line-height: 1.275;
    color: var(--sp_top-bar-link-color);
    padding: 0;
    padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw);
    box-sizing: border-box;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    color: var(--sp_top-bar-link-hover-color);
    background: var(--sp_top-bar-link-hover-background);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    left: initial;
    min-width: max(100%, var(--sp_dropdown-width));
    width: max-content;
    background: var(--sp_dropdown-background);
    box-sizing: border-box;
    z-index: 3;
    visibility: visible;
    pointer-events: none;
    opacity: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul {
    inset-inline-start: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul {
    right: initial;
    inset-inline-end: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
    pointer-events: auto;
    opacity: 1;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    min-width: max-content;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: initial;
    max-height: initial;
    padding: 0.125em 0.75em;
    border-top: var(--sp_dropdown-link-border);
    color: var(--sp_dropdown-link-color);
    background: var(--sp_dropdown-link-background);
    text-align: start;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    color: var(--sp_dropdown-link-hover-color);
    background: var(--sp_dropdown-link-hover-background);
}
 
#top-bar .open-menu, #top-bar .open-menu > p { display: contents; }
#top-bar .open-menu a { z-index: 9; }
 
/*--------------*/
/*--- LOGIN ---*/
/*--------------*/
 
#login-status {
    top: initial;
    right: initial;
    position: relative;
    z-index: 3;
    grid-area: login;
    text-align: end;
    padding-block-start: 0.5rem;
}
#account-options {
    right: initial;
    inset-inline-end: 0;
    inset-block-start: 100%;
    display: block;   /* 保留冗余设计 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.075s linear;
}
#account-topbutton:focus + #account-options,
#account-options:is(:hover, :focus-within) {
    opacity: 1;
    pointer-events: auto;
}
 
/* Safari support */
@media not all and (min-resolution:.001dpcm) { @media {
#account-topbutton:hover + #account-options {
    opacity: 1;
    pointer-events: auto;
}
}}
 
/*--------------*/
/*--- SEARCH ---*/
/*--------------*/
 
#search-top-box {
    grid-area: search;
    position: relative;
    right: initial;
    top: initial;
    width: auto;
    display: flex;
    align-items: center;
    text-align: unset;
    z-index: initial;
}
 
#search-top-box-form {
    display: flex;
    gap: 0.325rem;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    margin: 0; 
    appearance: none;
}
 
/*------------------*/
/*--- HEADER TEXT ---*/
/*------------------*/
 
#header h1 { grid-area: h1; }
#header h2 { grid-area: h2; }
#search-top-box { grid-area: search; }
#header h1, #header h2 {
    margin-left: initial;
    padding: 0;
    padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05);
    float: none;
    max-height: initial;
    font-size: 1rem;
}
#header h1 a, #header h2 span {
    margin: 0;
    padding: 0;
    line-height: 1.125;
    max-height: initial;
    max-width: max-content;
    display: inline-block;
    font-size: 0rem;
    letter-spacing: 0;
}
#header h1 a::before {
    content: var(--header-title);
    font-size: var(--sp_header-title-size);
}
#header h2 span::before {
    content: var(--header-subtitle);
    font-size: var(--sp_header-subtitle-size);
    letter-spacing: 0.05vw;
}
 
/*-----------------------*/
/*-----------------------*/
/*-----------------------*/
 
/*------------------*/
/*--- MAIN AREA ---*/
/*------------------*/
 
#content-wrap {
    min-height: unset;
    width: calc(100% - var(--sp_area-min-margin)*2);
    display: flex;
    max-width: var(--sp_area-max-width);
    column-gap: 2.325rem;
}
 
#main-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    min-width: 0rem;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}
#page-content { font-size: unset; }
 
/* Side Bar */
@media not all and (max-width: 767px) {
    #side-bar {
        position: static;
        inset: initial;
    }
}
#side-bar {
    background: #022F41;
    color: #e6e6e6;
}
 
/* Breadcrumbs */
#breadcrumbs, .pseudocrumbs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.55ch;
}
.pseudocrumbs > p { display: contents; }
 
/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/
 
.printuser {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}