121 lines
2.6 KiB
CSS
121 lines
2.6 KiB
CSS
.Terminal {
|
|
--char-width: 0.585rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 0.5rem;
|
|
overflow: auto;
|
|
height: 100%;
|
|
cursor: text;
|
|
}
|
|
|
|
.Terminal * {
|
|
font-family: var(--mono-font-family);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.Terminal p, .Terminal pre {
|
|
margin: 0;
|
|
min-height: 1.25rem;
|
|
}
|
|
|
|
.Prefix {
|
|
display: flex;
|
|
width: max-content;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.Input, .Output {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
line-height: 1.25rem;
|
|
font-size: 1rem;
|
|
text-align: start;
|
|
white-space: pre;
|
|
}
|
|
|
|
.Input {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.Input-container {
|
|
--cursor-width: var(--char-width);
|
|
--cursor-offset: 0;
|
|
|
|
position: relative;
|
|
height: 100%;
|
|
width: fit-content;
|
|
/* margin-left: var(--char-width); */
|
|
}
|
|
|
|
.Input-container::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(var(--cursor-offset) * var(--char-width) * 0.9746124950079872);
|
|
width: var(--cursor-width);
|
|
height: 100%;
|
|
background-color: var(--foreground-color-a);
|
|
animation: blink 1000ms step-end infinite;
|
|
}
|
|
|
|
.Input-container input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
font-size: inherit;
|
|
caret-color: transparent;
|
|
}
|
|
|
|
@keyframes blink {
|
|
from, to {
|
|
background-color: transparent;
|
|
}
|
|
50% {
|
|
background-color: var(--foreground-color-a);
|
|
}
|
|
}
|
|
|
|
.Input label {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: text;
|
|
}
|
|
|
|
.ansi-black-fg { color: var(--dark-grey-e); }
|
|
.ansi-red-fg { color: var(--red-b); }
|
|
.ansi-green-fg { color: var(--green-b); }
|
|
.ansi-yellow-fg { color: var(--yellow-b); }
|
|
.ansi-blue-fg { color: var(--blue-b); }
|
|
.ansi-magenta-fg { color: var(--purple-b); }
|
|
.ansi-cyan-fg { color: var(--cyan-b); }
|
|
.ansi-white-fg { color: var(--grey-a); }
|
|
|
|
.ansi-bright-black-fg { color: var(--dark-grey-d); }
|
|
.ansi-bright-red-fg { color: var(--red-a); }
|
|
.ansi-bright-green-fg { color: var(--green-a); }
|
|
.ansi-bright-yellow-fg { color: var(--yellow-a); }
|
|
.ansi-bright-blue-fg { color: var(--blue-a); }
|
|
.ansi-bright-magenta-fg { color: var(--purple-a); }
|
|
.ansi-bright-cyan-fg { color: var(--cyan-a); }
|
|
.ansi-bright-white-fg { color: var(--white-a); }
|
|
|
|
.ansi-black-bg { background-color: var(--dark-grey-d); }
|
|
.ansi-red-bg { background-color: var(--red-a); }
|
|
.ansi-green-bg { background-color: var(--green-a); }
|
|
.ansi-yellow-bg { background-color: var(--yellow-a); }
|
|
.ansi-blue-bg { background-color: var(--blue-a); }
|
|
.ansi-magenta-bg { background-color: var(--purple-a); }
|
|
.ansi-cyan-bg { background-color: var(--cyan-a); }
|
|
.ansi-white-bg { background-color: var(--white-a); }
|