fade out shortened tab titles instead of using ellipses

fixes #25 and also improves hover performance in long tab lists by avoiding layout reflows to show the close button

src/tabcenter.css

@@ -1,11 +1,17 @@
 @import url("contextmenu.css");
 
+:root {
+    --tab-background-normal: 0, 0%, 99%;
+    --tab-background-active: 0, 0%, 87%;
+    --tab-background-hover: 0, 0%, 91%;
+}
+
 html, body {
     height: 100%;
 }
 
 body {
-    background-color: hsl(0, 0%, 99%);
+    background-color: hsl(var(--tab-background-normal));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     color: #000;
     font-size: 11px;
@@ -213,20 +219,24 @@ img, .tab *:not(.clickable) {
     overflow-y: auto;
 }
 
+#tablist {
+    overflow-x: hidden;
+}
+
 .tab {
     display: flex;
     align-items: center;
     height: 56px;
-    padding-right: 12px;
     border-bottom: 1px solid hsla(0, 0%, 0%, 0.06);
+    position: relative;
 }
 
 .tab.active {
-    background-color: hsla(0, 0%, 0%, 0.12);
+    background-color: hsl(var(--tab-background-active));
 }
 
 .tab:not(.active):hover {
-    background-color: hsla(0, 0%, 0%, 0.08);
+    background-color: hsl(var(--tab-background-hover));
 }
 
 .tab-context:not(.hasContext) {
@@ -328,7 +338,6 @@ img, .tab *:not(.clickable) {
 .tab-title-wrapper {
     flex: 1;
     display: flex;
-    margin-right: 8px;
     min-width: 0;
     flex-direction: column;
 }
@@ -340,7 +349,6 @@ img, .tab *:not(.clickable) {
 .tab-title, .tab-host {
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .tab-host {
@@ -351,35 +359,74 @@ img, .tab *:not(.clickable) {
     display: none;
 }
 
+.tab-title-wrapper::after {
+    content: '';
+    position: absolute;
+    width: 60px;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    --tab-background: var(--tab-background-normal);
+    background-image: linear-gradient(to right, hsla(var(--tab-background), 0), hsl(var(--tab-background)) 30%);
+    transform: translateX(36px);
+}
+
+.tab.active > .tab-title-wrapper::after {
+    --tab-background: var(--tab-background-active);
+}
+
+.tab:not(.active):hover > .tab-title-wrapper::after {
+    --tab-background: var(--tab-background-hover);
+}
+
+.tab:not(.pinned):hover > .tab-title-wrapper::after {
+    transform: translateX(0);
+}
+
+.tab.pinned .tab-title-wrapper::after {
+    transform: translateX(8px);
+}
+
 .tab-pin {
     display: none;
 }
 
 .tab.pinned .tab-pin {
     min-width: 16px;
     height: 16px;
+    margin-right: 12px;
     display: block;
     background-image: url("img/glyph-pin-pinned-12.svg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 12px;
+    z-index: 0;
 }
 
 .tab-close {
     display: none;
 }
 
-.tab:not(.pinned):hover > .tab-close {
+.tab:not(.pinned) > .tab-close {
+    position: absolute;
     display: block;
     width: 24px;
     height: 24px;
-    margin-left: 8px;
+    top: 0;
+    bottom: 0;
+    right: 12px;
+    margin: auto;
     background-color: hsla(0, 0%, 0%, 0.1);
     background-image: url("img/glyph-close-16.svg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: 16px;
     border-radius: 2.5px;
+    opacity: 0;
+}
+
+.tab:not(.pinned):hover > .tab-close {
+    opacity: 1;
 }
 
 .tab-close:hover {
@@ -414,7 +461,9 @@ img, .tab *:not(.clickable) {
 
 /* DARK THEME CUSTOMIZATIONS */
 body.dark-theme {
-    background-color: rgb(39, 43, 53);
+    --tab-background-normal: 223, 15.2%, 18%;
+    --tab-background-active: 221, 41.4%, 53.1%;
+    --tab-background-hover: 222, 28.3%, 35.55%;
     color: rgb(245, 247, 250);
 }
 
@@ -457,10 +506,6 @@ body.dark-theme .tab.active .tab-host {
     color: #eaeaea;
 }
 
-body.dark-theme .tab.active {
-    background-color: rgb(86, 117, 185);
-}
-
 body.dark-theme .tab-icon-overlay {
     background-color: #333;
 }