Fandom维基 版式
见鬼了,Kris!我们到底在什么地方?!
这是一个为2025年愚人节文章 Fandation 设计的美学版式,特别感谢 SynthPanda_,
sailorenoch,
Prismal,
Miss Lapis,
Harmacy,
Guaire,
FrankEntropy,
DrBleep,
AstersQuill和
Alexander245的帮助。 该版式由
Fish^12 创建。
这个版式是一个 Sigma+ 版式,并使用了 切换侧边栏 组件。 从美学角度看,该版式是一次简洁的全面改造,并与某个维基网站的风格高度相同。
如果您想在您的页面中应用该版式,请使用以下代码:
[[include :scp-wiki-cn:theme:fandom]]
该版式围绕两个特定变量设计:--primcolor 与 --secocolor。顾名思义,前者控制页面的主色调,后者控制页面的辅助配色。默认主题采用紫色与白色组合,您可通过修改这些变量值,自定义符合文章氛围的维基页面风格。
复制以下内容并将其粘贴到[[include]]组件下方。
[[module css]]
:root {
--primcolor: purple;
--secocolor: white;
}
[[/module]]
见证无限可能。
/* Fandom Theme [2025 Wikidot Theme] by Fish^12 */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); :root { --primcolor: purple; --secocolor: white; --stylish: 3px solid; --robo: "Roboto Slab"; --rubi: "Rubik"; --header-title: "基金会维基"; --header-subtitle: ""; --sp_header-logo: none; --sp_header-title-size: 2rem; --sp_header-height: 3.2rem; --sp_top-bar-height: 1rem; --sp_top-bar-gradient-top-color: var(--primcolor); --sp_top-bar-gradient-bottom-color: var(--primcolor); --sp_top-bar-link-color: var(--secocolor); --sp_top-bar-link-hover-color: var(--primcolor); --sp_top-bar-link-hover-background: var(--secocolor); --sp_dropdown-link-color: var(--secocolor); --sp_dropdown-link-hover-color: var(--primcolor); --sp_dropdown-link-background: var(--primcolor); --sp_dropdown-link-hover-background: var(--secocolor); --sp_dropdown-link-border: none; --sp_rate-module-background: var(--primcolor); --sp_rate-module-text-color: var(--secocolor); --sp_rate-module-button-color: var(--secocolor); --sp_rate-module-button-background: var(--primcolor); --sp_rate-module-sub-color: var(--secocolor); --sp_rate-module-button-hover-color: var(--primcolor); --sp_rate-module-button-hover-background: var(--secocolor); --sp_hovertip-background: var(--secocolor); --sp_hovertip-border: var(--stylish) var(--primcolor); --sp_tab-text-color: var(--primcolor); --sp_tab-background: var(--secocolor); --sp_tab-border-color: var(--primcolor); --sp_tab-hover-text-color: var(--secocolor); --sp_tab-hover-background: var(--primcolor); --sp_tab-hover-border-color: var(--primcolor); --sp_tab-selected-text-color: var(--secocolor); --sp_tab-selected-background: var(--primcolor); --sp_tab-selected-border-color: var(--primcolor); } /* ================ */ /* STYLINGS PROPER */ /* ================ */ #container { background-color: var(--primcolor); overflow-x: hidden; } #content-wrap { background-color: var(--secocolor); padding: 0 3em; margin: 0 auto; width: fit-content; } #login-status { grid-column: 3 / 8; padding-right: 12px; color: var(--secocolor); } #login-status a { color: var(--secocolor); font-weight: bold; text-decoration: none; } #account-topbutton { border: 1px solid var(--secocolor); color: var(--primcolor); background-color: var(--secocolor); } #account-topbutton:hover { border: 1px solid var(--secocolor); color: var(--secocolor); background-color: var(--primcolor); } #account-options { margin-right: 12px; border: none; background-color: var(--secocolor); font-weight: bold; } #account-options li a:hover { color: var(--secocolor); background-color: var(--primcolor); text-decoration: none; } #search-top-box { flex-direction: row-reverse; grid-column: 5 / 8; padding-right: 12px; } #search-top-box-form input[type=submit] { background-color: var(--secocolor); background-image: none; color: var(--primcolor); box-shadow: none; border: solid 1px var(--secocolor); border-radius: 0; transition: 200ms; } #search-top-box-form input[type=submit]:hover { background-color: var(--primcolor); background-image: none; border: solid 1px var(--secocolor); color: var(--secocolor); box-shadow: none; } #header { grid-template-areas: ". . . . ." ". . . . ." "h1 . . login login" "h1 . . search search" ". . . . ." "top-bar top-bar top-bar top-bar top-bar"; grid-template-columns: repeat(5, 1fr); background-color: var(--primcolor); background-image: none; padding-bottom: 0px; } #header h1 { padding-inline-start: 3rem; display: flex; align-items: center; grid-column: 1 / 4; } #header h1 a::before { font-family: var(--rubi); font-size: 24px; color: var(--secocolor); font-weight: bold; text-shadow: none; } #top-bar { padding: 0; } #top-bar ul li { flex-grow: 1; } #top-bar ul li ul { border: none; box-shadow: none; } #top-bar ul li ul { border-width: 0 0; box-shadow: 0 0.5em 1em -0.5em black; border-bottom: 3px solid var(--primcolor); } #top-bar > div[class*="top-bar"] { width: 100vw; max-width: 100vw; } #top-bar .open-menu a { border: solid 3px var(--primcolor); background-color: var(--secocolor); color: var(--primcolor); top: 7px; left: 7px; border-radius: 0; transition: 200ms; } #top-bar .open-menu a:hover { background-color: var(--primcolor); color: var(--secocolor); } #side-bar { background-color: rgba(0, 0, 0, 0.5); } #side-bar .menu-item a { padding: 2px; } #side-bar .menu-item a:hover { background-color: var(--primcolor); color: var(--secocolor); text-decoration: none; } #interwiki .heading, #side-bar .heading { color: black; border-bottom: var(--stylish) var(--primcolor); font-family: var(--robo); } #side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block { border: var(--stylish) var(--primcolor); border-radius: 3px; background-color: var(--secocolor); box-shadow: none; } /* ============ */ /* PAGE PROPER */ /* ============ */ #page-content { position: relative; } h1, h2, h3, h4, h5, h6 { font-family: var(--robo); font-weight: bold; color: #3a3a3a; } hr { height: 5px; border-radius: 10px; background-color: var(--primcolor); } blockquote, .blockquote, div.blockquote, table.wiki-content-table th, table.wiki-content-table td { border: var(--stylish) var(--primcolor); } body, html { font-family: var(--rubi); } a, a:visited, #interwiki a, #side-bar a, #account-options li a { color: var(--primcolor); transition: 200ms; } #page-title { color: #3a3a3a; font-size: 2.25rem; font-weight: 300; line-height: 3rem; font-family: var(--rubi); padding-top: 0.5em; text-align: right; border-color: var(--primcolor); border-width: 3px; } #footer { background: var(--secocolor); color: black; margin-top: 2.5rem; } #footer a { color: var(--primcolor); } #license-area { color: var(--secocolor); } #license-area a { font-weight: bold; color: var(--secocolor); } .owindow { border: 5px solid var(--primcolor); outline: var(--stylish) var(--secocolor); } .owindow .title { cursor: auto; background-color: var(--primcolor); color: var(--secocolor); font-family: var(--robo); text-align: center; padding: 1em; } .owindow img { background-color: transparent !important; padding: 0 !important; border: var(--stylish) var(--primcolor); margin-right: 1em; } .owindow td img { display: none; } div.buttons input, input.button, button, file, a.button, .owindow .button-bar a { border: 3px solid var(--primcolor); transition: 200ms; } .page-tags span { border-top: solid 3px var(--primcolor); } /* ================= */ /* TYPABLE ELEMENTS */ /* ================= */ #toc { border: var(--stylish) var(--primcolor); } #toc #toc-action-bar { text-align: center; } .page-rate-widget-box, div.page-rate-widget-box, .rate-box-with-credit-button { border-radius: 3px; box-shadow: none; text-transform: capitalize; transition: 200ms; } .yui-navset .yui-nav { font-weight: bold; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-width: 0; } .yui-navset.yui-navset-top .yui-nav li a { border-width: 3px; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { margin-top: -3px; border: var(--stylish); border-top-color: var(--primcolor); position: relative; z-index: 1; } /* ======== */ /* RESIZING */ /* ======== */ @media only screen and (max-width: 800px) { #content-wrap { background-color: var(--secocolor); width: auto; padding: 0 1em; } #page-content { font-size: 0.8rem; } }





