first commit

xterminal/theme/index.css

@@ -0,0 +1,102 @@
+/**
+ * XTerminal styles
+ * @author Henry Hale
+ * @license MIT
+ * @url https://github.com/henryhale/xterminal
+ */
+
+:root {
+  --xt-bg: #191a22;
+  --xt-fg: #efefef;
+  --xt-font-family: monospace;
+  --xt-font-size: min(15px, calc(2vw + 5px));
+  --xt-padding: min(6px, calc(1.25vw + 4px));
+}
+
+.xt,
+.xt *,
+.xt *::after,
+.xt *::before {
+  box-sizing: border-box;
+  font-size: var(--xt-font-size);
+  font-family: var(--xt-font-family);
+}
+
+.xt {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: var(--xt-bg);
+  color: var(--xt-fg);
+  padding: var(--xt-padding);
+  padding-bottom: calc(var(--xt-padding) + var(--tc-toolbar-height, 0px));
+  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-wrap: break-word;
+}
+
+.xt > .xt-stdout > span:first {
+  word-wrap: break-word;
+}
+
+.xt > .xt-stdout > .xt-cursor {
+  background-color: var(--xt-fg);
+  color: var(--xt-bg);
+  border: 0.25px solid transparent;
+  /* 终端聚焦时使用方块光标闪烁，模拟命令行输入体验。 */
+  animation: xt-cursor-blink 1.6s steps(1, end) infinite;
+}
+
+.xt.xt-inactive > .xt-stdout > .xt-cursor {
+  background-color: transparent;
+  color: var(--xt-fg);
+  border-color: currentColor;
+  animation: none;
+}
+
+.xt > .xt-stdin {
+  height: 0;
+  position: relative;
+  margin-top: 2px;
+}
+
+.xt > .xt-stdin > input,
+.xt > .xt-stdin > textarea {
+  border: 0 none;
+  outline: 0 none;
+  /* 使用 fixed 悬浮在顶部顶端，避免 iOS Safari 因为聚焦底部的 input 而强行将整个网页（body）整体上推，从而破坏底部原生工具栏/地址胶囊的透明悬浮效果 */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  z-index: -100;
+  resize: none;
+  overflow: hidden;
+  white-space: pre;
+  appearance: none;
+  -webkit-appearance: none;
+  /* 隐藏浏览器原生插入光标，避免与自绘方块光标重叠。 */
+  caret-color: transparent;
+  /* iOS Safari 在输入框字号小于 16px 时会触发页面自动放大，导致聚焦后产生空白黑边。 */
+  font-size: 16px;
+}
+
+@keyframes xt-cursor-blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.xt .xt-hidden {
+  display: none;
+}