主题版式方块

我和我的小伙伴们都惊呆了!!

此页为于SCP维基内部使用的样版页。

在未经同意的情况下
请不要动这页里面的东西


这是什么

一个通过显示一系列彩色方块来展现 CSS 版式风格的组件。

WoedenazWoedenaz 设计,并由 CroquemboucheCroquembouche 整合为组件。

此组件的设计目的是为了用于 CSS 版式,但如果你想要,也可以用于几乎任何页面。

使用方法

在任意维基添加:

[[include :scp-wiki:component:theme-squares -=-
| color1-name=我最喜欢的颜色
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

注意组件名称后的“-=-”。你必须添加这一部分——否则所有组件使用说明文字都会出现在你的页面上。

在此组件中,每种颜色都有三个参数。请将 N 修改为颜色的编号。

colorN-name 颜色名称。随便选什么都行!
colorN-variable 包括此颜色的 CSS 变量名
变量应包含由三个逗号分隔的数字,表示颜色的 RGB 值。这会始终与BHL样式的变量一致。
若你的变量包含了别的东西(比如全RGB/RGBA或十六进制色),你需要用CSS手动覆盖每个版式方块的背景色。
colorN-info 颜色的一些信息。典型的例子是显示 RGB 值。请尽量简短些。
如果你不想添加任何文字,使用@@ @@
colorN-has-light-text
可选。默认:0
允许 0 或 1。决定方块上的字体颜色。有助于确保背景颜色和文本之间有足够的对比度。
如果为 1,将使用 --swatch-text-light 的值,若未定义该值则为白色(255, 255, 255)。否则为 --swatch-text-dark,或黑色(0, 0, 0)。与所有黑标系列 CSS 颜色变量一样,需要三个代表 RGB 值的数字。

只能使用公开为 CSS 变量的颜色。默认情况下,黑色标记笔主题版式中的所有颜色都有一个对应的 CSS 变量,所以对于黑标版式,这个组件应该是开箱即用的。但是,sigma9 不使用 CSS 变量,因此你必须在你的版式中先定义 CSS 变量才能使用。

此组件最多可容纳 6 个主要颜色和 12 个次要颜色。我推荐两个主要颜色和至多六个次要颜色。

要添加主要颜色,只需将上述参数中的前三个添加到 include 中,如示例所示。

要添加次要颜色,方法相同,但要将“color”替换为“subcolor”。

示例

这里有一个很长的示例,摘自黑色标记笔主题版式:

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

生成的彩色方块如下所示:

bhl-squares.png

微调

你可以使用 CSS 调整组件的外观。

整个组件有 .colors-container 类(class),任何指向它的 CSS 都应该包含这个类,以确保页面上的其它内容不会受到影响。每个彩色方块都有 .color 类。主要颜色有一个 .colors 父元素,而次要颜色有一个 .subcolors 父元素。

你需要使用 !important 来覆盖方块的背景。

例如,欢笑与尖刀主题版式的第 9 个次要颜色有渐变色背景,如下所示:

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

将现有语法转换为此组件的参数的工具

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License