CSS Files Styling

2025-11-28 17:43:48 +00:00
parent 8cdb39afbe
commit 4d17b599b3
54 changed files with 4817 additions and 1764 deletions
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { themeColors } from '$lib/stores/theme';
+	import '$lib/assets/css/terminal.css';

 	interface Props {
 		lines?: TerminalLine[];
@@ -162,189 +163,3 @@
 		{/if}
 	</div>
 </div>
-
-<style>
-	.terminal {
-		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;
-	}
-
-	@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: color-mix(in srgb, var(--terminal-bg) 80%, black);
-		border-bottom: 1px solid var(--terminal-border);
-	}
-
-	.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;
-		min-height: 200px;
-		max-height: 400px;
-		overflow-y: auto;
-		font-size: 0.9rem;
-		line-height: 1.6;
-	}
-
-	.terminal-line {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		margin-bottom: 0.25rem;
-		animation: lineSlideIn 0.2s ease-out;
-	}
-
-	@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;
-	}
-
-	.terminal-line.output .content {
-		color: var(--terminal-muted);
-	}
-
-	.terminal-line.error .content {
-		color: #ff6b6b;
-	}
-
-	.terminal-line.success .content {
-		color: #51cf66;
-	}
-
-	.terminal-line.info .content {
-		color: var(--terminal-primary);
-	}
-
-	.cursor {
-		display: inline-block;
-		width: 8px;
-		height: 1.2em;
-		background: var(--terminal-primary);
-		animation: cursorBlink 1s step-end infinite;
-		margin-left: 2px;
-		vertical-align: middle;
-	}
-
-	@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);
-	}
-</style>