.

terminus-core/src/components/appRoot.component.pug

@@ -16,37 +16,39 @@ title-bar(*ngIf='config.store.appearance.frame == "full" && config.store.appeara
                 (closeClicked)='app.closeTab(tab)',
             )
         
-        button.btn.btn-secondary(
-            *ngFor='let button of getLeftToolbarButtons()',
-            [title]='button.title',
-            (click)='button.click()',
-        )
-            i.fa([class]='"fa fa-" + button.icon')
+        .btn-group
+            button.btn.btn-secondary.btn-tab-bar(
+                *ngFor='let button of getLeftToolbarButtons()',
+                [title]='button.title',
+                (click)='button.click()',
+            )
+                i.fa([class]='"fa fa-" + button.icon')
                 
         .drag-space
+            
+        .btn-group
+            button.btn.btn-secondary.btn-tab-bar(
+                *ngFor='let button of getRightToolbarButtons()',
+                [title]='button.title',
+                (click)='button.click()',
+            )
+                i.fa([class]='"fa fa-" + button.icon')
 
-        button.btn.btn-secondary(
-            *ngFor='let button of getRightToolbarButtons()',
-            [title]='button.title',
-            (click)='button.click()',
-        )
-            i.fa([class]='"fa fa-" + button.icon')
-
-        button.btn.btn-secondary.btn-minimize(
+        .btn-group.window-controls(
             *ngIf='config.store.appearance.frame == "thin"',
-            (click)='hostApp.minimize()',
         )
-            i.fa.fa-window-minimize
-        button.btn.btn-secondary.btn-maximize(
-            *ngIf='config.store.appearance.frame == "thin"',
-            (click)='hostApp.toggleMaximize()',
-        )
-            i.fa.fa-window-maximize
-        button.btn.btn-secondary.btn-close(
-            *ngIf='config.store.appearance.frame == "thin"',
-            (click)='hostApp.quit()',
-        )
-            i.fa.fa-close
+            button.btn.btn-secondary.btn-minimize.btn-tab-bar(
+                (click)='hostApp.minimize()',
+            )
+                i.fa.fa-window-minimize
+            button.btn.btn-secondary.btn-maximize.btn-tab-bar(
+                (click)='hostApp.toggleMaximize()',
+            )
+                i.fa.fa-window-maximize
+            button.btn.btn-secondary.btn-close.btn-tab-bar(
+                (click)='hostApp.quit()',
+            )
+                i.fa.fa-close
 
     start-page(*ngIf='app.tabs.length == 0')
 

terminus-core/src/components/appRoot.component.scss

@@ -5,6 +5,7 @@
     flex-direction: column;
     overflow: hidden;
     -webkit-user-select: none;
+    -webkit-user-drag: none;
     -webkit-font-smoothing: antialiased;
     cursor: default;
     animation: 0.5s ease-out fadeIn;
@@ -29,7 +30,7 @@ $tab-border-radius: 4px;
     height: $tabs-height;
     display: flex;
 
-    &>button {
+    .btn-tab-bar {
         line-height: $tabs-height + 2px;
         cursor: pointer;
 
@@ -48,7 +49,7 @@ $tab-border-radius: 4px;
         &.btn-minimize {
             margin-left: 10px;
         }
-        
+
         &.btn-minimize, &.btn-maximize {
             font-size: 8px;
         }
@@ -69,6 +70,10 @@ $tab-border-radius: 4px;
         flex: 1 0 25%;
         -webkit-app-region: drag;
     }
+
+    &.window-controls {
+        flex: 0 0 none;
+    }
 }
 
 .tabs-content {

terminus-core/src/theme.scss

@@ -82,13 +82,14 @@ title-bar {
     }
 }
 
+$border-color: #141414;
 
 app-root  {
     &> .content {
         background: $body-bg2;
 
         .tab-bar {
-            &>button {
+            .btn-tab-bar {
                 &:not(:hover):not(:active) {
                     background: $body-bg2;
                 }
@@ -105,6 +106,9 @@ app-root  {
 
                 tab-header {
                     background: $body-bg2;
+                    border-left: 1px solid transparent;
+                    border-right: 1px solid transparent;
+                    margin-bottom: -1px;
 
                     .index {
                         color: #555;
@@ -121,6 +125,8 @@ app-root  {
 
                     &.active {
                         background: $body-bg;
+                        border-left: 1px solid $border-color;
+                        border-right: 1px solid $border-color;
                     }
                 }
             }
@@ -129,15 +135,21 @@ app-root  {
         &.tabs-on-top .tab-bar {
             tab-header {
                 border-top: 1px solid transparent;
+                border-bottom: 1px solid $border-color;
 
                 &.active {
                     border-top: 1px solid $teal;
+                    border-bottom: 1px solid transparent;
                 }
 
                 &.has-activity:not(.active) {
                     border-top: 1px solid $green;
                 }
             }
+
+            &>.btn-group, .drag-space {
+                border-bottom: 1px solid $border-color;
+            }
         }
 
         &:not(.tabs-on-top) .tab-bar {
@@ -145,15 +157,21 @@ app-root  {
 
             tab-header {
                 border-bottom: 1px solid transparent;
+                border-top: 1px solid $border-color;
 
                 &.active {
                     border-bottom: 1px solid $teal;
+                    border-top: 1px solid transparent;
                 }
 
                 &.has-activity:not(.active) {
                     border-bottom: 1px solid $green;
                 }
             }
+
+            &>.btn-group, .drag-space {
+                border-top: 1px solid $border-color;
+            }
         }
     }
 }

webpack.config.js

@@ -5,6 +5,6 @@ module.exports = [
   require('./terminus-terminal/webpack.config.js'),
   require('./terminus-clickable-links/webpack.config.js'),
   require('./terminus-community-color-schemes/webpack.config.js'),
-  require('./terminus-plugin-manager/webpack.config.js'),
+  //require('./terminus-plugin-manager/webpack.config.js'),
   require('./terminus-theme-hype/webpack.config.js'),
 ]