MediaWiki:PreDiphicTyper.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* MediaWiki:PreDiphicTyper.css
 * Pre-Diphic打字页的样式。全部限定在#pd-typer里，不影响站内其他页面和Timeless皮肤。
 * 字体@font-face在MediaWiki:Common.css里。 */
#pd-typer {
  --pdt-bg: #0d211b; --pdt-bg2: #12302a; --pdt-fg: #d6e8dc; --pdt-mute: #7ea593;
  --pdt-line: #24493d; --pdt-acc: #7fc3a0; --pdt-key: #173a31;
  background: radial-gradient(ellipse at 15% 0%, var(--pdt-bg2), var(--pdt-bg) 60%) no-repeat, var(--pdt-bg);
  color: var(--pdt-fg);
  font: 15px/1.6 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 16px;
  border-radius: 8px;
  margin: 8px 0 16px;
}
#pd-typer *, #pd-typer *::before, #pd-typer *::after { box-sizing: border-box; }
#pd-typer .pd {
  font-family: "Pre-Diphic Mono", sans-serif;
  font-feature-settings: "rlig" 1, "ccmp" 1;
  line-height: 1;
}
#pd-typer .pd-typer-out {
  display: block; width: 100%; height: 420px; font-size: 48px;
  writing-mode: vertical-lr; padding: 16px;
  border: 1px solid var(--pdt-line); border-radius: 6px;
  background: rgba(0, 0, 0, .18); color: var(--pdt-fg);
  resize: vertical; caret-color: var(--pdt-acc); outline: none;
}
#pd-typer .pd-typer-out:focus { border-color: var(--pdt-acc); }
#pd-typer .pd-typer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
#pd-typer button {
  font: inherit; color: var(--pdt-fg); background: var(--pdt-key);
  border: 1px solid var(--pdt-line); border-radius: 5px; padding: 5px 12px; cursor: pointer;
}
#pd-typer button:hover { border-color: var(--pdt-acc); }
#pd-typer label, #pd-typer .pd-typer-label { color: var(--pdt-mute); font-size: 13px; }
#pd-typer .pd-typer-msg { color: var(--pdt-acc); font-size: 13px; }
#pd-typer .pd-typer-src {
  font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--pdt-mute);
  word-break: break-all; white-space: pre-wrap; min-height: 1.5em;
  padding: 6px 10px; border: 1px dashed var(--pdt-line); border-radius: 5px; margin-top: 4px;
}
#pd-typer .pd-typer-h { font-size: 14px; margin: 18px 0 6px; color: var(--pdt-acc); letter-spacing: .08em; font-weight: 600; }
#pd-typer .pd-typer-kb { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin: 8px 0 12px; }
#pd-typer .pd-typer-kb button { padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#pd-typer .pd-typer-kb .pd { font-size: 26px; writing-mode: vertical-lr; height: 30px; color: var(--pdt-acc); }
#pd-typer .pd-typer-kb small { font-size: 11px; color: var(--pdt-mute); }
@media (max-width: 600px) {
  #pd-typer { padding: 10px; }
  #pd-typer .pd-typer-out { height: 320px; font-size: 36px; }
}