Merge pull request #55 from phanan/window-btn

feat(ui): more accurate terminal button style
ghostty-org · Dec 19, 2024 · dfce209 · dfce209
2 parents cd2683e + dc4d27b
commit dfce209
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/components/terminal/Terminal.module.css b/src/components/terminal/Terminal.module.css
@@ -1,7 +1,12 @@
 .terminal {
   --code-margin-top: 12px;
-  --control-size: 10px;
-  --padding: 10px;
+  --control-size: 12px;
+  --padding: 7px;
+
+  /* Mac's traffic light button colors */
+  --color-sunset-orange: #ff605c;
+  --color-pastel-orange: #ffbd44;
+  --color-malachite: #00ca4e;
 
   &.fontXTiny {
     --title-font-size: 12px;
@@ -53,7 +58,7 @@
     & .windowControls {
       list-style: none;
       display: flex;
-      gap: 6px;
+      gap: 8px;
 
       & li {
         width: var(--control-size);
@@ -66,6 +71,7 @@
       position: absolute;
       left: 50%; transform: translateX(-50%);
       font-size: var(--title-font-size);
+      top: 1px;
     }
   }
 
@@ -86,4 +92,20 @@
       }
     }
   }
+
+  &:focus {
+    & .header {
+      & .windowControls {
+        & li:first-child {
+          background: var(--color-sunset-orange);
+        }
+        & li:nth-child(2) {
+          background: var(--color-pastel-orange);
+        }
+        & li:last-child {
+          background: var(--color-malachite);
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/terminal/index.tsx b/src/components/terminal/index.tsx
@@ -51,6 +51,7 @@ export default function Terminal({
   const padding = " ".repeat(whitespacePadding);
   return (
     <div
+      tabIndex={0}
       className={classNames(s.terminal, className, {
         [s.fontXTiny]: fontSize === "xtiny",
         [s.fontTiny]: fontSize === "tiny",