xterm theme

public/css/style.min.css

@@ -54,6 +54,8 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
     --font-weight-medium: 500;
@@ -65,6 +67,7 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --blur-xl: 24px;
@@ -782,6 +785,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -954,7 +961,39 @@
     letter-spacing: 0.5px;
   }
   .xterm {
-    background-color: #111426 !important;
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+  .xterm .xterm-viewport {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 #1f2937;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-track {
+    background: #1f2937;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+  }
+  .xterm .xterm-screen {
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .xterm .xterm-char {
+    line-height: 1.2;
+  }
+  .xterm .xterm-rows {
+    overflow: hidden;
+    white-space: pre-wrap;
   }
   #app {
     flex-grow: 1;