Improve tab styles

dist/electron-tabs.js

@@ -1,4 +1,4 @@
-var $5580883c37846f86$export$2e2bcd8739ae039 = ".etabs-tabgroup {\n  width: 100%;\n  height: 32px;\n  background-color: #ccc;\n  cursor: default;\n  font: caption;\n  font-size: 14px;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n}\n\n.etabs-tabgroup.visible {\n\tdisplay: block;\n}\n\n.etabs-tab {\n  display: none;\n  position: relative;\n  color: #333;\n  height: 22px;\n  padding: 6px 8px 4px;\n  border: 1px solid #aaa;\n  border-bottom: none;\n  border-left: none;\n  background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);\n  font: caption;\n  font-size: 14px;\n  background-color: #ccc;\n  cursor: default;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n  padding-bottom: 0;\n}\n\n.etabs-tab:first-child {\n  border-left: none;\n}\n\n.etabs-tab.visible {\n  display: inline-block;\n}\n\n.etabs-tab.active {\n  background: #fff;\n}\n\n.etabs-tab.flash {\n  background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);\n}\n\n/* TODO: fix it */\n.etabs-buttons {\n  float: left;\n}\n\n.etabs-buttons button {\n  float: left;\n  color: #333;\n  background: none;\n  border: none;\n  font-size: 12px;\n  margin-top: 6px;\n  border-radius: 2px;\n  margin-left: 4px;\n  width: 20px;\n  text-align: center;\n  padding: 4px 0;\n}\n\n.etabs-buttons button:hover {\n  color: #eee;\n  background-color: #aaa;\n}\n\n.etabs-tab-badge {\n  position: absolute;\n  right: 0;\n  top: -7px;\n  background: red;\n  border-radius: 100%;\n  text-align: center;\n  font-size: 10px;\n  padding: 0 5px;\n}\n\n.etabs-tab-badge.hidden {\n  display: none;\n}\n\n.etabs-tab-icon {\n  display: inline-block;\n  height: 16px;\n}\n\n.etabs-tab-icon img {\n  max-width: 16px;\n  max-height: 16px;\n}\n\n.etabs-tab-title {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons button {\n  display: inline-block;\n  color: #333;\n  background: none;\n  border: none;\n  width: 20px;\n  text-align: center;\n  border-radius: 2px;\n}\n\n.etabs-tab-buttons button:hover {\n  color: #eee;\n  background-color: #aaa;\n}\n\n.etabs-views {\n  position: relative;\n  border-top: 1px solid #aaa;\n  height: calc(100vh - 33px);\n}\n\n.etab-view {\n  position: relative;\n}\n\nwebview {\n  position: absolute;\n  visibility: hidden;\n  width: 100%;\n  height: 100%;\n}\n\nwebview.visible {\n  visibility: visible;\n}\n";
+var $5580883c37846f86$export$2e2bcd8739ae039 = "/* TODO: use custom properties */\n\nwebview {\n  position: absolute;\n  visibility: hidden;\n  width: 100%;\n  height: 100%;\n}\n\nwebview.visible {\n  visibility: visible;\n}\n\n.etabs {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  text-rendering: optimizeLegibility;\n  font-feature-settings: 'liga', 'clig', 'kern';\n}\n\n.etabs-tabgroup {\n  width: 100%;\n  height: 32px;\n  cursor: default;\n  font: caption;\n  font-size: 14px;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n  background: #E7EAED;\n  box-shadow: inset 0 -1px #DADCE0;\n  border-top: 1px solid #DADCE0;\n}\n\n.etabs-tabgroup.visible {\n  display: flex;\n}\n\n.etabs-tabs {\n  height: 100%;\n}\n\n.etabs-tab {\n  display: none;\n  position: relative;\n  height: 100%;\n  background: #E7EAED;\n  color: #696A6C;\n  padding: 5px 9px;\n  transition: background-color 150ms ease-out;\n  box-shadow: inset 0 -1px #DADCE0;\n  font: caption;\n  font-size: 13px;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n  padding-bottom: 0;\n  cursor: grab;\n\tborder: none;\n}\n\n.etabs-tab:first-child {\n  border-left: none;\n}\n\n.etabs-tab.visible {\n  display: inline-block;\n}\n\n.etabs-tab.active {\n  background: #fff;\n  box-shadow: none;\n\tborder-left: 1px solid #DADCE0;\n\tborder-right: 1px solid #DADCE0;\n\tpadding-left: 8px;\n\tpadding-right: 8px;\n}\n\n.etabs-tab.flash {\n  background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);\n}\n\n.etabs-tab.visible:not(.active)+.etabs-tab.visible:not(.active) {\n\tborder-left: 1px solid #B4B6B8;\n\tpadding-left: 8px;\n}\n\n.etabs-tab:not(.active):hover {\n\tbackground: #F1F3F4;\n}\n\n.etabs-buttons {\n  border-left: 1px solid #B4B6B8;\n}\n\n.etabs-buttons button {\n  display: block;\n  color: #777;\n  background: none;\n  border: none;\n  font-size: 16px;\n  font-family: inherit;\n  margin-top: 5px;\n  border-radius: 50%;\n  margin-left: 4px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 14px;\n  padding: 1px 0 0 0;\n\tcursor: pointer;\n}\n\n.etabs-buttons button:hover {\n  color: #333;\n  background-color: #bbb;\n}\n\n.etabs-tab-badge {\n  position: absolute;\n  right: 0;\n  top: -7px;\n  background: red;\n  border-radius: 100%;\n  text-align: center;\n  font-size: 10px;\n  padding: 0 5px;\n}\n\n.etabs-tab-badge.hidden {\n  display: none;\n}\n\n.etabs-tab-icon {\n  display: inline-block;\n  height: 16px;\n}\n\n.etabs-tab-icon img {\n  max-width: 16px;\n  max-height: 16px;\n}\n\n.etabs-tab-title {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons button {\n  display: inline-block;\n  color: #777;\n  background: none;\n  border: none;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  border-radius: 50%;\n  cursor: pointer;\n  padding: 1px 0 0 0;\n  font-size: 16px;\n}\n\n.etabs-tab-buttons button:hover {\n  color: #333;\n  background-color: #bbb;\n}\n\n.etabs-views {\n  position: relative;\n  height: calc(100vh - 33px);\n}\n\n.etab-view {\n  position: relative;\n}\n";
 
 
 if (!document) throw Error("electron-tabs module must be called in renderer process");

src/style.inline.css

@@ -1,38 +1,64 @@
+/* TODO: use custom properties */
+
+webview {
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+webview.visible {
+  visibility: visible;
+}
+
+.etabs {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga', 'clig', 'kern';
+}
+
 .etabs-tabgroup {
   width: 100%;
   height: 32px;
-  background-color: #ccc;
   cursor: default;
   font: caption;
   font-size: 14px;
   -webkit-user-select: none;
   user-select: none;
   display: none;
+  background: #E7EAED;
+  box-shadow: inset 0 -1px #DADCE0;
+  border-top: 1px solid #DADCE0;
 }
 
 .etabs-tabgroup.visible {
-	display: block;
+  display: flex;
+}
+
+.etabs-tabs {
+  height: 100%;
 }
 
 .etabs-tab {
   display: none;
   position: relative;
-  color: #333;
+  height: 100%;
-  height: 22px;
+  background: #E7EAED;
-  padding: 6px 8px 4px;
+  color: #696A6C;
-  border: 1px solid #aaa;
+  padding: 5px 9px;
-  border-bottom: none;
+  transition: background-color 150ms ease-out;
-  border-left: none;
+  box-shadow: inset 0 -1px #DADCE0;
-  background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);
   font: caption;
-  font-size: 14px;
+  font-size: 13px;
-  background-color: #ccc;
+  cursor: pointer;
-  cursor: default;
+  box-sizing: border-box;
 }
 
 /* Dragula */
 .etabs-tab.gu-mirror {
   padding-bottom: 0;
+  cursor: grab;
+	border: none;
 }
 
 .etabs-tab:first-child {
@@ -45,34 +71,51 @@
 
 .etabs-tab.active {
   background: #fff;
+  box-shadow: none;
+	border-left: 1px solid #DADCE0;
+	border-right: 1px solid #DADCE0;
+	padding-left: 8px;
+	padding-right: 8px;
 }
 
 .etabs-tab.flash {
   background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);
 }
 
-/* TODO: fix it */
+.etabs-tab.visible:not(.active)+.etabs-tab.visible:not(.active) {
+	border-left: 1px solid #B4B6B8;
+	padding-left: 8px;
+}
+
+.etabs-tab:not(.active):hover {
+	background: #F1F3F4;
+}
+
 .etabs-buttons {
-  float: left;
+  border-left: 1px solid #B4B6B8;
 }
 
 .etabs-buttons button {
-  float: left;
+  display: block;
-  color: #333;
+  color: #777;
   background: none;
   border: none;
-  font-size: 12px;
+  font-size: 16px;
-  margin-top: 6px;
+  font-family: inherit;
-  border-radius: 2px;
+  margin-top: 5px;
+  border-radius: 50%;
   margin-left: 4px;
   width: 20px;
+  height: 20px;
   text-align: center;
-  padding: 4px 0;
+  line-height: 14px;
+  padding: 1px 0 0 0;
+	cursor: pointer;
 }
 
 .etabs-buttons button:hover {
-  color: #eee;
+  color: #333;
-  background-color: #aaa;
+  background-color: #bbb;
 }
 
 .etabs-tab-badge {
@@ -112,36 +155,28 @@
 
 .etabs-tab-buttons button {
   display: inline-block;
-  color: #333;
+  color: #777;
   background: none;
   border: none;
   width: 20px;
+  height: 20px;
   text-align: center;
-  border-radius: 2px;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 1px 0 0 0;
+  font-size: 16px;
 }
 
 .etabs-tab-buttons button:hover {
-  color: #eee;
+  color: #333;
-  background-color: #aaa;
+  background-color: #bbb;
 }
 
 .etabs-views {
   position: relative;
-  border-top: 1px solid #aaa;
   height: calc(100vh - 33px);
 }
 
 .etab-view {
   position: relative;
 }
-
-webview {
-  position: absolute;
-  visibility: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-webview.visible {
-  visibility: visible;
-}