+ {#if filteredLogs.length === 0 && searchQuery.trim() !== ''}
+
No matching logs found...
+ {:else if logs.length === 0}
No output yet...
{:else}
- {#each logs as log, i}
+ {#each filteredLogs as log, i}
{formatTime(log.timestamp)}
{log.message}
@@ -91,6 +192,40 @@
border-bottom: 1px solid #3a3a3a;
}
+ .search-bar {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ background-color: #252525;
+ border-bottom: 1px solid #3a3a3a;
+ }
+
+ .search-bar :global(.search-icon) {
+ color: rgba(255, 255, 255, 0.4);
+ flex-shrink: 0;
+ }
+
+ .search-input {
+ flex: 1;
+ background-color: #1a1a1a;
+ color: rgba(255, 255, 255, 0.87);
+ border: 1px solid #3a3a3a;
+ padding: 0.375rem 0.5rem;
+ font-size: 0.875rem;
+ font-family: 'Courier New', monospace;
+ outline: none;
+ transition: border-color 0.2s;
+ }
+
+ .search-input:focus {
+ border-color: rgba(255, 255, 255, 0.4);
+ }
+
+ .search-input::placeholder {
+ color: rgba(255, 255, 255, 0.3);
+ }
+
.log-title {
font-size: 0.75rem;
font-weight: 600;
@@ -126,6 +261,26 @@
cursor: not-allowed;
}
+ .action-button.pause-active {
+ color: rgba(255, 200, 100, 0.9);
+ background-color: rgba(255, 200, 100, 0.15);
+ }
+
+ .action-button.pause-active:hover {
+ color: rgba(255, 200, 100, 1);
+ background-color: rgba(255, 200, 100, 0.25);
+ }
+
+ .action-button.search-active {
+ color: rgba(100, 200, 255, 0.9);
+ background-color: rgba(100, 200, 255, 0.15);
+ }
+
+ .action-button.search-active:hover {
+ color: rgba(100, 200, 255, 1);
+ background-color: rgba(100, 200, 255, 0.25);
+ }
+
.log-content {
flex: 1;
overflow-y: auto;