NewTech/rustui-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(terminal): add WebGL renderer and addon APIs

Browse Source
This commit is contained in:
zhangheng
2026-06-23 16:48:53 +08:00
parent f76d341501
commit 69a670939d
15 changed files with 4199 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
style/tailwind.css
View File

@@ -590,6 +590,7 @@
.terminal-screen {
@apply relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden rounded;
min-height: 250px; /* 12 rows * 18px + 16px vertical padding + 1px border */
padding: 16px;
border: 1px solid #17202f;
background:
@@ -597,12 +598,14 @@
linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
outline: none;
color: #dbeafe;
font-family:
color: var(--terminal-fg, #dbeafe);
font-family: var(
--terminal-font-family,
"JetBrains Mono", "Fira Code", "Cascadia Code", "SFMono-Regular",
"Consolas", monospace;
font-size: 13px;
line-height: 18px;
"Consolas", monospace
);
font-size: var(--terminal-font-size, 13px);
line-height: var(--terminal-line-height, 18px);
white-space: pre;
letter-spacing: 0;
scrollbar-gutter: stable;
@@ -636,15 +639,24 @@
line-height: 1px;
}
.terminal-canvas {
position: absolute;
left: 0;
z-index: 0;
pointer-events: none;
}
.terminal-text {
margin: 0;
min-height: 100%;
color: #dbeafe;
font-family:
color: var(--terminal-fg, #dbeafe);
font-family: var(
--terminal-font-family,
"JetBrains Mono", "Fira Code", "Cascadia Code", "SFMono-Regular",
"Consolas", monospace;
font-size: 13px;
line-height: 18px;
"Consolas", monospace
);
font-size: var(--terminal-font-size, 13px);
line-height: var(--terminal-line-height, 18px);
white-space: pre-wrap;
word-break: break-word;
}
@@ -659,9 +671,9 @@
.terminal-row {
position: relative;
z-index: 1;
height: 18px;
min-height: 18px;
max-height: 18px;
height: var(--terminal-line-height, 18px);
min-height: var(--terminal-line-height, 18px);
max-height: var(--terminal-line-height, 18px);
overflow: hidden;
white-space: pre;
}
@@ -674,11 +686,45 @@
}
.terminal-cursor {
background: #dbeafe !important;
color: #0f172a !important;
position: relative;
animation: var(--terminal-cursor-blink, none) 1s steps(2, start) infinite;
}
.terminal-cursor::after {
position: absolute;
inset: 0;
display: block;
content: "";
pointer-events: none;
background: var(--terminal-cursor-bg, #dbeafe);
}
.terminal-shell-card[style*="--terminal-cursor-style:block"] .terminal-cursor {
background: var(--terminal-cursor-bg, #dbeafe) !important;
color: var(--terminal-cursor-fg, #0f172a) !important;
box-shadow: 0 0 0 1px rgb(219 234 254 / 30%);
}
.terminal-shell-card[style*="--terminal-cursor-style:block"] .terminal-cursor::after {
display: none;
}
.terminal-shell-card[style*="--terminal-cursor-style:underline"] .terminal-cursor::after {
top: auto;
height: 3px;
}
.terminal-shell-card[style*="--terminal-cursor-style:bar"] .terminal-cursor::after {
right: auto;
width: 2px;
}
@keyframes terminal-cursor-blink {
50% {
opacity: 0;
}
}
/* Absolute-positioning virtual scroll: the sizer holds the full content
height so the scroll geometry is constant; the rows layer is translated
to the visible window's offset. */
@@ -698,9 +744,32 @@
.terminal-selection {
position: absolute;
background: rgb(56 189 248 / 30%);
background: var(--terminal-selection-bg, rgb(56 189 248 / 30%));
pointer-events: none;
z-index: 0;
z-index: 1;
}
.terminal-search-match {
position: absolute;
background: rgb(250 204 21 / 28%);
box-shadow: inset 0 0 0 1px rgb(250 204 21 / 55%);
pointer-events: none;
z-index: 1;
}
.terminal-link-hitbox {
position: absolute;
display: block;
padding: 0;
border: 0;
border-bottom: 1px solid rgb(125 211 252 / 75%);
background: transparent;
cursor: pointer;
z-index: 3;
}
.terminal-link-hitbox:hover {
background: rgb(125 211 252 / 14%);
}
.terminal-measure {
@@ -708,6 +777,13 @@
left: -9999px;
top: 0;
white-space: pre;
font-family: var(
--terminal-font-family,
"JetBrains Mono", "Fira Code", "Cascadia Code", "SFMono-Regular",
"Consolas", monospace
);
font-size: var(--terminal-font-size, 13px);
line-height: var(--terminal-line-height, 18px);
pointer-events: none;
opacity: 0;
}