占位风格 CSS 
/* 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;
    }
    }
}
占位风格 CSS
作者：Placeholder McDPlaceholder McD
发布于：2021/03/10

以上页面信息表格由 authorbox——一个位于左侧的 sidebox——中的 Listpages 模块自动生成。这将会自动添加到引用此页的所有页面，除非将占位风格引用块置于 display: none; 的 div 元素中。它位于左侧，以便与传统的 sidebox 完美地配合使用。它会在移动端上隐藏。

placeholderword.png

.

著作信息

占位风格 CSS
作者：Placeholder McDPlaceholder McD

感谢 CroquemboucheCroquembouche、EstrellaYoshteEstrellaYoshte、和 NagirosNagiros 共同制作了大部分此版式中所引用的代码。

这是什么？

这是占位风格 CSS：由 EstrellaYoshteEstrellaYoshte 的半影版式分化而来，由 Placeholder McDPlaceholder McD 为其作品所制作。它的存在使其能轻易地被更新并广泛应用于作品中。它基本上是半影版式，去除了我不想要的东西，添加了 HarryBlankHarryBlank 的 空白风格 CSS 中我喜欢的东西，以及一些额外的好东西！

它几乎肯定不能和其他版式一起使用，尤其是黑色标记笔。除非你知道你在干什么，否则不要使用此版式。

使用方法

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:placestyle]]

注意此版式包含以下组件：

当你将此版式与著作信息模块一起使用时，将模块置于一个 [[div]] 元素中确保信息栏不会因渐显而延迟显示。

此版式借用了 PeppersGhostPeppersGhost 的 Peppo 的插图方块以及 EstrellaYoshte 的代码，以将基础图像和插图方块居中，使它们在更小的屏幕上看起来更美观（见于：移动端）。它还借用了半影版式中 Estrella 的天才 sidebox 技术，几乎所有代码衍生自半影版式。

感谢 CroquemboucheCroquembouche、EstrellaYoshteEstrellaYoshte、和 NagirosNagiros 共同制作了大部分此版式中所引用的代码。

以上表格位于常规的 sidebox 中。利用 limit div 元素，sidebox 可以只附加至特定文本段落。如果你滚动浏览此页的代码，你会注意到 sidebox 不会超过“源代码”标题。

占位风格 CSS 和半影的主要区别有：

  • 正文字体（Verdana）匹配 Sigma-9
  • 页眉字体（BauhausLTDemi）匹配空白风格
  • 类似 Sigma-9 的简化 scp 插图方块
  • 表格内边距（sidebox 中的除外），类似空白风格
  • 表格标题格根据 accentColor 着色
  • tableb div 分离其内部表格的单元格（以及 image-captions！），类似空白风格
  • bt span 元素加粗并改变文本颜色（根据 accentColor），类似 NatVoltaicNatVoltaic 和 stormbreathstormbreath 的 直抵群星版式（为了方便阅读，它实际上比你使用的任何 accentColor 更亮一点）
  • 方形切换侧边栏按钮
  • 更好的脚注根据 accentColor 自动调整
  • ACS 组件重新配色以适配暗色版式，类似 NagirosNagiros 的 夜行版式
  • ACS 组件左上角没有“项目编号：”文本，类似空白风格
  • hideLocation="both" 的华丽的折叠显示得更加直观
  • authorbox，一个位于左侧的 sidebox，通过 listpages 显示作者信息，将会自动添加到使用此版式的所有页面（除非将引用块置于 div style="display: none;" 元素中）。它们不会和常规 sidebox 冲突。

示例

前往讨论区查看补丁说明。

源代码：

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