时区转换器

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

这是什么

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

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

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

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

用法

在任意维基上：

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

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

相关组件

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

• RSO组件 — Rounderhouse

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

• Magnus网络格式 — DrMagnus
• flop风格 CSS — Lt Flops
• 空白风格 CSS — HarryBlank
• 占位风格 CSS — Placeholder McD

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

这是什么

一个可以显示读者所在时区的给定时间和/或日期的组件。

读者的时区将被自动计算。你所需要作的就是将你所需时间的时区输入到页面之中。

如果你的时区能够匹配读者的时区，那么该组件将不会出现。这是故意的！如果读者需要的话它还是会出现的。

请注意以下夏令时制为例外：当“EST”¹与“EDT”²被输入到该组件中时，其将会转换为美国/纽约时区，然后再根据一年中的时间转换为 EST 或者 EDT。“BST”³将会转换为欧洲/伦敦时区，然后再根据一年中的时间转换为 GMT⁴ 或者 BST。为避免此种混乱，请避免使用非常依赖夏令时的时区！使用如 UTC⁵ 这样的静态时区。

>>> 演示 <<<

用法

将以下代码复制到你的页面中：

[[include :scp-wiki-cn:component:tz
| time=18:00
| tz=UTC
]]

以斜体所示的设置为可选项。其它所有设置均为必填。如果你省略了一个可选设置，那么它将会使用其默认值。如果你省略了一个非可选的设置，那么就不要期望组件能够正常运作了。

若需省略设置，仅需将其完全留空即可。

time	事件所发生的时间。这个时间应该是两个数字，后跟一个半角冒号“:”，再后跟两个数字。“18:30”是可以的。“1830”、“下午 6:30”以及“傍晚六点三十分”是不可以的。
tz （可选）	你所输入的时间所在的的时区。 默认值：UTC
date （可选）	以 ISO 格式 YYYY-MM-DD 输入的事件日期。 日期可能可以在某些时候被用以计算“直至某时”之类的事情，但是现在还没有这么用过。 默认值：今天
text_before （可选）	在被转换的时间之前的文本。 默认值："${time} ${tz} 即 "
text_after （可选）	在被转换的时间之后的文本。 默认值："。"

---

---

代码库

转换器的 HTML 结构

很不幸它被掩盖在源代码之中——你得自己去挖掘了！

用以运作转换器的 JS

document.addEventListener("DOMContentLoaded", function() {
  console.log(date);
  date = date === "{$date}" ? moment().format("Y-MM-DD") : date;
  console.log(date);
  tz = tz === "{$tz}" ? "UTC" : tz;
  tz = tz === "EST" ? "America/New_York" : tz;
  tz = tz === "EDT" ? "America/New_York" : tz;
  tz = tz === "BST" ? "Europe/London" : tz;
 
  given_time = moment.tz(date + " " + time, tz);
  tz = given_time.format("z");
 
  text_before = text_before === "{$text_before}" ? "${time} ${tz} 即 " :
text_before;
  text_after = text_after === "{$text_after}" ? "。" : text_after;
  // eval is used here to convert text strings to template literals
  // variables of the form ${var} will be parsed
  text_before = eval('`' + text_before + '`');
  text_after = eval('`' + text_after + '`');
 
  user_tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
  converted_time = given_time.tz(user_tz);
  converted_time_tz = converted_time.format("HH:mm z");
 
  console.log(given_time);
  console.log(converted_time);
 
  document.getElementById("text_before").textContent = text_before;
  document.getElementById("text_converted").textContent = converted_time_tz;
  document.getElementById("text_after").textContent = text_after;
 
  if (converted_time.format("z") === tz) {
    // e.g. displaying an EST time to an EST user - that's pointless!
    document.documentElement.style.display = 'none';
  }
});

用以修改输出外部样式的 CSS

.timezone-thingy { margin-top: -0.5rem; }
.timezone-thingy iframe { border: none; max-height: 3.5rem; }

用以修改输出内部样式的 CSS

#wrapper {
  padding: 0.5rem !important;
  border: 1px solid #660000;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(102,0,0,.5);
  background: white;
  margin: 0.5rem 0;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#wrapper p {
  margin: 0;
}
#wrapper img {
  height: 1rem;
  vertical-align: text-top;
}

Footnotes

1. 译注：即美国东部时间，为西五区时间，比北京时间慢 13 个小时。

2. 译注：即美国东部夏令时间，为西四区时间，比北京时间慢 12 个小时。

3. 译注：即英国夏令时间，为东一区时间，比北京时间慢 7 个小时。

4. 译注：即格林尼治标准时间，比北京时间慢 8 个小时。

5. 译注：即协调世界时，比北京时间慢 8 个小时。