Flop 风格：暗色
Flop 风格：暗色
作者 Lt FlopsLt Flops
发布于 2022 年 04 月 05 日

这是 authorbox 的一个使用例。请查阅侧框栏子节段以获取更多信息。

收合

导航

I. 这是什么？
II. 使用方法
   1. 预加载组件
   2. 自定义变量
   3. Flops 版头
   4. 侧框栏
   5. 可修改部分杂项
   6. 版式变体
III. 示例格式（常规）
IV. 示例格式（高级）

alt_logo_tyrian.png

.

  
Flop 风格：暗色
给我动力制作半影分支的人都犯了严重的错误。
scp_foundation_logo.png

这是 sidebox 的一个使用例。

⮤ 这是一个 flavorbox ⮥

请查阅侧框栏子节段以获取更多信息。

  

Flop 风格：暗色

Sigma-9 版式中心 » Flop 风格：暗色

alt_logo_tyrian.png

评分模块

评分: +13+–x

评分模块 + 信息模块

评分: +13+–x

独立的信息模块

著作信息

这是什么？

这是由 Lt FlopsLt Flops 制作的版式。其被制作于广泛运用在任何偏好使用暗色模式或夜晚模式的文章。

Flop 风格：暗色的存在意义就是让我能轻易地更新它，独立于所有引用了它的页面之外。预计随着时间的推移 CSS 会发生微妙的变化。

仅在知道你在做什么的情况下使用该版式。

该版式不兼容于黑色标记笔及玄武岩，请勿使用该版式，否则将会产生严重错误。

Flop 风格：暗色是以下版式的分支：

主要归功于制作了版式标志（CC BY-SA 3.0）的 JackalRelated。

最后但并非最不重要的是，感谢审查了整个版式的 stormbreath，以及在多个区域提供意见的 Croquembouche。

» 查看更新补丁记录 «

使用方法

基本信息

请在你页面中设定 Flop 风格：暗色之前阅读此介绍节段。

      第一步，引用版式 复制此代码并将其黏贴至你页面的顶部：

[[include :scp-wiki-cn:theme:flopstyle-dark]]

      [可选] 第二步，添加署名 复制此代码并将其黏贴至评分模块的正下方——如下所示：

[[module Rate]]

[[div class="byline"]]
[[span]]作者：作者链接[[/span]]（A）
[[span]]#[[/span]]（B）
[[/div]]

      2.（A）用作者/合著者的名字替换作者链接，并且链接至相应的作者页。

      2.（B）用预计读者阅读你的文章所用时间（以分钟为单位）替换 #。若需预计你文章的阅读时间，你可以复制文章文本并将其黏贴至 Read-o-Meter.译注：仅适用于英语文章。中文阅读时间预测推荐使用此工具。工具中，然后四舍五入至最近的分钟数。.声明 Read-o-Meter 并不会记录或储存你的数据。

      ‼️ 请确保在包含这些 span 的行之间没有空行，否则其将不会如预期般运作！

hCGnFsp.png

第二步实装时的一个示例。

      第三步，设置页面标题 复制此代码并将其黏贴至你想要标记文章开始的地方：

[[div class="meta-title"]]
这里是你的标题
[[/div]]

由于无障碍的原因，你必须在每个使用 Flop 风格：暗色的页面中都设置一遍页面标题。

      第四步，设置面包屑导航 复制此代码并将其黏贴至页面标题正下方：

[[div class="pseudocrumbs"]]
[[[parent-page-url1|第一个父页面标题]]] » 子页面标题
[[[parent-page-url2|第二个父页面标题]]] » 子页面标题
[[/div]]

      ‼️ 如果你在创建一个需要使用 ListPages 的文章，别担心——你依然可以如常设置段落页的父页面，但是你必须要以通常的方式设置。在这种情况下，功能比形式重要得多。

uKmDCe1.png

第三步与第四步实装时的示例。

现在……如果你在 Flop 风格：暗色里所想要的只有基础美学设计的话，那你就可以随意收下代码然后溜之大吉了！但如果你想继续往下翻动的话，我就能给你看看，这兔洞到底有多深。

Flop 风格：暗色在设计的时候考虑到了以下组件……

1. 预加载组件

该版式预先打包了以下六个组件：

      1.1. ACS 动画 作者：EstrellaYoshte
      1.2. 更好的脚注 作者：EstrellaYoshte
      1.3. Croq 风格 CSS 作者：Croquembouche
      1.4. 渐显（设置了 speed=1）作者：Croquembouche
      1.5. 短信样式 作者：JaonHax
      1.6. 切换侧边栏 作者：EstrellaYoshte

2. 自定义变量

（仅在知道你自己在做什么的时候修改这些变量）

所有的变量修改都必须被包裹在 CSS 模块，[[module CSS]] 内。所有列于下方的变量亦必须被包裹在 :root 选择器内。

      2.1. 颜色 你可以根据需要改变各种版式颜色。只要复制以下任何一条变量（但也只需复制你需要的变量）然后按照需求编辑该变量：

[[module CSS]]
:root{

   /* -- 颜色 -- */
     --accentColor: 强调色;
     --accentColorLite: 较亮强调色;
     --hue: 色度;

/* 默认值（请勿复制）：
*   accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
*   accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
*   hue: 325deg.
**/

accentColor（强调色）是最广泛被使用的页面变量。对比起所有的其它变量，修改 accentColor 通常是该版式的用户最倾向于做出的唯一改动。

如果你修改了 accentColor，那么你也必须修改另外两条变量：

      2.1. (A) accentColorLite： 这一变量必须比你的 accentColor 有着更高的亮度以及更低的透明度值。我推荐亮度值比你所选择的 accentColor 高出至少 10%，然后透明度值调为 0.5。
      2.1. (B) hue： 这一变量必须合乎你所选择的 accentColor 的色度值。

若需选择你的颜色，我推荐使用 HSL 颜色选择器。HSL 是一种人类友好型颜色系统，三个字母分别代表色度Hue、饱和度Saturation、亮度Lightness。这一系统可以被扩展成 HSLA，包含了 Alpha 值（透明度）。

若需确认你所选择的 accentColor 是否符合网络内容可及性参考标准（Web Content Accessibility Guidelines，WCAG），那么就看看它的对比度比率。在 “Background”（背景）栏中填入
 hsl(222, 12%, 21%)，并在 “Text color”（文本颜色）栏中填入你所选择的 accentColor。WCAG 需求标题文本的对比度比率大于等于 3。

      2.2. 标志与字体 你可以修改标志、字体等：

   /* -- 标志 -- */
     --lgurl: url(此处填写链接);

   /* -- 字体 -- */
     --header-font: "你的字体", sans-serif;
     --body-font: "你的字体", sans-serif;

/* 默认值（请勿复制）：
*   header-font: Montserrat, sans-serif
*   body-font: Inter, sans-serif
**/

      2.3. 页眉标题 你亦可以修改标题、副标题、标题颜色以及副标题颜色：

   /* -- 标题 -- */
     --header-title: "标题";
     --header-subtitle: "副标题";
     --titleColor: 标题颜色;
     --subtitleColor: 副标题颜色;

/* 默认值（请勿复制）：
*   titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
*   subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/

}
[[/module]]

3. Flops 版头

Flop 风格：暗色提供了一个暗色模式友好版本的 Flops 版头：

[[include :scp-wiki-cn:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

cGbnRpP.png

Flops 版头实装时的示例。

4. 侧框栏

侧框栏Sideboxes构建为以下两种形式的组件：

  • A 型 authorbox 与 sidebox
  • B 型 sidecontainer

用法根据类型的不同而有所区别。

  • authorbox 与 sidebox 不会在 width=1280px 及以下的屏幕上显示，包括了移动端的屏幕。这两个侧框栏可以设定为显示页面与作者信息。
  • sidecontainer 会在 width=1280px 及以下的屏幕上收合到页面边缘处。在这些屏幕上，你可以通过用手指点击它或将光标悬停到其上来查看其内容。它可以被设定为显示额外的叙事性信息。

在设定这些内容前先考虑这种情况——一大部分的 SCP 维基用户都是通过移动端设备浏览的。

A 型 Authorbox 与 Sidebox

（见左上角与右上角）

调整自 EstrellaYoshte 所作的半影版式

默认情况下，authorbox 是强制使用的。它会在所有引用了 Flop 风格：暗色的页面上预加载。如果你想移除这一框体，请将这个：

[[include :scp-wiki-cn:theme:flopstyle-dark]]

替换成这个：

[[div style="display: none;"]]
[[include :scp-wiki-cn:theme:flopstyle-dark]]
[[/div]]

      替代选项 1 在移除了 authorbox 之后，你可以将其替换成一个自定义的版本，可以显示任何你希望显示的信息。这一功能在合著、重写或翻译页面之中格外有用。为供参考，这里是创建 authorbox 的代码：

[[div class="anchor"]]设定 authorbox 的粘附位置。
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]

[[div class="flavorbox"]]创建 authorbox 的 flavorbox。
这里是所需的调味flavor文本。
[[/div]]

[[/div]]
[[/div]]设定限制锚点的结束位置。

默认情况下，authorbox 会使用 ListPages 来自动显示归属资料。理论上你可以复制 authorbox 内部的 ListPages 模块并将其黏贴至任何维基页面中，这些字段将以该页面独特的样式填充。当然了，你也可以随你所需修改这里任何的字段。

你也可以编辑你自己的 authorbox 来显示你页面专属的调味文本，比如给读者的一条提示。

记住 — flavorbox 的使用是可选的。但这是你在 authorbox 内应该使用的唯一一个 div 块。

      替代选项 2 如果你想的话，你可以通过将 authorbox 替换成 sidebox 的方式将其移动到页面的右手边。若需创建 sidebox，复制以下代码并将其黏贴至你页面顶部的 CSS 模块之中：

[[div class="anchor"]]设定 sidebox 的粘附位置
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]

[[div class="flavorbox"]]创建 sidebox 的 flavorbox。
这里是所需的 调味flavor 文本。
[[/div]]

[[/div]]
[[/div]]设定限制锚点的结束位置。

如果你想要在你的页面内插入 sidecontainers，那么我强烈建议使用 authorbox 而不是 sidebox。原因是，当 sidebox 与 sidecontainer 并列出现时，它们会相互重叠起来，造成视觉上的混乱。这可能会给读者造成困惑，所以，最好还是稳妥一点。

你可以配置 sidebox 来传递与 authorbox 相同的信息。或者——就像我在此展示的例子一样——你可以加一句精炼的文章标语以及一个独特的标志。

与其它的表格类似，你也可以给它应用一个独特的底色——比如说现在的绿色，是用 table1 来实现的。请参考示例格式（通用）节段内的表格格式折叠以获取更多信息。

B 型 Sidecontainer

（见下文）

由 Woedenaz 提供

sidecontainer 是一个可选项。它可由此代码设置：

[[div class="limit"]]设定限制锚点的开始位置。
[[div class="anchor"]]设定 sidecontainer 的粘附位置。
[[div class="sidecontainer"]]
此处为所需的 sidecontainer 文本。
[[/div]]
[[/div]]
与 sidecontainer 有关联的文本。
[[/div]]设定限制锚点的结束位置。

我推荐在与 sidecontainer 有关联的文本后方插入一个常规的换行符。你可以通过用两组 @@ 将一个空格包起来（两边各一组）的形式来换行。sidecontainer 将在你滚过此文本的时候显示在其侧边。

展开示例

记住——没有了 limit div 块，anchor 就会在你滚过其起始点之后始终停留在页面内。

5. 各种各样的可修改部分

如果有需要的话，你同样可以修改这里的任何 CSS 属性以更好地适应你的页面。

修改标志透明度

#extra-div-1{
     filter: opacity(百分数);
}

默认透明度 = 33%

6. 版式变体

如果你在版式引用块中插入不同的变量，你就可以给你的页面应用一个预先构建好的版式变体。

巫师WITCH变体

为即将到来的“编织难可觉察之线Weaving Imperceptible Threads”设定所作

0bxdPMM.png

[[include :scp-wiki-cn:theme:flopstyle-dark witch=a]]

展开替用变体

示例格式 [常规]

展开常规格式
展开插图格式
展开表格格式

示例格式 [高级]

展开自定义 div 块
展开特殊格式

源代码

展开代码

标题字体为 Montserrat / 思源黑体简中。

正文字体为 Inter / 思源黑体简中。

打字机体为 Fira Code / 幼圆 / 思源宋体简中。

草稿体为 Comic Neue / 马善政毛笔楷体。

‡ 授权 / 引用
评分: +13+–x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}

版式
页面版本: 8, 最后编辑于: 10 Jan 2023 10:44
编辑 评分 (+13) 标签 讨论 (5) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License