CSS Files Styling

src/lib/assets/css/terminal-page.css

@@ -0,0 +1,223 @@
+.terminal-page {
+	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+	background: var(--terminal-bg);
+	border: 1px solid var(--terminal-border);
+	border-radius: 12px;
+	overflow: hidden;
+	box-shadow: 
+		0 25px 50px -12px rgba(0, 0, 0, 0.4),
+		0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+	animation: terminalFadeIn 0.5s ease-out;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+@keyframes terminalFadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(20px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.terminal-header {
+	display: flex;
+	align-items: center;
+	padding: 0.75rem 1rem;
+	background: var(--terminal-bg-light);
+	border-bottom: 1px solid var(--terminal-border);
+	flex-shrink: 0;
+}
+
+.terminal-buttons {
+	display: flex;
+	gap: 8px;
+}
+
+.terminal-buttons .btn {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: opacity 0.2s;
+}
+
+.terminal-buttons .btn:hover {
+	opacity: 0.8;
+}
+
+.terminal-buttons .close {
+	background: #ff5f56;
+}
+
+.terminal-buttons .minimize {
+	background: #ffbd2e;
+}
+
+.terminal-buttons .maximize {
+	background: #27ca40;
+}
+
+.terminal-title {
+	flex: 1;
+	text-align: center;
+	font-size: 0.8rem;
+	color: var(--terminal-muted);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.terminal-icon {
+	font-size: 1rem;
+}
+
+.terminal-spacer {
+	width: 52px;
+}
+
+.terminal-body {
+	padding: 1rem 1.25rem;
+	flex: 1;
+	overflow-y: auto;
+	font-size: 0.9rem;
+	line-height: 1.6;
+}
+
+.terminal-line {
+	display: flex;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	margin-bottom: 0.25rem;
+	animation: lineSlideIn 0.2s ease-out;
+	min-height: 1.6em;
+}
+
+.terminal-line.blank {
+	min-height: 0.8em;
+}
+
+@keyframes lineSlideIn {
+	from {
+		opacity: 0;
+		transform: translateX(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.prompt {
+	display: inline-flex;
+	margin-right: 0.5rem;
+	flex-shrink: 0;
+}
+
+.prompt .user {
+	color: var(--terminal-user);
+}
+
+.prompt .separator {
+	color: var(--terminal-text);
+}
+
+.prompt .path {
+	color: var(--terminal-path);
+}
+
+.prompt .symbol {
+	color: var(--terminal-text);
+	margin-left: 0.25rem;
+}
+
+.content {
+	color: var(--terminal-text);
+	word-break: break-word;
+	white-space: pre-wrap;
+}
+
+.terminal-line.output .content {
+	color: var(--terminal-muted);
+}
+
+.terminal-line.error .content {
+	color: #f38ba8;
+}
+
+.terminal-line.success .content {
+	color: #a6e3a1;
+}
+
+.terminal-line.info .content {
+	color: var(--terminal-primary);
+}
+
+.terminal-line.header .content {
+	color: var(--terminal-accent);
+	font-weight: 600;
+	font-size: 1rem;
+}
+
+.header-text {
+	color: var(--terminal-accent);
+	font-weight: 600;
+}
+
+.terminal-image {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.5rem 0;
+}
+
+.terminal-image img {
+	border-radius: 8px;
+	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 {
+	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 styling */
+.terminal-body::-webkit-scrollbar {
+	width: 8px;
+}
+
+.terminal-body::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.terminal-body::-webkit-scrollbar-thumb {
+	background: var(--terminal-border);
+	border-radius: 4px;
+}
+
+.terminal-body::-webkit-scrollbar-thumb:hover {
+	background: var(--terminal-muted);
+}