组件：Liminal±

这是一个由 EltracEltrac 制作的组件，用以对阈限版式做出调整和细节上的优化，同时又类似于 Sigma+，可以作为版式制作的辅助层。

若要使用，将以下代码置于任意使用阈限版式1的页面。

[[include component:liminal-optimized]]

概览

一同引入

具体的改动

  • 修改了页面字体，采用思源黑体
  • 重写了水平线（<hr>）的样式，解决了页面内多个水平线粗细不一的问题
  • 调整了浅色块（lightblock）的样式
  • 调整了底部授权信息（license-area）的样式
  • 调整了超链接下划线的样式，使其向下偏移
  • 调整了图片框的样式，灵感来自 scutoid studiosscutoid studios
  • 调整了页面主标题（#page-title）的样式，在两侧加上了水平线
  • 去除了引用块（blockquote）的阴影，微调样式
  • 去除了页面背景的点阵，用一定的渐变代替
  • 去除了侧边栏和顶栏链接的动画，用简单的过渡动画代替
  • 去除页脚块两侧的边距
  • 补回各级标题的上下边距，避免各类问题
  • 调整版头样式
  • 修复了页脚文字与背景色对比度过低导致不可见的问题

元素预览

Level%2010%20-%20Worms.png

scutoid 的图片框意外地不错

现在可以在框框里放心地放标题了

[[div class="lightblock"]]
这是一个浅色块
[[/div]]

[[div class="darkblock"]]
这是一个暗色块
[[/div]]

/**
 *  Liminal±
 *
 * 2023 | by Eltrac
 */
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
 
:root {
    --scrollbar-width: 0.5rem;
    --header-height-on-desktop: 9.25rem;
    --header-height-on-mobile: 9.25rem;
    --topbar-height-on-desktop: 2.25rem;
 
    --body-font: 'Noto Sans SC', sans-serif;
    --title-font: 'Noto Sans SC', sans-serif;
 
    --lo-border-color: var(--swatch-border-color), .215;
    --lo-hr-color: 198, 198, 198
}
 
/* 分割线 */
 
hr {
    background: transparent;
    height: 0;
    border-top: none;
    border-bottom : 2px solid rgb(var(--lo-hr-color))
}
 
/* 引用块 */
 
blockquote, .blockquote {
    box-shadow: 0 0.0625rem 0.125em rgba(var(--swatch-menubg-black-color), 0.15);
    border: 0.0825rem solid rgba(var(--lo-border-color));
}
 
/* 侧边栏 */
 
#side-bar div.menu-item a, #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.top-bar>ul>li>ul>li>a:hover, #top-bar div.top-bar>ul>li>ul>li>ul>li>a { transition: background .3s }
 
#side-bar div.menu-item a::before, #top-bar div.top-bar>ul>li>ul>li>a:before, #top-bar div.top-bar>ul>li>ul>li>a:hover:before, #top-bar div.top-bar>ul>li>ul>li>ul>li>a:before { display: none }
 
/* 页面整体 和 版头 */
 
#container { background-image: none }
 
#header h1 { top: 2rem }
#header h2 { top: 2.75rem }
 
#skrollr-body { 
    box-shadow: 0 0.15rem 0.15rem rgba(0,0,0,0.2);
    height: var(--final-header-height-on-desktop)
}
 
/* 页面内容 */
 
#page-title { 
    display:flex;
    border-bottom: none;
    margin: 0
}
 
#page-title::after {
    content:"";
    flex-grow:1;
    height: 2px;
    margin:auto .375rem auto auto;
    background-color: rgb(var(--lo-hr-color));
    display: block;
    margin:auto auto auto .375rem;
}
 
h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0
}
 
a, span[style="text-decoration: underline;"] { text-underline-offset: 3px }
 
#footer { color: rgb(var(--white-monochrome)) }
 
.footnotes-footer {
    margin: 0.5rem 0;
    width: 100%
}
 
.f-footer { display: none }
 
#license-area {
    padding: 0.25rem 0;
    background: rgb(var(--pale-gray-monochrome));
    font-size: 92.5%;
}
.hovertip {
    border: none!important;
    background-color: rgb(var(--pale-gray-monochrome))!important;
    box-shadow: 0 0.1rem 0.215rem rgba(0,0,0,0.2);
    padding: 0.2rem 0.25rem
}
 
div.lightblock {
    background-color: rgba(200,200,200,0.225);
}
 
.scp-image-block { 
    border: solid 0.45rem rgb(var(--swatch-secondary-color)); 
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); 
}
 
/* 评分模块 */
 
@media screen and (min-width: 1200px) {
    .rate-fix { margin-top: -2.625rem } 
    .rate-fix .rateBox,
    .rate-fix :not(.rate-box-with-credit-button) .page-rate-widget-box {
        border-left: 0.5rem solid rgb(var(--white-monochrome))
    }
}

这是什么

我CroquemboucheCroquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

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

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件（只会改变一点点东西）：

个人自定义版式（在视觉上有大的变化）：

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

@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; }

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

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;
}

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

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

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

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

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

: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中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

.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; }
评分: 0+–x

著作信息


隐藏用户信息和搜索栏组件
作者：MercuresphereMercuresphere

如果您喜欢我的风格的话，欢迎您来我的作者页看看我的其他作品。

评分: 0+–x

这是什么？

这个组件可以改变顶栏当中用户信息和搜索栏两部分的显示状态，使其变为可折叠并默认隐藏。

使用方法：

若需使用本组件，请在你页面的任意位置插入以下代码：

[[include :backrooms-wiki-cn:component:toggle-search-top-box]]

这个组件可以适配大部分版式的配色方案，遇到不能适配的少数场合（如采用亮色系版头的版式）可以额外引入以下代码修改配色：

[[module CSS]]
:root, :root:lang(cn) {
--merc-light-color: var(--swatch-menutxt-light-color); /*修改此变量来改变主要颜色*/
--merc-dark-color: var(--swatch-menubg-dark-color); /*修改此变量来改变鼠标移到链接上时链接文字颜色*/
}
[[/module]]

+ 展开样式代码
Footnotes
备份组件
页面版本: 86, 最后编辑于: 25 Nov 2023 02:00
编辑 评分 (0) 标签 讨论 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License