103 lines
2.2 KiB
CSS
103 lines
2.2 KiB
CSS
/**
|
||
* 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;
|
||
}
|