From a311ae49d52b8cae24136e6117a2b2959eedf925 Mon Sep 17 00:00:00 2001
From: Drew Bednar <drew@runcible.io>
Date: Fri, 9 Aug 2024 09:57:43 -0400
Subject: [PATCH] Deal with browser default

---
 index.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 63b8bd1..ca8d2a3 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Serial Console</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      select:focus {
+        outline: none;
+        box-shadow: none;
+      }
+    </style>
   </head>
   <body class="min-h-screen m-0 p-0 bg-gradient-to-b from-neutral-100 to-neutral-50">
     <div class="flex flex-col h-3/4" id="container">
@@ -15,22 +21,22 @@
           <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
             <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
               <label for="serial-select" class="text-sm font-medium leading-6 text-gray-900">Port:</label>
-              <select id="serial-select" name="serial-select" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6">
+              <select id="serial-select" name="serial-select" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6">
                 <option value="">Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
               </select>
-              <button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+              <button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 size-6"  fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" >
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>    
               </button>
-              <button id="refresh-ports" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+              <button id="refresh-ports" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" class="h-5 w-5 text-gray-600 size-6">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                 </svg>
                 
               </button>
               <label for="baud" class="text-sm font-medium leading-6 text-gray-900">Baud:</label>
-              <select id="baud" name="baud" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6">
+              <select id="baud" name="baud" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6">
                 <option value="4800">4800</option>
                 <option value="9600">9600</option>
                 <option value="19200">19200</option>
