Moban2
[[a href="/" id="header-link"]] [[/a]] [[a href="#side-bar" id="sb-button"]] ≡ [[/a]] [[div class="logo"]] [[/div]] [[module CSS]] @import url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/components/collapsible-sidebar.css"); @import url("https://scp-wiki.wdfiles.com/local--code/component:betterfootnotes/1"); @import url('https://scp-wiki.wdfiles.com/local--code/component%3Aacs-animation/1'); @import url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/basalt.css"); @import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:aero-glass/1"); [[/module]] [[iftags +版式]] [[>]] [[module Rate]] [[/>]] @@ @@ [[module CSS]] @import url(https://scp-wiki-cn.wdfiles.com/local--code/credit%3Astyle/1); [[/module]] [[div class="creditRate"]] [[div class="rateBox"]] [[div class="rate-box-with-credit-button"]] [[module Rate]] [[div class="creditButton"]] [[a href="#u-credit-view" class="fa fa-info"]]@@@@[[/a]] [[/div]] [[/div]] [[/div]] [[/div]] [[div style="clear:both;"]] [[/div]] [[div id="credit-view"]] [[div class="fader"]] [[iframe https://scp-wiki-cn.wdfiles.com/local--code/credit%3Abackmodule/1 ]] [[/div]] [[div class="modalcontainer"]] [[div class="modalbox"]] [[=]] ++* 著作信息 [[/=]] ------ [[div class="credit first"]] [[iframe https://scp-wiki-cn.wdfiles.com/local--code/credit%3Abackmodule/4 class="close-credits" style="height:2em;margin: 0;padding: 0;border: 0;background: transparent;"]] **作者：**[[*user Mercuresphere]] 本页面中所用到的背景图片： 主背景：来自[https://scp-wiki-cn.wikidot.com/looking-for-invisible-oneiroi 今夜太阳入眠，唯尔独逐梦神] ，https://www.pexels.com/zh-cn/photo/4073994/ 雨：https://pixabay.com/images/id-3524800/ 翠玉都、紫罗兰、浮空都市、记忆监视器：使用Midjourney自制，CC-BY-SA 3.0 [[/div]] ------ [[div class="credit-back" style="text-align: center;"]] [[iframe https://scp-wiki-cn.wdfiles.com/local--code/credit%3Abackmodule/2 style="height:2em;width: 100%;margin: 0;padding: 0;border: 0;background: transparent;" scrolling="no"]] [[/div]] [[div class="creditBottomRate" style="position:relative;height:30px;"]] [[div style="text-align: center; top: 0px;"]] [[module Rate]] [[/div]] [[/div]] [[/div]] [[/div]] [[/div]] > = 因玄武岩版本更新，使用此版式的页面可能会出现显示错误的情况，如遇到此问题，去掉 > = [[include :scp-wiki-cn:theme:basalt darkmode=a]] > = 这一行代码即可。 [[=]] + 主题颜色 [[/=]] >[!-- [[module CSS]] td { vertical-align: top; } td strong { white-space: nowrap; } .options table.wiki-content-table td { border: none; padding: 0.7em 1em; } [[/module]] [[div style="border: 1px solid #ddd; padding: 1em;"]] + What this is A component that displays a bunch of colored squares to show off a CSS theme's flair. Designed by [[*user Woedenaz]] and componentised by [[*user Croquembouche]]. This component is designed to be used for CSS themes, but it can be used on almost any page, if you really want. + Usage On any wiki: [[div class="code"]] ##blue|**[[include :scp-wiki:component:theme-squares -=-**## ##blue|**|**## ##green|color1-name####blue|**=**##My Favourite Colour ##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@fav-color ##blue|**|**## ##green|color1-info####blue|**=**##(191, 144, 0) ##blue|**]]**## [[/div]] Note the "{{-=-}}" after the component name. You **//do//** need to include that -- otherwise all this text explaining how to use the component will appear on your page. For this component, there are three parameters per color. Replace N with the number of the color. [[div class="options"]] || **colorN-name** || The name of the color. Pick whatever you want! || || **colorN-variable** || The name of the [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable] that contains this color. _ The variable should hold three comma-separated numbers representing the RGB values of the color. This is consistent with BHL-style variables. _ If your variables hold something else (e.g. a full RGB/RGBA or hex color), you will need to override the background color of each theme square manually with CSS. || || **colorN-info** || Some info about the colour. Displaying the RGB values is typical. Keep it short. _ If you don't want any text, add {{@<@@ @@>@}} instead.|| || **//colorN-has-light-text//** _ //Optional. Default: 0// || Either 0 or 1. Determines the font color on the square. Useful to make sure there is enough contrast between the background color and the text color. _ If 1, the value of {{@@--swatch-text-light@@}} is used, or white (255, 255, 255) if it is not defined. Otherwise {{@@--swatch-text-dark@@}}, or black (0, 0, 0). Like all BHL-style CSS color variables, three numbers representing RGB values are expected. || [[/div]] A color can only be used if it's exposed as a [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable]. All colors in a Black Highlighter theme have a corresponding CSS variable by default, so for BHL themes, this component should work out of the box. However, sigma9 does not use CSS variables, so the only CSS variables that are available will be any that you have defined in your theme. This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors. To add a primary color, just add the top three of the above parameters to the include, as shown in the example. To add a secondary color, it's the same, but replace 'color' with 'subcolor'. + Example Here's a longer example, taken from the Black Highlighter theme: [[div class="code"]] ##blue|**[[include :scp-wiki:component:theme-squares -=-**## ##blue|**|**## ##green|color1-name####blue|**=**##Payne's Grey ##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@gray-monochrome ##blue|**|**## ##green|color1-info####blue|**=**##(66, 66, 72) ##blue|**|**## ##green|color1-has-light-text####blue|**=**##1 ##blue|**|**## ##green|color2-name####blue|**=**##Rosewood ##blue|**|**## ##green|color2-variable####blue|**=**##@@--@@bright-accent ##blue|**|**## ##green|color2-info####blue|**=**##(133, 0, 5) ##blue|**|**## ##green|color2-has-light-text####blue|**=**##1 ##blue|**|**## ##green|subcolor1-name####blue|**=**##Alto ##blue|**|**## ##green|subcolor1-variable####blue|**=**##@@--@@very-light-gray-monochrome ##blue|**|**## ##green|subcolor1-info####blue|**=**##(215, 215, 215) ##blue|**|**## ##green|subcolor2-name####blue|**=**##White Smoke ##blue|**|**## ##green|subcolor2-variable####blue|**=**##@@--@@pale-gray-monochrome ##blue|**|**## ##green|subcolor2-info####blue|**=**##(244, 244, 244) ##blue|**|**## ##green|subcolor3-name####blue|**=**##Bastille ##blue|**|**## ##green|subcolor3-variable####blue|**=**##@@--@@dark-gray-monochrome ##blue|**|**## ##green|subcolor3-info####blue|**=**##(48, 48, 52) ##blue|**|**## ##green|subcolor3-has-light-text####blue|**=**##1 ##blue|**|**## ##green|subcolor4-name####blue|**=**##Buccaneer ##blue|**|**## ##green|subcolor4-variable####blue|**=**##@@--@@medium-accent ##blue|**|**## ##green|subcolor4-info####blue|**=**##(100, 46, 44) ##blue|**|**## ##green|subcolor4-has-light-text####blue|**=**##1 ##blue|**|**## ##green|subcolor5-name####blue|**=**##Maroon ##blue|**|**## ##green|subcolor5-variable####blue|**=**##@@--@@dark-accent ##blue|**|**## ##green|subcolor5-info####blue|**=**##(100, 3, 15) ##blue|**|**## ##green|subcolor5-has-light-text####blue|**=**##1 ##blue|**|**## ##green|subcolor6-name####blue|**=**##Mango Tango ##blue|**|**## ##green|subcolor6-variable####blue|**=**##@@--@@newpage-color ##blue|**|**## ##green|subcolor6-info####blue|**=**##(221, 102, 17) ##blue|**]]**## [[/div]] This produces the following colored squares: [[=]] [[image bhl-squares.png]] [[/=]] + Tweaking You can adjust the appearance of the component with CSS. The whole component has the {{.colors-container}} class, and any CSS that targets it should included that class to ensure that nothing else on the page is affected. Every colored square has class {{.color}}. The primary colors have a {{.colors}} parent and the secondary colors have a {{.subcolors}} parent. You'll need to use {{!important}} to override a square's background. For example, the [[[theme:laughter-and-knives-theme | Laughter and Knives theme]]] adds a gradient background to the 9th secondary color like so: [[code type="css"]] .colors-container .subcolors .color:nth-of-type(9) { background: var(--pastel-rainbow) !important; } [[/code]] ----- [https://rossjrw.com/series-replace/?f=%5Cn&f=%5E&f=%24&f=%3C%3C%3E%3E&f=%28%3F%3C%3Dsubcolors.%2A%29%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%5C%7C&f=%5E%5C%5B%5C%5B%5B%5Ei%5D.%2A%7C%5E%5C%7C%5B%5E%20%5D.%2A&f=%5Cn%24&r=&r=%5B%5Binclude%20%3Ascp-wiki%3Acomponent%3Atheme-squares%20-%3D-%3C%3C%3E%3E%7C%20color%24-has-light-text%3D1%3C%3C%3E%3E%7C%20subcolor%24-has-light-text%3D1%3C%3C%3E%3E&r=%5Cn%5D%5D&r=%5Cn&r=%7C%20subcolor%24%24-name%3D%241%7C%20subcolor%24%24-variable%3D%242%7C%20subcolor%24%24-info%3D%243%7C&r=%7C%20color%24%24-name%3D%241%7C%20color%24%24-variable%3D%242%7C%20color%24%24-info%3D%243%7C&r=%5Cn%7C&r=&r= Tool to convert existing syntax to arguments for this component] [[/div]] [!-- --] [[module CSS]] .colors-container { width: 98%; display: flex; flex-direction: column; margin: 0 auto; font-weight: 700; font-family: var(--title-font, Verdana); color: black; } .colors-container .colors, .colors-container .subcolors { width: 100%; flex-shrink: 0; display: flex; flex-wrap: wrap; } .colors-container .color { flex-grow: 2; padding: 0.5rem; margin: 0.5rem; color: rgb(var(--swatch-text-dark, 0, 0, 0)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .colors-container .colors .color { height: 7rem; min-width: 4rem; flex-basis: calc((100% / 2) - 2rem); } .colors-container .subcolors .color { height: 4rem; min-width: 4rem; font-size: 75%; text-align: center; flex-basis: calc((100% / 6) - 2rem); } .colors-container .css-variable { font-size: 75%; letter-spacing: 0.1em; font-family: var(--body-font, Verdana); } /* Hide a colour that's not been provided by seeing if the variable starts with "{$" */ .colors-container [data-variable^=\{\$] { display: none; } .colors-container [data-has-light-text="1"] { color: white; color: rgb(var(--swatch-text-light, 255, 255, 255)); } [[/module]] [[div_ class="colors-container"]] [!-- Unfortunately I can only support a limited number of colours, because each possible slot needs to be hardcoded --] [!-- I can use the CSS variable name to reliably determine whether or not a colour has been provided, because it shouldn't contain any fancy formatting that would preclude it from being used in a CSS attribute --] [!-- If a colour is not provided, it should not take up any space --] [!-- Support up to six primary colours --] [[div_ class="colors"]] [[div_ class="color" style="background-color: rgb(var(--gray-monochrome));" data-variable="--gray-monochrome" data-has-light-text="1"]] Sui-gyou[[span class="css-variable"]]@@--gray-monochrome@@[[/span]][[span class="css-variable"]](38, 34, 66)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--bright-accent));" data-variable="--bright-accent" data-has-light-text="{$color2-has-light-text}"]] Mon-chien[[span class="css-variable"]]@@--bright-accent@@[[/span]][[span class="css-variable"]](203, 219, 250)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$color3-variable}));" data-variable="{$color3-variable}" data-has-light-text="{$color3-has-light-text}"]] {$color3-name}[[span class="css-variable"]]@@{$color3-variable}@@[[/span]][[span class="css-variable"]]{$color3-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$color4-variable}));" data-variable="{$color4-variable}" data-has-light-text="{$color4-has-light-text}"]] {$color4-name}[[span class="css-variable"]]@@{$color4-variable}@@[[/span]][[span class="css-variable"]]{$color4-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$color5-variable}));" data-variable="{$color5-variable}" data-has-light-text="{$color5-has-light-text}"]] {$color5-name}[[span class="css-variable"]]@@{$color5-variable}@@[[/span]][[span class="css-variable"]]{$color5-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$color6-variable}));" data-variable="{$color6-variable}" data-has-light-text="{$color6-has-light-text}"]] {$color6-name}[[span class="css-variable"]]@@{$color6-variable}@@[[/span]][[span class="css-variable"]]{$color6-info}[[/span]] [[/div]] [[/div]] [!-- Support up to twelve subcolours --] [[div_ class="subcolors"]] [[div_ class="color" style="background-color: rgb(var({$subcolor1-variable}));" data-variable="{$subcolor1-variable}" data-has-light-text="{$subcolor1-has-light-text}"]] {$subcolor1-name}[[span class="css-variable"]]@@{$subcolor1-variable}@@[[/span]][[span class="css-variable"]]{$subcolor1-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor2-variable}));" data-variable="{$subcolor2-variable}" data-has-light-text="{$subcolor2-has-light-text}"]] {$subcolor2-name}[[span class="css-variable"]]@@{$subcolor2-variable}@@[[/span]][[span class="css-variable"]]{$subcolor2-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor3-variable}));" data-variable="{$subcolor3-variable}" data-has-light-text="{$subcolor3-has-light-text}"]] {$subcolor3-name}[[span class="css-variable"]]@@{$subcolor3-variable}@@[[/span]][[span class="css-variable"]]{$subcolor3-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor4-variable}));" data-variable="{$subcolor4-variable}" data-has-light-text="{$subcolor4-has-light-text}"]] {$subcolor4-name}[[span class="css-variable"]]@@{$subcolor4-variable}@@[[/span]][[span class="css-variable"]]{$subcolor4-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor5-variable}));" data-variable="{$subcolor5-variable}" data-has-light-text="{$subcolor5-has-light-text}"]] {$subcolor5-name}[[span class="css-variable"]]@@{$subcolor5-variable}@@[[/span]][[span class="css-variable"]]{$subcolor5-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor6-variable}));" data-variable="{$subcolor6-variable}" data-has-light-text="{$subcolor6-has-light-text}"]] {$subcolor6-name}[[span class="css-variable"]]@@{$subcolor6-variable}@@[[/span]][[span class="css-variable"]]{$subcolor6-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor7-variable}));" data-variable="{$subcolor7-variable}" data-has-light-text="{$subcolor7-has-light-text}"]] {$subcolor7-name}[[span class="css-variable"]]@@{$subcolor7-variable}@@[[/span]][[span class="css-variable"]]{$subcolor7-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor8-variable}));" data-variable="{$subcolor8-variable}" data-has-light-text="{$subcolor8-has-light-text}"]] {$subcolor8-name}[[span class="css-variable"]]@@{$subcolor8-variable}@@[[/span]][[span class="css-variable"]]{$subcolor8-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor9-variable}));" data-variable="{$subcolor9-variable}" data-has-light-text="{$subcolor9-has-light-text}"]] {$subcolor9-name}[[span class="css-variable"]]@@{$subcolor9-variable}@@[[/span]][[span class="css-variable"]]{$subcolor9-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor10-variable}));" data-variable="{$subcolor10-variable}" data-has-light-text="{$subcolor10-has-light-text}"]] {$subcolor10-name}[[span class="css-variable"]]@@{$subcolor10-variable}@@[[/span]][[span class="css-variable"]]{$subcolor10-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor11-variable}));" data-variable="{$subcolor11-variable}" data-has-light-text="{$subcolor11-has-light-text}"]] {$subcolor11-name}[[span class="css-variable"]]@@{$subcolor11-variable}@@[[/span]][[span class="css-variable"]]{$subcolor11-info}[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var({$subcolor12-variable}));" data-variable="{$subcolor12-variable}" data-has-light-text="{$subcolor12-has-light-text}"]] {$subcolor12-name}[[span class="css-variable"]]@@{$subcolor12-variable}@@[[/span]][[span class="css-variable"]]{$subcolor12-info}[[/span]] [[/div]] [[/div]] [[/div]] + 关于本页 这是 [[*user Mercuresphere]] 设计的美学版式，名称和主要设计灵感来自于Windows 7的默认用户界面：Aero Glass。 类似[[[theme:monotypical| ]]]，这个版式不仅仅只有一种配色方案，而是为你提供了一个有着高扩展性的版式框架，你可以根据你的喜好，制作属于你自己的Aero Glass版式。（详见“DIY”一节） 在你的作品开头添加如下语法以应用此版式： > [[include :scp-wiki-cn:theme:aero-glass]] ------ + 示例 [[image https://imglf6.lf127.net/img/b52cb898baf954d3/UmFUaDhUcjRZYTFyOFVHU292T3I0TEVHUU1mUDFtZk9ENEhQNm9PeWdyTT0.jpg?imageView&thumbnail=1000x0&type=jpg]] 可通过 5 个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。 ----- 标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建 @@ @@ [[tabview]] [[tab 分页]] 在两年之前的那个晚上，不眠者之家里的众人正在开办着每晚一次的豪华舞会，就像身在格里鲍耶陀夫之家的海盗船上那样，随后他们等来了他们的流浪客。他们，包括不速之客自己一开始都以为自己只是普通的不舒服而已，只是普普通通的吐出来就好了。 随后，他们看到了眼前的来人——这位在不眠者当中最为冷静和知性的唯一的成年人沉浸在癫狂当中，一边语无伦次地大喊着，一边疯狂地想用指甲抓破自己的头盖骨。他们并不知道，这动作是她如同正在沸腾的大脑的热辐射，而辐射源是被困于她的头盖骨当中无处可走，只能不断地在她的大脑当中翻涌的记忆。下一刻，她在她的幻觉当中，看到了无数红色、绿色、蓝色的像素色块从她的头盖骨上刚刚自己戳破的孔洞当中像喷泉一样喷出，而那些R、G、B的颜色再在惊骇的观众的眼中以253、212、203的比例调配成完美而均匀，上下波动不超过10%的粉红色。她终于得到解放了。以其他人的噩梦从此开始作为交换。 ——《[[[wanderers:children-of-pragmatism |]]]》 [[/tab]] [[tab 分页]] 我第一次做梦，是我第一次和家人一起参观水族馆的时候，具体的细节我其实不记得了，只记得被放在水族馆中心的一个球形的鱼缸。那里面的水给人的感觉很轻柔，丝毫感觉不到水的阻力，像是蓝色的空气。而它的中心，在里面游着的是一个人，或者说是人形的鱼。 他在小小的鱼缸的中心看着我，对我莞尔一笑。那个身影，看起来很熟悉，又让我想不起来的身影，对我说着：“你需要睡眠，对吧？” 我不知道这个问题的答案。我需要睡眠吗？我的意识刺骨的清醒，足以清晰的听见心跳的声音。 我轻轻的点了点头。某种与灵魂的本质相似的东西，被灌注进了我的意识当中，它给予了我的意识以二元对立，我感觉到了许许多多的事物的存在。空气的阻力，意识的凝滞感，以及，最关键的，不是世界上所有事我都能做到。 “感觉怎么样？”，他对我说道。 “我能感觉到了，现实的存在。” 我把手伸进了他居住的鱼缸中，而这一次，我感觉到了那是与空气相同的质感，随后我感觉他向我伸出了手，把我拉进了那个鱼缸当中。 ——《[[[wanderers:skydome-aquarium |]]]》 [[/tab]] [[tab 长 Tab]] 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 [[/tab]] [[tab 空 tab]] [[/tab]] [[tab 空 tab]] [[/tab]] [[tab 空 tab]] [[/tab]] [[tab 空 tab]] [[/tab]] [[tab 空 tab]] ░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░ ░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░ ░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░ ░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░ ░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░ █░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█ █░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█ ░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░ ░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░ ░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░ ░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░ ░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░ ░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░ ░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░ ░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░ [[/tab]] [[tab 空 tab]] [[/tab]] [[/tabview]] > 这是一个引用块，在一行字的起始处加上“> ”来创建。 > > 更多文字 > ----- > 一条分割线 > >> 嵌套引用块[[footnote]] 一个脚注 [[/footnote]] ||~ 这是 ||~ 表格 || ||你应该老早 || 就知道怎么 || ||||做这个了吧 || [[=]] 正文字体为 Noto Sans SC [[span style="font-family: var(--title-font);"]]页眉与标题字体为 Work Sans。[[/span]] [[span style="font-family: var(--mono-font);"]]等宽字为 Fira Code。[[/span]] [[/=]] ----- [[collapsible show="+ 显示代码" hide="- 隐藏代码" hideLocation="both"]] [[code type="CSS"]] /* Aero Glass Theme */ /* 2022 Wikidot Theme */ /* By Mercuresphere */ /* Based on Basalt Theme by Liryn & Placeholder McD */ /* CC BY-SA 3.0 */ :root { --white-monochrome: 230, 230, 230; --black-monochrome: 0, 0, 0; --pale-gray-monochrome: 214, 245, 255; --very-light-gray-monochrome: 220, 222, 230; --gray-monochrome: 38, 34, 66; --dark-gray-monochrome: 29, 26, 56; --pale-accent: 255, 75, 255; --bright-accent: 203, 219, 250; --medium-accent: 41, 127, 128; --dark-accent: var(--dark-gray-monochrome); --newpage-color: 238,212,255; --logo: url(https://evernight-aquarium.wdfiles.com/local--files/files/basalt_logotype_darkmode.png); --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/moirecity.jpg); --main-aero-glass-filter: blur(7px); --title: " SCP基金会"; --subtitle: " 控制 • 收容 • 保护"; } /* body */ body { background-color: rgb(var(--dark-gray-monochrome)); background-image: var(--background-image); background-repeat: no-repeat; background-position: center; background-blend-mode: normal; background-attachment: fixed; background-size: cover; font-family: sans-serif; } #content-wrap { margin: 2em auto 2em; } @media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6), (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6), (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) { #content-wrap { max-width: 52rem; } } #footer, #license-area { display: none !important; } /* 主磨砂框 */ #main-content::before { content: " "; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; position: absolute; width: 106%; height: calc(100% + 2rem); background: rgba(var(--gray-monochrome), 0.25); -webkit-backdrop-filter: var(--main-aero-glass-filter); backdrop-filter: var(--main-aero-glass-filter); display: block; z-index: -6; left: calc(-3% - 1px); box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8); top: -1rem; } @media only screen and (min-width: 768px) { #main-content::before { width: calc(100vw - 20px); height: 100%; top: 1rem; left: calc((100vw - 20px - 100%) / (-2) - 1px); } } @media only screen and (min-width: 975px) { #main-content::before { width: 110%; left: calc(-5% - 1px); top: 1rem; } } @media only screen and (max-width: 768px) { #main-content::before { border: 1px solid rgba(var(--white-monochrome), 0.5); border-radius: 6px; } } /* 顶栏 */ #extra-div-1 { background: linear-gradient(180deg, rgba(var(--dark-gray-monochrome), 0.5) 0%, rgba(var(--gray-monochrome), 0.5) 100%); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: 0px 1px rgb(var(--white-monochrome)), inset 0px 1px rgb(var(--white-monochrome)), 0px 0px 8px 2px rgba(var(--black-monochrome), 0.8); } #extra-div-1 { top: 1px; } .logo { top: 6px; } #side-bar::before { word-spacing: -2px; } .hovertip, #account-options { background: rgba(var(--very-light-gray-monochrome), 0.25) !important; border: 1px solid rgb(var(--white-monochrome)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; border-radius: 8px !important; color: rgb(var(--white-monochrome)); } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: rgba(var(--very-light-gray-monochrome), 0.25); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { background-color: transparent; } #top-bar li:hover ul, #top-bar li.sfhover ul { background-color: transparent; border: 1px solid rgb(var(--white-monochrome)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; border-radius: 8px !important; } #top-bar ul li.sfhover ul li:first-of-type a, #top-bar ul li:hover ul li:first-of-type a { border-top: 0; } #top-bar ul li>a:hover { transform: none; } /* 搜索框和页眉标题 */ #search-top-box-form>input[type=submit], #search-top-box-form>input[type=submit]:hover, #search-top-box-form>input[type=submit]:focus, #search-top-box-form>input[type=submit]:target { margin-top: 0; } div#search-top-box { top: 14px; } #extra-div-1::before { top: 0.7rem; } #extra-div-2::before { top: 2.8rem; } @media (max-width: 1020px) { #extra-div-1::before { top: 0.3rem; font-size: calc(0.85 * 27.45px); } } @media (max-width: 1020px) { #extra-div-2::before { top: 2rem; font-size: calc(0.85 * 1.22em); } } /* 页面元素边框调整 */ blockquote, div.blockquote, .page-source, #toc { background: rgba(var(--very-light-gray-monochrome), 0.25); border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); } .page-source { width: unset; } .scp-image-block img, .scp-image-block .scp-image-caption { outline: solid 1px rgb(var(--white-monochrome)); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.7); background: rgba(var(--very-light-gray-monochrome), 0.5); margin-top: 10px; } .scp-image-block img { background: transparent; } .scp-image-block span.printuser.avatarhover img { outline: none; box-shadow: none; } .modalbox { background: rgba(var(--very-light-gray-monochrome), 0.25) !important; border: 1px solid rgb(var(--white-monochrome)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; border-radius: 10px !important; } /* hr和fancyborder */ hr { height: 1px; border: 0; background-color: rgb(var(--white-monochrome)); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); background-image: none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin: 1em 0; } div#u-credit-view hr { margin: 1em 2em; } @media (max-width: 767px) { #page-content>hr, #page-content>.list-pages-box>.list-pages-item>hr { margin: 1em 0; } } .fancyhr hr { filter: saturate(0); border-top: 2vw solid transparent; height: 0; box-sizing: border-box; border-image-source: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png"); border-image-repeat: round round; background: rgba(var(--bright-accent), 0) none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; box-shadow: none; } .fancyborder { border: 2vw solid rgba(var(--black-monochrome), 0.5); border-image: url(https://evernight-aquarium.wdfiles.com/local--files/theme%3Aaero-glass/wl_border.png) 600 round; border-image-width: 6; box-sizing: border-box; padding: 2vw; } /* yui-tabs */ .yui-navset .yui-content { background: transparent; box-shadow: none; border-bottom: dotted 4px rgb(var(--white-monochrome)); } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border: 1px solid rgb(var(--white-monochrome)); box-shadow: 0px 0px 8px 4px rgba(var(--black-monochrome), 0.7); } .yui-navset .yui-content { background: transparent; box-shadow: none; border-bottom: dotted 4px rgb(var(--white-monochrome)); } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border: 1px solid rgb(var(--white-monochrome)); box-shadow: 0px 0px 8px 4px rgba(var(--black-monochrome), 0.7); } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected, .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:active, .yui-navset .yui-nav a:focus { background: rgba(var(--very-light-gray-monochrome), 0.5); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background: rgba(var(--pale-gray-monochrome), 0.25); border-radius: 10px; } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { background: none; border-radius: 10px; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { background-color: rgba(var(--very-light-gray-monochrome), 0.5); } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.7); border-radius: 10px; } .yui-navset .yui-nav .selected a { width: 100%; color: rgb(var(--dark-gray-monochrome)); } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { color: rgb(var(--dark-gray-monochrome)); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { color: rgb(var(--dark-gray-monochrome)); } /* 侧栏 */ #side-bar { background: linear-gradient(0deg, rgba(var(--dark-gray-monochrome), 0.85) 87%, rgba(var(--dark-gray-monochrome)) 100%); direction: rtl; } #side-bar .side-block { direction: ltr; background: linear-gradient(180deg, rgba(var(--black-monochrome), 0.98) 0%, rgb(var(--gray-monochrome)) 100%); border: solid 2px rgb(var(--gray-monochrome)); } #side-bar .side-block.resources { background: linear-gradient(180deg, rgba(var(--black-monochrome), 0.98) 0%, rgb(var(--gray-monochrome)) 100%) !important; border: solid 2px rgb(var(--gray-monochrome)); } #side-bar .side-block.media { background-color: rgba(var(--black-monochrome), 0.99) !important; border-bottom: solid 2px rgba(var(--black-monochrome), 0.98); border-top: solid 2px rgba(var(--black-monochrome), 0.98); } @media (max-width: 767px) { #side-bar:target { border: none; box-shadow: 3px 0 1px -2px rgba(var(--black-monochrome), 0.04), 1px 0 5px 0 rgba(var(--black-monochrome), 0.2), inset -1px 0px rgb(var(--white-monochrome)); } } #side-bar { box-shadow: 0px 0px 5px rgba(var(--black-monochrome), 0.3), inset -1px 0px rgb(var(--white-monochrome)); } /* 评分模块 */ #page-content .page-rate-widget-box { border: 1px solid rgb(var(--white-monochrome)); border-radius: 5px; box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); display: inline-flex; align-content: center; justify-content: center; align-items: center; height: 20px; } #page-content .rate-box-with-credit-button { border: none; background: transparent; } #page-content .page-rate-widget-box .rate-points { background-color: transparent !important; color: rgb(var(--white-monochrome)) !important; border: none; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel { background: transparent !important; } #page-content .rate-box-with-credit-button { box-shadow: none; display: flex; align-content: center; justify-content: center; align-items: center; } #action-area .page-rate-widget-box .rate-points { background-color: transparent !important; color: rgb(var(--white-monochrome)) !important; border: none; } #action-area .page-rate-widget-box { box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); border: 1px solid rgb(var(--white-monochrome)); border-radius: 5px; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover, #page-content .rate-box-with-credit-button .fa-info:hover { background: transparent; color: rgb(var(--bright-accent)); } .rate-box-with-credit-button .creditButton, .creditButtonStandalone { justify-content: center; align-items: center; width: 24px; height: 20px; border: 1px solid rgb(var(--white-monochrome)); border-radius: 5px; box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); display: inline-flex !important; align-content: center; justify-content: center; align-items: center; margin-left: 6px; } .creditButtonStandalone p a, .creditButtonStandalone p a:hover { background: none !important; box-shadow: none !important; text-decoration: none; } .creditButtonStandalone p a { color: rgb(var(--white-monochrome)) !important; } .creditButtonStandalone p a:hover { color: rgb(var(--pale-accent)); } .creditButton p a { margin-left: 0 !important; } .creditRate .rateBox p { padding-top: 1px !important; } .rate-box-with-credit-button .page-rate-widget-box .cancel { padding-right: 4px; } /* 脚注 */ .footnotes-footer { border-left: solid 3px rgb(var(--white-monochrome)); } .footnotes-footer a { color: rgb(var(--white-monochrome)); } /* 反选背景 */ ::-moz-selection { color: inherit; background: rgba(var(--bright-accent), .25); text-shadow: none } ::selection { color: inherit; background: rgba(var(--bright-accent), .25); text-shadow: none } /* 连接 */ a { color: rgb(var(--bright-accent)); } a:visited { color: rgb(var(--bright-accent)); } a, a.newpage { background: transparent; } a.newpage { color: rgb(var(--newpage-color)); } a:active, a:hover { background-color: initial; color: rgb(var(--pale-accent)); } #main-content .page-tags a { background: rgba(var(--very-light-gray-monochrome), 0.25); border: 1px solid rgb(var(--white-monochrome)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); } #main-content a.collapsible-block-link { background: rgba(var(--very-light-gray-monochrome), 0.25); border: 1px solid rgb(var(--white-monochrome)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); border-radius: 5px; } /* 对话框 */ #owindow-1.owindow { background: rgba(var(--very-light-gray-monochrome), 0.15) !important; border: 1px solid rgb(var(--white-monochrome)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; border-radius: 10px !important; } #owindow-1>div.title.modal-header { background: transparent; } #owindow-1>div.content.modal-body>div { border-top: dotted 2px rgb(var(--white-monochrome)); } .owindow .button-bar { margin: 7px; } #owindow-1>div.content.modal-body>table { border-right: none; } .owindow .title { background-color: transparent; } /* 按钮 */ a.btn.btn-danger, a.btn.btn-primary, .btn-small, #owindow-1>div.button-bar.modal-footer>a, #edit-cancel-button, #edit-diff-button, #edit-preview-button, #edit-save-draft-button, #edit-save-continue-button, #edit-save-button, #owindow-1>div.content.modal-body>div>a.btn.btn-default, #action-area>p:nth-child(5)>a { color: rgb(var(--white-monochrome)); background: rgba(var(--very-light-gray-monochrome), 0.25) !important; border: 1px solid rgb(var(--white-monochrome)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 4px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; border-radius: 5px !important; } a.collapsible-block-link:hover, a.btn.btn-danger:hover, a.btn.btn-primary:hover, .btn-small:hover, #owindow-1>div.button-bar.modal-footer>a:hover, #edit-cancel-button:hover, #edit-diff-button:hover, #edit-preview-button:hover, #edit-save-draft-button:hover, #edit-save-continue-button:hover, #edit-save-button:hover, #owindow-1>div.content.modal-body>div>a.btn.btn-default:hover, #action-area>p:nth-child(5)>a:hover { color: rgb(var(--pale-accent)); } a.btn.btn-danger:not(.btn-small.btn-sm) { margin-bottom: 4px !important; } #owindow-1>div.content.modal-body td.active>b { font-family: 'Work Sans', sans-serif; color: rgb(200 200 200); } .footer-wikiwalk-nav a { background: transparent; } .footer-wikiwalk-nav p { background: rgba(var(--very-light-gray-monochrome), 0.25); border: 1px solid rgb(var(--white-monochrome)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 4px 2px rgba(var(--dark-gray-monochrome), 0.8); border-radius: 7px; } /* tags */ #main-content .page-tags a { font-family: sans-serif; } #main-content .page-tags a:before { font-family: 'Work Sans', sans-serif; } /* 滚动条 */ ::-webkit-scrollbar-thumb { background-color: rgba(var(--white-monochrome),0.45); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--white-monochrome),0.9); } ::-webkit-scrollbar-track { background: rgba(var(--gray-monochrome), 0.85); } /* breadcrumbs */ #breadcrumbs { color: rgba(var(--white-monochrome), 0.9); } /* table */ #page-content .wiki-content-table tr th { background-color: rgba(var(--very-light-gray-monochrome), 0.6); border-color: rgb(var(--white-monochrome)); color: rgb(var(--dark-gray-monochrome)); } #page-content .wiki-content-table tr td { border: 1px solid rgb(var(--white-monochrome)) !important; } /* 颜色调整 */ .close-credits { filter: grayscale(1) brightness(0) invert(1); } /* 调整有问题的大小写转换 */ #owindow-1 td::first-letter { text-transform: none; } h1, h2, h3, h4, h5, h6 { text-transform: none; } /* ===内置解决saving pages问题的模块=== */ body[class="wait"] #odialog-shader-iframe, body[class="wait"] #odialog-shader { display: none !important; } #odialog-container { position: fixed !important; } body[class="wait"] #odialog-container { z-index: -1; } body[class="wait"] #odialog-container #owindow-1 { display: none !important; } body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info { background-color: rgb(var(--dark-accent)); border: 1px solid rgb(var(--bright-accent)); } div#lock-info { font-size: 0 !important; margin: .8rem 0 .8rem 1rem !important; padding: 0.4rem .8rem !important; } div#lock-info::before { content: '您握有一个独占的15 分钟锁定，这将会阻止其他人编辑您正在作业的页面。\A这个锁定将在闲置 '; display: inline; font-size: .82rem; white-space: pre-wrap; } div#lock-info>strong { font-size: .82rem; } div#lock-info>br { display: none; } div#lock-info::after { content: ' 秒后失效。'; display: inline; font-size: .82rem; } body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::before { content: '保存页面中……\A若此提示已经显示了很长时间，建议将编辑框中的内容复制到剪切板然后刷新本页重新编辑。'; display: inline; font-size: .82rem; color: rgb(var(--bright-accent)); white-space: pre-wrap; } body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after { font-size: 0; } body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info>strong { font-size: 0; } body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after { font-size: 0; } /* ===修复ios设备上的显示效果=== */ @supports (-webkit-touch-callout: none) { .fancyhr hr { filter: saturate(0); border-image-source: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png"); border-image-repeat: repeat; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } } /* ===修复火狐浏览器上的显示效果=== */ @-moz-document url-prefix() { #main-content::before { content: " "; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; position: absolute; width: 106%; height: calc(100% + 2rem); background: var(--background-image); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; display: block; filter: var(--main-aero-glass-filter); z-index: -6; left: calc(-3% - 1px); box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8); top: -1rem; } #main-content::after { content: " "; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; position: absolute; width: 106%; height: calc(100% + 2rem); background: rgba(var(--gray-monochrome), 0.25); display: block; z-index: -6; left: calc(-3% - 1px); box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8); top: -1rem; } @media only screen and (min-width: 768px) { #main-content::before { width: calc(100vw - 20px); height: 100%; top: 1rem; left: calc((100vw - 20px - 100%) / (-2) - 1px); } #main-content::after { width: calc(100vw - 20px); height: 100%; top: 1rem; left: calc((100vw - 20px - 100%) / (-2) - 1px); } } @media only screen and (min-width: 975px) { #main-content::before { width: 110%; left: calc(-5% - 1px); top: 1rem; } #main-content::after { width: 110%; left: calc(-5% - 1px); top: 1rem; } } @media only screen and (max-width: 768px) { #main-content::before { border: 1px solid rgba(var(--white-monochrome), 0.5); border-radius: 6px; } } } /* ===如果浏览器不支持backdrop-filter，则使用备选方案=== */ @supports (not ((backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px)))) { #main-content::before { content: " "; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; position: absolute; width: 106%; height: calc(100% + 2rem); background: var(--background-image); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; display: block; filter: var(--main-aero-glass-filter); z-index: -6; left: calc(-3% - 1px); box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8); top: -1rem; } #main-content::after { content: " "; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; position: absolute; width: 106%; height: calc(100% + 2rem); background: rgba(var(--gray-monochrome), 0.25); display: block; z-index: -6; left: calc(-3% - 1px); box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8); top: -1rem; } @media only screen and (min-width: 768px) { #main-content::before { width: calc(100vw - 20px); height: 100%; top: 1rem; left: calc((100vw - 20px - 100%) / (-2) - 1px); } #main-content::after { width: calc(100vw - 20px); height: 100%; top: 1rem; left: calc((100vw - 20px - 100%) / (-2) - 1px); } } @media only screen and (min-width: 975px) { #main-content::before { width: 110%; left: calc(-5% - 1px); top: 1rem; } #main-content::after { width: 110%; left: calc(-5% - 1px); top: 1rem; } } @media only screen and (max-width: 768px) { #main-content::before { border: 1px solid rgba(var(--white-monochrome), 0.5); border-radius: 6px; } } .hovertip, #account-options { background: rgba(var(--dark-gray-monochrome), 0.85) !important; } } /* ===修复兼容性问题=== */ .top-box:before , .header-diamond .diamond-pattern { mix-blend-mode: unset !important; } blockquote blockquote, div.blockquote div.blockquote, div.blockquote blockquote, blockquote div.blockquote, code, .keycap { color:rgb(var(--dark-gray-monochrome)); } .dblock:hover { color:rgb(var(--white-monochrome)); } div.yui-content > div[style*="none"] > div.achieve { display: none; } .au-preview { background: transparent; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); width: calc(100% - 1em) !important; transition: background 1s !important; margin: 0.5em 0; color: unset !important; } .au-preview:hover { background: rgba(var(--very-light-gray-monochrome), 0.25); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; transition: background 1s !important; } .infobox { background: transparent !important; border: 1px solid rgb(var(--white-monochrome)); border-radius: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; transition: background 1s !important; margin: 0.5em 0; color: unset !important; } .infobox:hover { background: rgba(var(--very-light-gray-monochrome), 0.25)!important; box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important; transition: background 1s !important; } @media screen and (min-width: 992px) { .au-preview .span { display: none; } } @media screen and (min-width: 992px) { .infobox { position: relative !important; margin: 1em auto; right: 0 !important; bottom: 0 !important; height: 9em !important; } } body{ --barColour: rgba(var(--very-light-gray-monochrome), 0.5); } #main-content div.info-container a.collapsible-block-link { background: rgba(var(--bright-accent)); } #main-content div.info-container a.collapsible-block-link:hover, #main-content div.info-container a.collapsible-block-link:focus-within { background: rgba(var(--pale-accent)); } .info-container .collapsible-block-unfolded { background: rgba(var(--very-light-gray-monochrome), 0.15); border: 1px solid rgb(var(--white-monochrome)); border-radius: 0 0 6px 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8); } /* ----END---- */ [[/code]] [[/collapsible]] ------ + DIY 通过在@@[[include]]@@之后额外引入如下格式的代码，你可以非常简单地制作属于自己的Aero Glass版式： [[code type="CSS"]] [[module CSS]] :root { --title: " SCP基金会"; /* 修改此变量来改变页眉标题 */ --subtitle: " 控制 • 收容 • 保护"; /* 修改此变量来改变页眉副标题 */ --logo: url(https://evernight-aquarium.wdfiles.com/local--files/files/basalt_logotype_darkmode.png); /* 修改此变量来改变页眉logo */ --gray-monochrome: 38, 34, 66; /* 修改此变量来改变版式的主题颜色 */ --dark-gray-monochrome: 29, 26, 56; /* 副主题颜色，此变量应与主题颜色色相一致而亮度稍暗 */ --bright-accent: 203, 219, 250; /* 修改此变量来改变链接颜色 */ --pale-accent: 255, 75, 255; /* 修改此变量来改变鼠标移到链接上时的链接颜色 */ --newpage-color: 238, 212, 255; /* 修改此变量来改变指向不存在的页面的链接颜色 */ --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/moirecity.jpg); /* 修改此变量来改变背景图 */ --main-aero-glass-filter: blur(7px) brightness(1); /* 此变量为“主界面滤镜”，如果你选择的背景图较亮，可能会使得白色文字难以辨认，这时你可以通过减少brightness的值来降低主界面亮度。 */ } [[/module]] [[/code]] 这里是一些已经制作好，可供参考以及随意取用的预设： [!-- Polis Smaragdina --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h5zpqi69i7j31h30qpb29.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Polis Smaragdina=== */ :root { --gray-monochrome: 41, 127, 128; --dark-gray-monochrome: 0, 35, 29; --pale-accent: 136, 198, 201; --bright-accent: 140, 234, 222; --newpage-color: 150, 235, 150; --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c16aqnlzj31kw0w0tg1.jpg); --main-aero-glass-filter: blur(7px) brightness(0.5); } [[/module]] [[/code]] ------ [!-- Rainland --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h5zpqhuv86j31h30qp7je.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Rain=== */ :root { --pale-gray-monochrome: 241, 241, 241; --very-light-gray-monochrome: 221, 221, 221; --light-gray-monochrome: 70, 130, 183; --gray-monochrome: 114,114,114; --dark-gray-monochrome: 29,29,29; --pale-accent: 255,255,255; --bright-accent: 163, 162, 160; --newpage-color: 120, 120, 120; --background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.9) 100%), url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c19qmfabj30zk0npqc1.jpg); --main-aero-glass-filter: blur(7px); } [[/module]] [[/code]] ------ [!-- Violet --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h5zpru74h1j31hc0qpe81.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Violet=== */ :root { --gray-monochrome: 43, 14, 116; --dark-gray-monochrome: 41, 26, 91; --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6c18ua5xfj31kw0w07c4.jpg); --main-aero-glass-filter: blur(7px) brightness(0.35); } [[/module]] [[/code]] ------ [!-- Cloud --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6es10dz75j31hb0qpe81.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Cloud=== */ :root { --gray-monochrome: 101,141,160; --dark-gray-monochrome: 7,48,78; --bright-accent: 127, 211, 255; --pale-accent: 206,237,254; --newpage-color: 129, 245, 254; --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6eqotlggrj31h20ubajo.jpg); --main-aero-glass-filter: blur(7px) brightness(0.6); } [[/module]] [[/code]] ------ [!-- Memory Monitor --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6erz1nxmfj31hb0qpkjl.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Memory Monitor=== */ :root { --gray-monochrome: 158,181,181; --dark-gray-monochrome: 33,53,53; --pale-accent: 204,109,255; --bright-accent: 233,209,255; --newpage-color: 203, 219, 250; --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6erc7w34xj31kw0w0157.jpg); --main-aero-glass-filter: blur(7px) brightness(0.65); } [[/module]] [[/code]] ------ 以下是大家投稿的优秀预设： [!-- Ripple --] [[=image https://evernight-aquarium.wdfiles.com/local--files/files/006Vtzrtly1h6qy2tqsscj31h20qpb29.jpg]] [[code type="CSS"]] [[module CSS]] /* ===Preset: Ripple by zhangbowen55=== */ :root { --gray-monochrome: 27, 151, 215; --dark-gray-monochrome: 19, 124, 175; --very-light-gray-monochrome: 205, 245, 255; --bright-accent: 127, 211, 255; --pale-accent: 129, 245, 254; --newpage-color: 27, 211 , 205; --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/008vezbogy1h6oyk0ti55j333x1qxn63.jpg); --main-aero-glass-filter: blur(12px) brightness(0.88); } [[/module]] [[/code]] 请随意实验自己的颜色配置！ [[/iftags]]
页面版本: 3, 最后编辑于: 26 Mar 2023 09:19