CSS Files Styling

src/lib/assets/css/tui-body.css

@@ -0,0 +1,227 @@
+.tui-body {
+	flex: 1;
+	padding: 1rem 1.25rem 2rem 1.25rem;
+	overflow-y: auto;
+	overflow-x: hidden;
+	font-size: 0.9rem;
+	line-height: 1.7;
+	min-height: 0;
+}
+
+/* Inline group wrapper - groups consecutive inline elements */
+.tui-inline-group {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-bottom: 0.2rem;
+	animation: lineSlideIn 0.15s ease-out;
+}
+
+.inline-content {
+	display: inline;
+	white-space: pre-wrap;
+}
+
+.inline-content.output {
+	color: var(--terminal-muted);
+}
+
+.inline-content.info {
+	color: var(--terminal-primary);
+}
+
+.inline-content.success {
+	color: #a6e3a1;
+}
+
+.inline-content.error {
+	color: #f38ba8;
+}
+
+.inline-content.warning {
+	color: #f9e2af;
+}
+
+/* Lines */
+.tui-line {
+	display: flex;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	margin-bottom: 0.2rem;
+	animation: lineSlideIn 0.15s ease-out;
+	min-height: 1.7em;
+}
+
+.tui-line.blank {
+	min-height: 0.5em;
+}
+
+@keyframes lineSlideIn {
+	from {
+		opacity: 0;
+		transform: translateX(-5px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+/* Prompt styling */
+.prompt {
+	display: inline-flex;
+	margin-right: 0.5rem;
+	flex-shrink: 0;
+}
+
+.prompt .user {
+	color: var(--terminal-user);
+}
+
+.prompt .at {
+	color: var(--terminal-muted);
+}
+
+.prompt .host {
+	color: var(--terminal-accent);
+}
+
+.prompt .separator {
+	color: var(--terminal-muted);
+}
+
+.prompt .path {
+	color: var(--terminal-path);
+}
+
+.prompt .symbol {
+	color: var(--terminal-muted);
+	margin-left: 0.25rem;
+}
+
+/* Content */
+.content {
+	color: var(--terminal-text);
+	word-break: break-word;
+	white-space: pre-wrap;
+}
+
+.tui-line.output .content {
+	color: var(--terminal-muted);
+}
+
+.tui-line.error .content {
+	color: #f38ba8;
+}
+
+.tui-line.success .content {
+	color: #a6e3a1;
+}
+
+.tui-line.info .content {
+	color: var(--terminal-primary);
+}
+
+.tui-line.warning .content {
+	color: #f9e2af;
+}
+
+.header-text {
+	color: var(--terminal-accent);
+	font-weight: 600;
+	font-size: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+:global(.header-icon) {
+	opacity: 0.7;
+}
+
+:global(.inline-icon) {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0 0.15em;
+}
+
+/* Divider */
+.tui-divider {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin: 0.75rem 0;
+}
+
+.divider-line {
+	flex: 1;
+	height: 1px;
+	background: linear-gradient(
+		to right,
+		transparent,
+		var(--terminal-border),
+		transparent
+	);
+}
+
+.divider-text {
+	color: var(--terminal-muted);
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+/* Images */
+.tui-image {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.5rem 0;
+}
+
+.tui-image img {
+	border-radius: 6px;
+	border: 1px solid var(--terminal-border);
+	background: var(--terminal-bg-light);
+	object-fit: contain;
+}
+
+.image-caption {
+	color: var(--terminal-muted);
+	font-size: 0.8rem;
+	font-style: italic;
+}
+
+/* Cursor */
+.cursor {
+	display: inline-block;
+	width: 8px;
+	height: 1em;
+	background: var(--terminal-primary);
+	animation: cursorBlink 1s step-end infinite;
+	margin-left: 2px;
+	vertical-align: text-bottom;
+}
+
+@keyframes cursorBlink {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+/* Scrollbar */
+.tui-body::-webkit-scrollbar {
+	width: 6px;
+}
+
+.tui-body::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.tui-body::-webkit-scrollbar-thumb {
+	background: var(--terminal-border);
+	border-radius: 3px;
+}
+
+.tui-body::-webkit-scrollbar-thumb:hover {
+	background: var(--terminal-muted);
+}