save file

Author: javascript-2020

utils/misc/nodejs-terminal/html/terminal-tabs/terminal-tabs.html

@@ -4,21 +4,39 @@
 
             <style>
 
+  #tabs
+    {display:flex;align-items:center}
+    
   #tab-remove
     {content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABF1BMVEVHcEyGBweHBgh3Bge2CQmhCAh0BAScICCLAwSUBQWhBwesCgmYHB2yCAhqAACPBgaLBATBDw+ySEixCwuIHh+1cXG5Pz+ICQqvCAiOGBiMNTW+CgqTLCymGRrXFhaQBQWXDg6KBASCJCTPFhWzWlqyYWG0amqfBgahBgaxU1OAHBynFhalHx+6Nze3UFC6Dw/QGxviJCPVHBzpJyfLGBi0DQ3DFRXbICDwKyurCQmkCAjKEA+rNzbCExPIFRXYHx+6OjvGc3KoLi3HVFTKTk7KhYa1KyvCZ2bIfHyxPj7GQUGdBga/ExPOSkrDXV3GWVi+NjbIISG7RkbPRESnQUDDYGDFbWz4Ly+fIiLLNDTLLSyvGxu0ICBd3WfgAAAAP3RSTlMADQkKmooPlwf+lf2EjwaXjP39/Yb+/YOHk42Im6D8e5V2e/39/v51dPp1/f75/v////////////////////5MMZLNAAABr0lEQVQoz63TaVeCQBQG4AZDNk0FM8uy1faakWVQUsQlDERzyfb//zuaITWyvtX9ds9z7hnuew8rK3+v2EE2Hu3j2SyI6Nb6+nbEAffwsAkient7/OVEZbk291Dv7kpzB5wne57XmvnBMcFms3nExWc69rxarfW8EfJ5ieDjY7d7TZ1qzqm1WnNmskdNgtPpYMwBwDlj3xm6rnu5N3uMT5x1p4PB/X07t7Pj+P5w6L6/XewtPp1PyBTbnY4z9F9GGBqKJEYWZxIyxX7ffx1hXA+gElU6nyM4eRnptDBMgu+x8omryeQVIVVVkZ5JxpZjX2PdEVIbpmmqN6uxn1cRDVs1y6QIg2UFooIRUU3TfnEgSgFqmGWtQuqHg5QFddQoa2Xt6amyPE/UwJTNm2KFsnmY+XKQ6kmQsmqvJosVyqoN5x5PCZYBAzvcly8UyRMNpNcN8fMkG0KvqsAAk6zIvnzhkKyO7DqssiHvCj2rakCosGEafMFGSMeBIe1+BpIWrKpiSOwsKz6fsXEAF33oFsss8s9DqoueSQu9NBO5T16JKJnf3/92Beb0JPYPf9cHYVZOYoUNWy4AAAAASUVORK5CYII=);
       }
   #tab-add
     {content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABCFBMVEVHcEwsbhUzehkvjQ8+jCMvjQ8kcglClyUmbwsvlA0wkA8vkA8vhRBfpkdRoDZKmi8ygRUxghQ1hBhYoj5WnT1ipkkxdxgqZRc4jBxvsFl5tWSEunAujQ42jBlRoTZrqlRkrEswghIvjg5UpzhVnDtapUAvjw4xqQkyrQg0wAVhu0N0vFwwogo0wwU0vQdbwzhqu06Dv29ZvTh6vmMzuwcvmws1yQQysghpv0xjwUM0xgQxpgo1zwNwvlUzuQdesUN+uWk1zQM32wE21wEwngsysQg20gM20wOOwX0vlgwztgdNwCdUsDZrtlJBwBhTxC0ztAiXxoaIvHV0t1w5qRQ/uhZMrysyswlFMW2JAAAAJ3RSTlMACA69W8oQwwv3ysFVzc6+JFAsyL3GGgSl+vr6+LLIzvlM9vav/PUMpL8QAAABdUlEQVQoz3XTd3OCMByAYcAtrbU46mxrF1sBERWUoaC4t37/b9KQ0mu9M++fPOHILxcw7C8qCqOwmyXz1Wq1UimXnm5y/GW38/29ncdR7O/3NpLvfVm27cMDimW5zR9WaG7z/ArNbX4oSRaKM4FyVgLFUq/PKctrxpNJAlbMSH1FUc6JIhEG1lEfhUIhl8s9P2feuVZrcTqm0qBYUD2LRStgHLgnjlM2a3PO0IYhCG6nM5vVHrFoGYwzHPb6ffBqE6Sa860H1gjuDwPt9QBu1iwriiLLNs15N/DOG+BXXpJCFXVd03UxcI/55VXwVWVxarKi5jiOpgPeQv5qYNFPy7KWy/ORphnTmUwclYGbC/ZWa2BUPQEjSTJ1GYzH022KjISVsvBYYHgxfZmMRuMtGcfDrq4Nke4G3CVvnzmR9gbj0dRDMuNMpw4TQTENBtNoNIuapiM5ZoBDZQ0kCyrLqgKSXcbzGBfBeD0FQ/xEGHUHy/579A2kI0bteO9EmQAAAABJRU5ErkJggg==);
       }
 
+  .tab
+    {border-top-left:5px;border-top-right:5px;border-style:solid;border-width:1px;padding:5px 10px}
+    
+  #hldr
+    {padding:10px;border:2px solid lightgray;box-sizing:border-box;flex:1;background:hsl(45,86%,98%)}
+    
+  #terminal
+    {height:100%;position:relative;z-index:0}
+    
+    
+  .active
+    {border-color:green;background:lightyellow}
+  .inactive
+    {border-color:gray;background:lightgray}
+    
             </style>
 
             <div id=tabs>
                   <div id=tab-icons>
                         <img id=tab-remove class=icon>
                         <img id=tab-add class=icon>
                   </div>
-                  <div class=tab>
+                  <div class=tab style='display:none'>
                   </div>
             </div>